HTML5-原生js智能推箱子-8.流程控制编写index.js

开发环境:

支持html5的浏览器

语言:javascript脚本语言

渲染引擎:canvas

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

项目目录截图:

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

index.html入口html文件

index.js主要作用:

1.初始化场景对象

2.pc端方向键监听

3.移动端滑动监听

4.创建机器人对象并且添加机器人操作事件(启动和结束机器人)

1.创建场景对象

index.js

initGs的参数 index初始化关数 tk计时器对象

函数执行的时候创建场景对象 传入场景对象需要的参数(地图数据，地图宽度，地图高度，canvas的2d绘图环境，canvas节点，关数过关的回调函数，在回调函数里面我们继续加载下一关并且更新机器人对象的场景对象属性这样就实现了 一个环)

下面我们new一个资源加载对象(source)然后我们绑定我们的场景对象的自循环方法(frame)每一帧调用在场景中使用并且让每一帧的回调函数的this都是我们的场景对象

下面我们赋值tk(计时器对象)

gs是我们的当前关数

下面我们调用load方法(资源对象的加载资源的方法)

load方法的第一个参数是资源加载的地址在(data.js)中定义的第二个参数是加载资源结束的回调函数

在资源加载完成过后我们调用我们的场景对象(screen)的初始化精灵图片的方法

然后是调用场景对象的初始化方法

然后是调用初始化盒子精灵的方法参数是我们(data.js)中定义的盒子的位置信息

然后我们调用初始化我们的结束位置精灵的方法参数是我们(data.js)中定义的结束点的位置信息

再然后就是调用我们的初始化用户精灵对象的方法了参数任然是我们(data.js)中定义的用户对象的位置信息

2.PC端按键信息监听

index.js

这里我们给window对象添加一个onkeydown事件(这里其实可以用onkeyup这样就不会出现一直给用户对象发送消息的情况了)

然后我们判断我们的事件keyCode(键码)来判断我们按的是那一个键这样我们根据键码来发送不同的移动方向

keyCode在这里可以通过(console.log(e.keyCode) 在控制台看到这样就可以自己修改键码了)

3.移动端滑动监听

index.js

我们通过两个事件 touchstart（触摸屏幕开始）,touchend（触摸屏幕结束）来判断滑动方向

我们先看我们的touchstart方法:

先说一下passive这个参数的作用 在我们组织浏览器默认行为的时候我们遇到滚动条滚动的时候浏览器就会报错

所以这个参数就是阻止这个报错的（我的理解是这样的不过我估计有错 因为我看文档也是一脸懵逼，姑且就这样理解了吧）

 

然后再事件函数的回调中我们储存了我们的开始点信息并且阻止了事件冒泡 浏览器默认行为(注意这里的startPoint变量后面要用哦)

事件对象的touches 表示停留再手机屏幕上的手子事件对象 一个手指停留在屏幕上那么他的长度就是1 ，2根字母停留那么长度就是2 那么这里储存的对象有什么用了 主要是储存了手指拇在屏幕上的位置信息

事件对象changedTouches这个是改变的手指拇 比如我们的touchend 当我们的手指拇从屏幕离开那么这个属性的长度就是1储存了离开字母的位置信息

下面我们看touchend方法:

index.js

我们首先将浏览器的默认行为，事件冒泡给阻止了

然后我们定义一个结束点的位置信息

下面就是关键的了

我们的位置信息储存了 clientX，clientY这里就表示屏幕以左上角为原点的坐标信息

我们判断我们的两个点的距离是否是大于30 的如果是x轴大于30那么我们就判断这个是左滑动或者的右滑动

然后我们再在内部判断我们的差值是否是大于0的如果是大于0的那么就表示这个是左滑动或者是下滑动

这样就达到了一个判断方向的目的

4.创建机器人对象并且添加机器人操作事件(启动和结束机器人)

index.js

这里我们先new一个机器人对象 然后我们判断我们的浏览器是否拥有touchend事件如果有我们就添加touchend事件来改变我们的机器人启动状态

否则我们添加click事件

这里就是index.js的主要事件和方法说明了 我们下一篇会对我们这个游戏的核心js进行详细的说明(robot.js)

机器人寻路 机器人自动推箱子 机器人启动和机器人关闭的说明

 

这是我们要做的目标

项目开源地址:

https://github.com/yinhui1129754/aitxz

游戏开发交流群:

859055710