HTML5-原生js智能推箱子-5.资源加载对象source.js

开发环境:

支持html5的浏览器

语言:javascript脚本语言

渲染引擎:canvas

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

项目目录截图:

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

index.html入口html文件

source对象属性说明:

source.js

sourceArr 储存img对象的数组

nameArr 储存加载地址的数组

source对象的方法说明:

source.js

getSource

source.js

这个方法的第一个参数是要加载资源的地址

第二个参数是加载完成的回调函数

第三个参数是加载错误的回调函数

在这个方法里面我们先判断我们的加载资源是否在缓存数组中如果在我们直接返回

如果没有在我们就采用newImage的形式加载图片资源如果我们的img是已经加载完成的我们就直接返回如果没有那么我们就添加onload事件来表示加载的是否成功

load

source.js

这里我们主动加载一个数组的资源 我们循环遍历调用当前实例对象的getSource方法来加载资源 如果我们加载完成了我们就调用我们的加载完成回调函数

调用流程:

index.js

在index.js的initGs方法里面我们定义了一个sourceEx的遍历来加载资源

我们加载资源的数组是在data.js里面定义的

data.js

当我们把这些资源加载完成我们就调用场景对象的各种初始化方法

基本原理

资源加载对象是游戏中常见的一个对象 这里我们的功能有点少 在大游戏中资源加载对象应该还有声音 进度加载(其实就是一个文件的读取) 而我们这里的游戏开发只有一个图片加载

这是我们要做的目标

项目开源地址:

https://github.com/yinhui1129754/aitxz

游戏开发交流群:

859055710