ES6飞机大战篇-封装全局定时器

最近在编写飞机大战，开发到一半想到是否可以选择暂停游戏常见的清理就是用 clearTimerout 或者 clearInterval 那么如果数量多了就会出现有些定时器没有清理的问题为了避免出现这些问题出现我尝试封装了一下定时器代码如下：

class Interval {constructor(delayTimer) {this.intervalTimer = null;this.intervalFuncMap = {};this.intervalDelay = delayTimer;}// 创建定时器createInterval() {this.clearInterval();this.intervalTimer = setInterval(() => {this.intervalOperationFunc();}, this.intervalDelay);}// 清除定时器clearInterval() {if (this.intervalTimer) {clearInterval(this.intervalTimer);this.intervalTimer = null;}}// 重新设置定时器的间隔时间setIntervalDelay(delay) {this.intervalDelay = delay;this.clearInterval();this.createInterval();}// 添加add(func, id) {if (this.hasOwnProperty(id)) {this.remove(id);}this.intervalFuncMap[id] = func;return true;}// 是否存在hasOwnProperty(id) {return this.intervalFuncMap.hasOwnProperty(id);}// 删除remove(id) {return delete this.intervalFuncMap[id];}// 执行定期函数intervalOperationFunc() {const intervalFuncMap = this.intervalFuncMap;for (const key in intervalFuncMap) {const func = intervalFuncMap[key];if (typeof func === "function") {func();}}}
}
// 初始化定时器时间
const intervalStore = new Interval(1000);
intervalStore.createInterval();

说明一下我的使用环境：

1.暂停采用清理定时器，基本上都是一样的
2.定期可以执行函数
3.通过id可以移除函数
4.使用方便
5.暂停不会清空添加当中的函数

添加定期执行函数

//  使用起来很简单 和平常的函数一样 只需要记录唯一id即可
intervalStore.add(() => {....},  id);

删除函数

// 移除定时执行的函数 采用唯一id
intervalStore.remove(id);

暂停全局定时器

// 只需要调用一次 全局定时器将会进行清空， 但是不会移除已经记录的函数
intervalStore.clearInterval();

继续执行全局定时器

// 继续执行全局定时器
intervalStore.createInterval();

全局计时器改变速度

// 只需要调用函数 将会重新刷新定时器 并且更改时间
intervalStore.setIntervalDelay(2000);

这只是当中一个方法完整飞机大战项目可以查看：https://github.com/SDSGK/plane-ES6

ES6飞机大战篇-封装全局定时器相关推荐

ES6飞机大战篇-添加子弹追踪功能
既然是飞机大战那必定少不了子弹追踪那么添加子弹追踪功能的实现如下: // 原文链接:https://blog.csdn.net/erweimac/article/details/82256087 ...
ES6飞机大战篇-敌机自动移动发射子弹
想要游戏变得有点难度的话就得让敌机自己动起来(移动轨迹提前设置好)那么就得单独的来进行控制敌机上下左右发射首先制作数据: /*** health:生命值* width:宽度* height:高度* ...
ES6飞机大战篇-github托管游戏
研究了一下github 发现居然可以托管网页, 我这个页面也没啥东西所以就设置了一下代理了一下这样就可以直接在线玩了. 如果出现报错可以等待所有资源加载完毕毕竟是免费的托管避免不了的请求慢 ...
项目: 用封装的方法实现飞机大战游戏
目录一.项目描述和最终的成果展示二.用函数进行封装三.新型的发射子弹功能四.实现移动的敌机功能和更正屏幕闪烁,清除光标功能五.订正一些BUG和完成一些美化这是上一次的飞机大战游戏的项目.项 ...
【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
设计自己的小游戏-飞机大战奖励篇
在学习java基础知识后,根据网上飞机大战的内容和代码改变,设计出飞机大战的奖励篇小游戏,后期可将飞机大战和奖励篇等设计成一个完整游戏. 项目描述: 游戏开始,会出现若干蓝色空心圆形物体视为奖励道具会 ...
【pygame学习+实战】第二篇：怀旧——飞机大战
14天学习训练营导师课程: 李宁<Python Pygame游戏开发入门与实战> 李宁<计算机视觉OpenCV Python项目实战>1 李宁<计算机视觉OpenCV P ...
虚幻4渲染编程（游戏Demo篇）【第一卷：飞机大战】
我的专栏目录: 小IVan:急速游戏开发综述及目录概述: 技术美术需要对整个游戏制作流程都非常清楚,这样才能在开发中提出合理的制作方法.有时候有空可以自己做做游戏demo,这个过程也非常有趣.游戏D ...
Java学习之路：简单的飞机大战游戏（敌机下落篇）
在实现这个游戏之前,我们首先需要知道项目可能要用到哪些知识点: 重绘,线程,双缓冲,数据结构的应用差不多是这大概有这些,如果不够的话我们再加. 首先,我们应该实现敌机下落,在这里大概思路和利用线程使 ...

ES6飞机大战篇-封装全局定时器

添加定期执行函数

删除函数

暂停全局定时器

继续执行全局定时器

全局计时器改变速度

ES6飞机大战篇-封装全局定时器相关推荐

最新文章

热门文章