HTML5-原生js智能推箱子-3.计时器对象的tick.js

最新推荐文章于 2023-06-26 08:29:19 发布
最新推荐文章于 2023-06-26 08:29:19 发布
阅读量472 收藏
点赞数
分类专栏： 游戏流程开发 文章标签： html5 canvas 小游戏开发 ai智能推箱子 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38766085/article/details/85106293
版权

开发环境:

支持html5的浏览器

语言:javascript脚本语言

渲染引擎:canvas

碰撞:采用点型地图判断下一步移动区域能否移动

项目目录截图:

img文件夹是储存项目所需要的图片文件

index.html入口html文件

tick.js

我们先看下我们的计时器属性

tick.js

我们设置了一个start私有变量表示计时器是否启动

callArr这里储存的是所有回调函数的数组

tickerInt是储存我们cancelAnimationFrame的返回值的

start是用的设置监听属性当start属性改变的时候我们就修改一下计时器的启动状态

下面我们看方法：

tick.js

可以看到我们的计时器对象只有四个方法

下面我们看addFun:

tick.js

在这里我们定义了一个唯一id用来表示我们的计时器回调函数

然后我们将这个对象放入我们的callArr里面这样就形成了一个添加回调函数的方法

下面我们看removeFun:

tick.js

我们通过id来移出计时器回调函数

下面我们看loop方法:

tick.js

在这个方法里面我们先判断我们的计时器是否是启动的如果是启动的我们就不做操作如果不是启动的我们就调用取消计时器的方法再然后我们循环调用每一帧的韩素华 并且进行时间间隔判断

下面我们看cancel方法:

tick.js

这里我们直接调用cancelAnimationframe方法取消计时器

计时器的主要作用

这个计时器在我们的游戏里面周期的渲染我们的场景对象我们通过修改精灵对象 的x和y就可以达到一个动画的效果

调用流程:

index.js

我们先在index.js里面定义了tick对象

然后我们在

in

在initGs里面我们将我们的场景自循环函数给新增到我们的tk对象中这样就实现了一个周期渲染

后面我们会详细说明index.js(请各位看官不要着急)

 

这是我们要做的目标

项目开源地址:

https://github.com/yinhui1129754/aitxz

游戏开发交流群:

859055710

