1. 加载图片资源封装
1.1. 加载图片资源封装为loadImages方法
1.2. 图片资源封装成对象
1.3. 加载图片资源的初始化方法
1.4. 计算加载图片的数量
1.5. 对加载成功图片计数
1.6. 加载图片对外提供回调方法, 可以计数图片加载进度
1.7. 加载图片完整代码
// 加载图片资源封装
function loadImages(){
// 图片资源封装成对象
var imageSrc = {
"block": "images/block.gif", // 砖块图片路径
"wall": "images/wall.png", // 墙图片路径
"box": "images/box.png", // 盒子图片路径
"ball": "images/ball.png", // 小球图片路径
"up": "images/up.png", // 人物向上的图片路径
"down": "images/down.png", // 人物向下的图片路径
"left": "images/left.png", // 人物向左的图片路径
"right": "images/right.png" // 人物向右的图片路径
};
var exports = {};
// 封装所有的Image对象
exports.images = {};
// 所有图片加载成功状态
exports.succeed = false;
// 加载图片资源的初始化方法
exports.init = function(callback){
var count = 0, imgCount = 0;
// 计算加载图片的数量
for (let key in imageSrc) {
imgCount++;
}
for(let key in imageSrc){
this.images[key] = new Image();
// 图片加载成功的回调方法
this.images[key].onload = function(){
// 对加载成功图片计数
count++;
if(count == imgCount){
exports.succeed = true;
}
// 加载图片对外提供回调方法, 可以计数图片加载进度
callback(count, imgCount);
};
this.images[key].src = imageSrc[key];
}
};
return exports;
}
1.8. 调用加载图片代码调试
1.9. 效果图
2. 关卡数据
2.1. 关卡数据16 * 16的矩阵
2.2. 获取画布和画笔
2.3. 矩阵元素的宽度和高度
2.4. 初始化场景方法
2.5. 图片加载成功后初始化场景
2.6. 效果图
2.7. 关卡数据0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
2.8. 元数据配置
2.9. 画墙、小球、箱子和人物
2.10. 效果图
3. 封装关卡数据
3.1. 新建mapdata.js文件
3.2. 拷贝关卡数据到mapdata.js文件中
3.3. 引入mapdata.js文件
3.4. 关卡地图配置数据
3.4.1. 关卡地图配置数据
3.4.2. 修改测试方法
3.4.3. 效果图
3.5. 完整代码
3.5.1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>推箱子</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
#game {
width: 560px;
margin: 0 auto;
}
#canvas {
background: #fff;
}
#msg {
color: #fff;
font-size: 16px;
height: 40px;
line-height: 40px;
background-color: #000;
}
#btn {
height: 50px;
line-height: 50px;
background-color: #FFF;
}
#btn input {
height: 30px;
width: 100px;
-webkit-appearance: button;
}
</style>
</head>
<body>
<div id="game">
<canvas id="canvas" width="560px" height="560px"></canvas>
<div id="msg">第1关, 移动次数: 0</div>
<div id="btn">
<input type="button" id="previous" value="上一关" />
<input type="button" id="next" value="下一关" />
<input type="button" id="replay" value="重玩本关" />
<input type="button" id="descript" value="游戏说明" />
</div>
</div>
<script type="text/javascript" src="mapdata.js"></script>
<script type="text/javascript">
// 加载图片资源封装
function loadImages(){
// 图片资源封装成对象
var imageSrc = {
"block": "images/block.gif", // 砖块图片路径
"wall": "images/wall.png", // 墙图片路径
"box": "images/box.png", // 盒子图片路径
"ball": "images/ball.png", // 小球图片路径
"up": "images/up.png", // 人物向上的图片路径
"down": "images/down.png", // 人物向下的图片路径
"left": "images/left.png", // 人物向左的图片路径
"right": "images/right.png" // 人物向右的图片路径
};
var exports = {};
// 封装所有的Image对象
exports.images = {};
// 所有图片加载成功状态
exports.succeed = false;
// 加载图片资源的初始化方法
exports.init = function(callback){
var count = 0, imgCount = 0;
// 计算加载图片的数量
for (let key in imageSrc) {
imgCount++;
}
for(let key in imageSrc){
this.images[key] = new Image();
// 图片加载成功的回调方法
this.images[key].onload = function(){
// 对加载成功图片计数
count++;
if(count == imgCount){
exports.succeed = true;
}
// 加载图片对外提供回调方法, 可以计数图片加载进度
callback(count, imgCount);
};
this.images[key].src = imageSrc[key];
}
};
return exports;
}
// 初始化场景方法
function initScene(level, images){
var block = images["block"];
for(let i = 0, ilen = level.length; i < ilen; i++){
for(let j = 0, jlen = level[i].length; j < jlen; j++){
let data = level[i][j];
let img = block;
switch(data){
case dataItem.wall:
img = images["wall"];
break;
case dataItem.ball:
img = images["ball"];
break;
case dataItem.box:
img = images["box"];
break;
case dataItem.down:
img = images["down"]; // 人物初始化使用向下的图片, 看起来是面向屏幕外
break;
}
// // 画砖块
ctx.drawImage(block, j * w, i * h, block.width, block.height);
// 画墙、小球、箱子和人物
if(level[i][j] != 0){
ctx.drawImage(img, j * w + (w - img.width) / 2, i * h + (h - img.height), img.width, img.height);
}
}
}
}
(function(global){
// 获取画布
global.can = document.getElementById('canvas');
// 获取画笔(实际上是CanvasRenderingContext2D对象)
global.ctx = global.can.getContext("2d");
global.w = 35, global.h = 35; // w矩阵元素的宽度, h矩阵元素的高度
// 0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
global.dataItem = {block: 0, wall: 1, ball: 2, box: 3, down: 4};
// 关卡数据16 * 16的矩阵
var levelBack1=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
// 0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
var levelBack2=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],
[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
var li = loadImages();
li.init(function(count, imgCount){
console.log(count / imgCount * 100 + '%');
// 图片加载成功后初始化场景
if(li.succeed){
initScene(levels[0], li.images);
}
});
})(window);
</script>
</body>
</html>
3.5.2. mapdata.js
// 0: 代表砖块; 1: 代表墙壁; 2: 代表小球; 3: 代表箱子; 4: 代表人物
var level=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],
[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
var levels=[]; // 关卡地图配置数据
levels[0]=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0],
[0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0],
[0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];