HTML5-原生js智能推箱子-4.场景对象screen.js

开发环境:

支持html5的浏览器

语言:javascript脚本语言

渲染引擎:canvas

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

项目目录截图:

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

index.html入口html文件

场景对象的属性

screen.js

stoge是储存石头精灵的数组

moveBg是储存可以移动的精灵数组

endPoint是储存终点的数组 因为可以有多个终点 所以是一个数组

box 是储存箱子的数组

posInfo是储存每一个块的位置信息的数组

user是储存用户对象的变量

mapW 是储存地图宽度的变量

mapH 是储存地图宽度的变量

maxBox是储存场景最大容器对象的一个变量

bg是用来储存场景背景的一个变量

imgObj是用来缓存img对象的变量

map是用来储存地图信息的一个变量

ctx canvas的2D绘制环境

dom canvas节点

paddingX 设置填充X轴距离

paddingY 设置填充Y轴距离

verticalAligin 设置竖直剧中模式 

tickInfo储存tick对象返回的计时器对象

tk 计时器对象

endCall 过关调用的回调函数

场景对象的方法:

screen.js

init

screen.js

调用各个初始化对象的方法

initMap

screen.js

先设置场景的大小 然后再调用初始化背景 然后再调用初始化精灵对象

initBox

screen.js

这里的参数是data.js里面的

data.js

根据这里的x 和 y 我们就可以确认箱子的显示位置 

initEnd

screen.js

这里的endArr和boxArr其实是一样的 都是提供一个位置信息来告诉程序终点的位置

initUser

这里我们根据data.js里面的用户信息设置用户的位置和产生精灵

data.js

可以看到我们需要的信息只有位置信息即可

initBg

screen.js

这里只用产生精灵对象即可

resize

screen.js

设置我们的canvas的大小

initSprite

screen.js

这里我们根据map的信息初始化我们的精灵对象

map的信息是再data。js里面定义的

data.js

我们这里只有三种情况1表示的是墙 0表示的是可以移动的背景 2表示的是什么都没有

initImg

screen.js

设置我们的imgObj对象这里的传入参数都是图片对象 (new Image img节点 canvas节点都行)

dispose

screen.js

这里我们将我们的 场景对象给设置为最初的状态方便加载下一关

frame

screen.js

这个方法是场景对象的核心方法 这个方法渲染了我们的界面并且判断了我们的箱子是否全部到终点了

如果是我们就直接调用我们的endCall方法进行回调

如果是最后一关我们就提升推箱子完毕了

调用流程

index.js

在index.js里面的initGs方法中我们构造了我们的场景对象并且我们把endCall函数给定义为一个递归循环

并且我们还调用了计时器对象的addFun方法来形成一个场景对象的自循环

概念说明:

场景对象是一个游戏的核心的东西 他处理了非常多的游戏需要的流程 这里我们处理的流程是渲染和判断结束流程

这是我们要做的目标

项目开源地址:

https://github.com/yinhui1129754/aitxz

游戏开发交流群:

859055710