灰灰_世界
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取当前时间（时刻变化的）
yyyu41的专栏
11-07 165
function tick()   {   var year,month,day,hours,minutes,seconds,ap;   var intYear,intMonth,intDay,intHours,intMinutes,intSeconds;   var today;   today=new Date();   intYear=today.getYear()+1900;   intM...
tick:Tick是一个JavaScript插件，可让您轻松直观地看到动态变化的数字
05-25
打钩 Tick是一个JavaScript插件，可轻松实现动态可视化数字变化。 实例方法 注意： $().ticker始终返回Tick实例的数组，因此请始终在该数组的元素上调用这些方法！ start渲染并启动Tick实例。 返回实例的计时器；如果实例已经在运行，则返回undefined 。 stop停止Tick实例并清除计时器。 返回false 。 属性 running boolean表示行情自动收录器是否已启动 options反对所有运行时选项 element对象用于此行情收录器的元素 value int传递给代码的任何值 separators数组所有分隔符的列表 increment函数回调，用于在每个刻度上更新@value 选项 incremental混合可以是在每个刻度上添加到基值的固定数值，也可以是用当前值调用并且必须返回更新后的数字的函数 delay int时间（以毫秒为单位）
HTML 推箱子小游戏制作
清风且从容，何需念君安。
05-26 522
【代码】HTML 推箱子小游戏制作。
HTML5 游戏开发实战 ｜ 推箱子
不断学习，不断进步，提高自己
06-26 2049
经典的推箱子是一个来自日本的古老游戏，目的是在训练玩家的逻辑思考能力。在一个狭小的仓库中，要求把木箱放到指定的位置，稍不小心就会出现箱子无法移动或者通道被堵住的情况，所以需要巧妙地利用有限的空间和通道，合理安排移动的次序和位置，才能顺利地完成任务。推箱子游戏功能如下：游戏运行载入相应的地图，屏幕中出现一个推箱子的工人，其周围是围墙、人可以走的通道、几个可以移动的箱子和箱子放置的目的地。让玩家通过按上、下、左、右键控制工人推箱子，当箱子都推到了目的地后出现过关信息，并显示下一关。
原生js经典推箱子小游戏源码.rar
01-27
原生js经典推箱子小游戏源码
原生js推箱子关卡游戏代码.zip
07-11
js皮卡丘推箱子,代码简单易懂,可以随意设计关卡。map自定义参数设置：0:空地 1:墙 3:目的地 4:箱子 5:人 7:箱子和目的地重合 8:人和目的地重合
推箱子游戏-原生JavaScript实现
04-18
推箱子网页版，使用原生JavaScript实现，多关卡，可选关，可退步，操作方式键盘鼠标均可
Flv.js HTML5播放器内核-其他
06-12
Flv.js是HTML5 Flash视频（FLV）播放器，纯原生JavaScript开发，没有用到Flash。由bilibili网站开源。该项目依托于Media Source Extensions，受到hls.js的启发。 Flv.js是一个实现了在HTML5视频中播放FLV格式视频的...
Cocos2d-JS开发之旅 从HTML5到原生手机游戏 资源源码
04-21
Cocos2d-JS开发之旅 从HTML5到原生手机游戏随书资源源码
Tick.js:轻量级运动库
06-27
Tick.js a lightweight animation library for javascript #1.简介 Tick.js -- 轻量级的动画库 #2.兼容性 IE6+、Chrome、Firefox、Safari、Opera等浏览器 #3.使用 ###参数 Tick.to(element,props,type,speed,,delay,callback.callbackParams) ####例子： Tick.to(element,{ left:400, top:400, width:200, height:200, onComplete:function(){ console.log("done") }, onCompleteParams:[] },"easeInOutBack",1000,500); ###API
js---计时函数
unreal639的博客
03-29 643
js里面有这样几种相关的方法： setTimeout process.nextTick setImmediate setInterval nextTick js里面的Tick可以理解为事件循环执行了一次，nextTick就是将回调放到下一次事件循环中。 setTimeout setTimeout可以设置多少毫秒后调用回调函数，不过并不精确。可能会因为事件循环运行时间较长导致超时。 setTim...
基于HTML（canvas）的推箱子游戏
[email protected]的博客
04-08 2026
基于HTML（canvas）的推箱子游戏 javascript + canvas 设计实现，代码简单易懂，非常适合新手学习。
node.js中的定时器nextTick()和setImmediate()区别分析
路在脚下，幸福在手中，莫贪！！！！！
04-09 947
nextTick()和setImmediate（）都是延迟加载。但是nextTick()是放在当前队列的最后一个，setImmediate（）是下一个队列的对首console.log(1); //下一个队列的对首 setImmediate(()=>{ console.log('setImmediate'); }); //放在setImmediate和nextTick中间 setTimeou...
用HTML5+原生js实现的推箱子游戏
weixin_30640291的博客
03-20 637
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用HTML5+原生js实现的推箱子游戏</title> <link rel="stylesheet" href="css/style...
html+css+js实现推箱子-进阶版(自己diy地图)
qq_49507936的博客
03-17 1006
简单的html+css+js实现玩家自己diy地图
js nextTick和生命周期
weixin_44871977的博客
07-03 2294
之前对dom更新的事件循环有点模糊，今天总结一下，这里只提几个比较重要的生命周期函数： dom产生分为初始化和更新阶段：初始化可以理解为是特殊的更新，dom更新并不是直接更新，而是把待更新的结点放入事件队列中，然后等待至一定时间，取出队列中的结点，一一更新，这样的一次循环就是一次tick；最后这些结点是否更新是通过watch监听的，以及diff算法（这个我暂时也没看过） created: 组件创建完就执行该回调函数，但是这个时候并没有执行dom的渲染，也获取不到子组件和dom的任何信息，如果有数据更新或.
Vue.js异步更新及nextTick
weixin_33828101的博客
08-28 263
写在前面 前段时间在写项目时对nextTick的使用有一些疑惑。在查阅各种资料之后，在这里总结一下Vue.js异步更新的策略以及nextTick的用途和原理。如有总结错误的地方，欢迎指出！ 本文将从以下3点进行总结： 为什么Vue.js要异步更新视图？ JavaScript异步运行的机制是怎样的？ 什么情况下要使用nextTick？ 先看一个例子 &lt;template&gt; &...
【HTML小游戏】推箱子网页版(附完整源码)
热门推荐
zhangxia_的博客
11-09 1万+
经典的推箱子是一个非常古老游戏，甚至是80，90年代的回忆，目的是在训练你的逻辑思考能力。在一个狭小的仓库中，要求把木箱放到指定的位置，稍不小心就会出现箱子无法移动或者通道被堵住的情况，所以需要巧妙的利用有限的空间和通道，合理安排移动的次序和位置，才能顺利的完成任务。在移动箱子的过程中，是对你的思维能力的一个训练，今天这款推箱子正是童年的回忆，但是我们的目的是为了通过学习源码的形式，来学习前端开发的知识，熟练掌握HtML标签，CSS属性和JS逻辑的知识。
原生JavaScript a.js classA引入 b.js classB
最新发布
08-17
要原生 JavaScript 的 `a.js` 文件中引入 `b.js` 文件中的 `ClassB` 类，可以按照以下步骤进行： 首先，在 `b.js` 文件中定义 `ClassB` 类： ```javascript // b.js class ClassB { constructor() { // ... } methodB() { // ... } } ``` 然后，在 `a.js` 文件中使用 `<script>` 标签将 `b.js` 文件引入，并在 Class A 中使用 `ClassB` 类： ```javascript // a.js class ClassA { constructor() { this.b = new ClassB(); } methodA() { this.b.methodB(); } } // 引入 b.js 文件 const script = document.createElement('script'); script.src = 'b.js'; script.onload = function() { const a = new ClassA(); a.methodA(); }; document.head.appendChild(script); ``` 在上述示例中，我们通过创建一个 `<script>` 标签，将 `b.js` 文件引入到 `a.js` 文件中。当 `b.js` 文件加载完成后，我们创建了一个 `ClassA` 的实例，并调用了其中的 `methodA` 方法，该方法使用了 `ClassB` 的方法。 请确保 `a.js` 和 `b.js` 文件在同一目录下，并且在 HTML 文件中正确引入了 `a.js` 文件。这样就可以在 `ClassA` 中引入和使用 `ClassB`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值