简介
以前闲的无聊就喜欢写一写H5小游戏，前几天整理了一下这个推箱子的代码，就放到了git仓库里，欢迎大家玩耍。
玩玩试试
代码仓库
主要逻辑
- 整个界面就是一个canvas,首先读取level.js文件获得地图信息，并据此在画布中画出地图信息。其中每一关地图信息是这样的。 1 代表围墙，2代表灰太狼，4代表小绵羊，8代表笼子。
"map":[[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 8, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1 ], [ 1, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 2, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1 ], [ 1, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 8, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 ], [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]] 复制代码
var data = datas.myarray; // datas是定义在level.js中的地图信息数据
var wi,wj; // 灰太狼位置
var score = 0; // 当前分数
var level = 1; // 当前关卡
var cage_num = 0; // 箱子总数
var c = document.getElementById("c");// 获取canvas标签
var ctx = c.getContext('2d');
var tree = new Image();
gameinit();
function gameinit() {
tree.src = "img/tree.png";
tree.onload = function () {
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[i].length; j++) {
//画树、
if (map[i][j] == 1) {
ctx.drawImage(tree, j * 50, i * 50, 50, 50);
}
}
}
}
//... 其他元素绘制同理，需要注意的是在绘制灰太狼的同时，需要保存灰太狼的位置信息，绘制笼子的同时，记录笼子的总数和（用于判断是否过关）。
}
复制代码- 监听键盘WASD和上下左右点击事件，会重新绘制画布。
window.onkeydown = function () {
var keycode = event.keyCode;
// 通关关卡后会出现提示标语，这时再次按键会绘制新地图。
if (score >= cage_num) {
level++;
score = 0;
cage_num = 0;
ctx.clearRect(0, 0, 800, 600);
map = data[level].map;
gameinit();
} else {
switch (keycode) {
case 38://按键：上
case 87://按键：w
wolf.src = "img/wolf-sm.png";
if (map[wi - 1][wj] == 0) { // 向上走， 上边是草地
ctx.clearRect(wj * 50, wi * 50, 50, 50);
ctx.drawImage(wolf, wj * 50, wi * 50 - 50, 50, 50);
map[wi][wj] = 0;
map[wi - 1][wj] = 2;
wi = wi - 1;
} else if (map[wi - 1][wj] == 4 && map[wi - 2][wj] == 0) { // 向上走， 上边是羊，羊上面是草地。
//羊往上走
ctx.clearRect(wj * 50, wi * 50 - 50, 50, 50);
ctx.drawImage(sheep, wj * 50, wi * 50 - 100, 50, 50);
//狼往上走
ctx.clearRect(wj * 50, wi * 50, 50, 50);
ctx.drawImage(wolf, wj * 50, wi * 50 - 50, 50, 50);
//变更数组
map[wi][wj] = 0;
map[wi - 1][wj] = 2;
map[wi - 2][wj] = 4;
wi = wi - 1;
} else if (map[wi - 1][wj] == 4 && map[wi - 2][wj] == 8) { // 向上走， 上边是羊，羊上面是空笼子。
//羊往上走
ctx.clearRect(wj * 50, wi * 50 - 50, 50, 50);
ctx.drawImage(sheep, wj * 50, wi * 50 - 100, 50, 50);
//狼往上走
ctx.clearRect(wj * 50, wi * 50, 50, 50);
ctx.drawImage(wolf, wj * 50, wi * 50 - 50, 50, 50);
//变更数组
map[wi][wj] = 0;
map[wi - 1][wj] = 2;
map[wi - 2][wj] = 12;
wi = wi - 1;
score++;
} else {
// 走不动， 重新绘制（必须存在，否则在墙角等地方会有bug，尝试便知）
ctx.clearRect(wj * 50, wi * 50, 50, 50);
ctx.drawImage(wolf, wj * 50, wi * 50, 50, 50);
}
break;
// 其他按键同理
}
}
// 判断是否通关，给出通关标语。
if (score >= cage_num && cage_num != 0) {
ctx.font = "bolder 50px Arial";
ctx.fillStyle = "red";
ctx.fillText("YOU WIN!!!", 200, 200);
ctx.fillText("NEXT,GO!!!", 200, 300);
}
复制代码