HTML5-原生js智能推箱子-7.用户对象user.js

开发环境:

支持html5的浏览器

语言:javascript脚本语言

渲染引擎:canvas

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

项目目录截图:

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

index.html入口html文件

对象属性user.js

user.js

view 设置用户对象的视图精灵

msgDl 这个是储存用户对象行为的一个队列因为我们的每一次移动都是一个动画所以这里就不能无限制的移动所以我们就把后面的放到这个数组里面

posInfo 这个是储存我们的用户对象的坐标信息

screen 储存场景对象的属性

endObj 储存用户对象在移动的时候的结束位置的点

timmer 表示我们的计时器是否是在启动中

speed 用户移动速度

promoteBox 用户对象推动的箱子

promote 用户对象是否正在推动箱子

对象方法user.js

user.js

moveLeft

user.js

像左移动的函数 我们的流程是先判断用户的下一个方块能不能移动 如果能移动我们就移动 我们在判断的时候还要判断下一个移动的方块是否是箱子如果是箱子我们我们就判断箱子的下一个能不能移动如果可以移动我们就推动箱子

boxInfo

user.js

我们判断要移动的下一步是否是一个阻碍是否是可以移动的

如果是可以移动的我们就设置位置信息设置箱子的位置信息 设置结束点的位置信息 设置箱子推动中 设置时间为启动中 设置箱子推动结束的点信息如果是不能移动的我们就判断消息队列是否有值有值的话我们就移动 

testInfo

user.js

这个函数就是我们判断下一个目标点是否能移动的如果可以移动我们就返回一个str true对象如果不能移动我们就判断下一个阻碍移动的东西是石头还是箱子并返回过去

moveX

user.js

移动到下一个点修改的x位置我们通过endObj来移动我们的箱子对象和我们的用户对象

当我们的x到最终点的时候我们就设置timmer为false 设置推动中的状态为false设置推动的箱子也为null

frame

user.js

这里是每一帧调用的函数我们判断我们的终点是否等于我们的全局坐标系 如果是我们就设置为promote 推动中为false

设置timmer为false 然后我们判断msgDl消息队列中是否还有要处理的消息 

sedMsg

user.js

这个函数是将我们要执行的方法放到我们的队列中去 因为我们的一个移动是一个动画所以我们要进行队列的处理不能让一个方法在还没有结束执行的时候就开始执行下一个方法

调用流程:

screen.js

在我们的screen场景对象中的initUser来创建我们的用户对象我们这里设置了用户对象的posInfo信息并且我们赋值用户对象的screen属性同时我们还设置我们的user对象

事件处理:

index.js

我们通过js的onkeydown来对用户对象发送消息对象

我们通过事件对象的keyCode来判断我们按键是按的哪一个键

index.js

这里我们是判断移动端手机拖动事件我们通过我们的大小值来判断我们滑动的方向从而发送消息

这是我们要做的目标

项目开源地址:

https://github.com/yinhui1129754/aitxz

游戏开发交流群:

859055710