HTML5-原生js智能推箱子-2.渲染对象sprite.js

开发环境:

支持html5的浏览器

语言:javascript脚本语言

渲染引擎:canvas

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

项目目录截图:

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

index.html入口html文件

sprite对象

我们的sprite对象是通过继承block对象来的 通过改变this指向来获得属性

下面我们看block对象的构造函数(这个对象只有四个属性width,height,x,y):

sprite.js

很简单的四个属性width,height,x,y 宽度，高度，x轴位置，y轴位置

下面我们看sprite构造函数的属性:

sprite.js

在构造函数里面我们下通过js的特性函数call来改变this指向 继承bock所拥有的四个属性

img:然后我们将img(这里的img可以是img标签也可以是new Image或者canvas的对象)赋值给我们的this对象

g_x:这个属性是用来储存精灵的全局坐标系的位置

g_y:这个属性是用来储存精灵的全局坐标系的位置

children:这个属性是用来储存我们的子精灵对象的数组 我们的子精灵在渲染的时候x和y会和我们的this 的x，y相关联从而构成一个初级的局部坐标系和全局坐标系

parent:默认为null 储存当前精灵对象的父精灵对象

srcBlock:这个属性是用来储存在渲染的时候我们在图片上的绘制区域

然后我们调用了我们的精灵对象的初始化x和y坐标位置的方法

下面我们看精灵对象的方法:

sprite.js

我们储存精灵对象的方法还是用的js的特性prototype(原型链)

下面我们看render:

sprite.js

可以看到我们渲染需要一个ctx的对象(这个对象其实是canvas节点对象通过getContent("2d")获取的上下文对象)

这里我们先判断我们的精灵对象又没有img属性如果没有我们就调用我们的子精灵对象的渲染方法

如果有我们就判断srcBock属性是否是定义了的

如果没有定义我们就直接默认的渲染整个img宽度与高度的图片

如果有我们就通过srcBlock的区域信息来裁剪图片进行渲染

下面我们看setX:

sprite.js

在setX方法里面我们定义了我们的精灵对象的全局坐标系的位置并且递归初始化我们子精灵对象的x轴位置

setY方法和setX基本一样的

sprite.js

下面我们看initX:

sprite.js

这里我们修改我们的对象的全局坐标系的x轴位置

下面我们看addChild方法:

sprite.js

在新增子精灵对象的方法里面我们设置了子精灵对象的父精灵对象并且初始化了子精灵对象的x和y然后我们将子精灵对象放到我们的精灵对象的数组里面

精灵对象在这里面我主要作用:

精灵对象的主要作用其实是呈现界面用的根据我们的递归渲染的原理

我们可以设置一个最大的精灵对象，然后在这个最大的精灵对象里面放我们的砖块或者我们的箱子或者我们的结束点

(ps:这里我们可以把精灵递归渲染想象为一颗树，一个有根节点的树，后面的寻路也是用的这种原理)

调用流程:

我们在场景对象screen.js里面

screen.js

在这里我们通过地图数据(data.js)里面的信息初始化了我们的精灵并且将精灵给放置在我们的最大精灵对象里面

后面我们会详细的说场景对象(screen.js)和data.js的(请各位看官不要着急)

这是我们要做的目标

项目开源地址:

https://github.com/yinhui1129754/aitxz

游戏开发交流群:

859055710