H5小游戏
Leisure_Time
世上无难事, 只要肯努力!
展开
-
原生js实现扫雷
最近对扫雷比较感兴趣 就打算模仿者写一下算法全程都是自己想到的 不一定是标准的 但是可以用效果图如下:实现过程以及原理:1 生成网格信息实现思路:1.1:生成网格其中 则是最大格子数量,则是最大生成雷的数量,通过生成出来的数据可以包含以下信息:是否被扫开是否属于雷偏移量,y当前雷的坐标宽度。然后进行数据保存 我是通过对象的形式进行保存的 可以优化一些读取速度 具体形式如下:实现代码如下:1.2 第一次开图我目前是 的思路所以实现思路如下:其中 获取到的坐标点 通过 的方式 获原创 2023-10-24 17:34:22 · 134 阅读 · 0 评论 -
ES6飞机大战篇-github托管游戏
研究了一下github 发现居然可以托管网页, 我这个页面也没啥东西 所以就设置了一下 代理了一下 这样就可以直接在线玩了。如果出现报错 可以等待所有资源加载完毕 毕竟是免费的托管 避免不了的请求慢。。。。https://sdsgk.github.io/plane-ES6/index.html:游戏试玩地址...原创 2022-02-22 17:11:34 · 2040 阅读 · 0 评论 -
ES6飞机大战篇-封装全局定时器
最近在编写飞机大战,开发到一半想到 是否可以选择暂停游戏 常见的清理就是用 clearTimerout 或者 clearInterval 那么 如果数量多了 就会出现一会儿有些没用清理有些没用情理的问题 为了避免出现这些问题出现 我尝试分装了一下定时器 代码如下:class Interval { constructor(delayTimer) { this.intervalTimer = null; this.intervalFuncMap = {}; this.interva原创 2022-01-21 13:43:53 · 2391 阅读 · 0 评论 -
ES6飞机大战篇-数据存储的封装(object)
在飞机大战中 需要处理的数据是大量的 所以做到尽量的节省性能 所以自己封装了一个数据的仓库众所周知 js的 对象就是一个哈希表 那么哈希表来进行存储的话 那么将会性能提高(至少在存储删除方面特别快)class Store { constructor(data) { this.Store = data || {}; } // 通过id获取单个数据 getId(id) { return this.Store[id]; } // 检测是否存在 hasOwnPrope原创 2022-01-21 13:57:26 · 250 阅读 · 0 评论 -
ES6飞机大战篇-敌机自动移动发射子弹
想要游戏变得有点难度的话 就得让敌机自己动起来(移动轨迹提前设置好)那么就得单独的来进行控制敌机上下左右发射首先制作数据:/** * health:生命值 * width:宽度 * height:高度 * image:图片 * enemyMoveFunc:function 返回自动移动的数据 * timer:ms 执行时间间隔时间 * moveDirection:移动方向、按下的键位 可以设置多个 , 作为分隔符 将会同时按下 * distance:一次性移动多少距离 * isHide原创 2022-01-21 14:10:33 · 3613 阅读 · 0 评论 -
ES6飞机大战篇-添加子弹追踪功能
既然是飞机大战 那必定少不了子弹追踪那么添加子弹追踪功能的实现如下:// 原文链接:https://blog.csdn.net/erweimac/article/details/82256087// https://blog.csdn.net/weixin_30756499/article/details/97551805// https://blog.csdn.net/looffer/article/details/8846159// https://github.com/processing原创 2022-01-21 14:17:34 · 897 阅读 · 0 评论 -
ES6飞机大战篇-切换渲染方式
众所周知 如果使用canvas进行绘图的话 那么gpu将会介入 那可是一件大好事啊所以 进行添加渲染方式切换代码如下: // 初始化画布function initCanvas() { clearCanvas(); playerImage.onload = () => { // 绘制玩家贴图 ctx.drawImage( playerImage, playerInfo.offsetLeft, playerInfo.offsetTop,原创 2022-01-21 14:24:00 · 142 阅读 · 0 评论 -
ES6飞机大战篇-游戏介绍(优先看)
首先进行演示:当中设计到了 升级、攻击力、技能、暂停、敌机预设移动等等1.升级 我才用的是比较传统的方式 通过比率进行获取经验 格式如下 当前的等级 除去 比率 乘 敌机原本的血量 除以 比率 这么做可以让他持续升级 敌机也会随着等级提高血量变高。2.攻击力 攻击力升级时会进行提升 那么同样的 在不同的等级 将会发射多排子弹3.技能 技能我目前想到了三个k:代表着体积缩小移动速度加快,相对应的攻击力将会变小l:跟踪子弹 开启跟踪子弹 持续3秒 将会有10秒冷却i:火力全开 将射速提高到 32原创 2022-01-21 14:50:00 · 2478 阅读 · 1 评论 -
ES6飞机大战篇-增加游戏提示
这次更新添加了提示,动画效果采用的是animation来实现的 先添加一个简易的动画效果。那么提示也很简单class Notice { constructor() { // 队列 this.noticeQueue = new Queue() // 提示dom this.noticeDom = noticeDom // 最大index this.maxIndex = 1 // 提示元素 this.noticeDom = noticeDo原创 2022-01-24 15:02:59 · 2572 阅读 · 0 评论 -
ES6飞机大战篇-增加补给效果
本次更新增加了补给效果 目前只有两种效果增加攻击力 20%增加无敌时间 50%数据定义如下/** * describe:效果描述 * effTime:持续时间 */const effData = [ { describe: "增加 25% 攻击力,持续一分钟", describeEnd: "攻击力增幅时间结束", efftTime: 60000, nowEfftTime: 0, range: 0.25, keyName: 'hurt'原创 2022-02-18 15:27:08 · 515 阅读 · 0 评论