JavaScript推箱子游戏--688IT编程网

JavaScript推箱⼦游戏推箱⼦游戏的逻辑⾮常简单，但是如果不动⼿的话，还是不太清楚。我在这⾥讲⼀下⾃⼰的思路。制作推箱⼦，⾸先要有⾃⼰的设计素材。如下我也是⽹上的素材

第⼆步，理清游戏的规则。

游戏规则：

1.⼩⼈将箱⼦分别推到球上，等每个箱⼦都覆盖到球上，则完成游戏。

2.⼩⼈不能推树，不能推两个箱⼦⼀起

3.⼩⼈可以踩球

第三步，简单的理清游戏规则后，就开始选⽤技术。⾸先肯定是JavaScript，然后选⽤canvas。

最后，我们开始制作游戏。

制作游戏其实也是⼀步步来。做事不能太急。要分成阶段性来完成，就很⽅便。

具体代码如下。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

can't see this

</canvas>

var canvas = ElementById('canvas');

var ctx = Context('2d');

var dWidth = 35,

dHeight = 35;

var iCurLevel = 0; //当前关卡+1

var steps = 0; // 移动步数

var currenMap = [],

userMap = [];

var msg = ElementById('msg');

var block = ElementById('block');

var wall = ElementById('wall');

var box = ElementById('box');

var down = ElementById('down');

var left = ElementById('left');

var right = ElementById('right');

var up = ElementById('up');

var ball = ElementById('ball');

var curMan = down; //⼩⼈⾯向

// 复制⼆维数组

function copyArray(arr) {

var newArr = [];

for (var i = 0; i < arr.length; i++) {

newArr[i] = arr[i].concat();

}

return newArr;

}

// 初始化

function init() {

currenMap = copyArray(levels[iCurLevel]) // 当前原样地图

userMap = copyArray(levels[iCurLevel]) // 当前使⽤地图

steps = 0; // 初始化步数

curMan = down; // 初始化⼩⼈⾯朝下

msg.innerHTML = "当前第：" + (iCurLevel + 1) + "关，移动步数：" + steps; drawBlock() // 画草地

drawMap(currenMap) // 画关卡地图

}

// 画草地

function drawBlock() {

for (var i = 0; i < 16; i++) {

for (var j = 0; j < 16; j++) {

ctx.drawImage(block, i * dWidth, j * dHeight, dWidth, dHeight);

}

// 画⼩⼈位置

function Point(x, y) {

this.x = x;

this.y = y;

}

var per_position = new Point(5, 5);

// 画关卡地图

function drawMap(level) {

for (var i = 0; i < level.length; i++) {

for (var j = 0; j < level[i].length; j++) {

var pic = block;

switch (level[i][j]) {

case 0:

pic = block;

break;

case 1:

pic = wall;

break;

case 2:

pic = ball;

break;

case 3:

pic = box;

break;

case 4:

pic = curMan;

per_position.x = i;

break;

case 5:

pic = box;

break;

}

ctx.drawImage(pic, j * dWidth - (pic.width - dWidth) / 2, i * dHeight - (pic.height - dHeight), pic.width, pic.height); }

}

// 切换关卡

function level(next) {

iCurLevel += next

if (iCurLevel < 0) {

alert('当前第⼀关');

return;

}

if (iCurLevel > levels.length - 1) {

alert('当前最后⼀关');

return;

}

init();

}

// 绑定键盘 up down left right

var keyCode = event.keyCode;

var p1 = {

x: 0,

y: 0

}

var p2 = {

x: 0,

y: 0

}

javascript游戏引擎switch (keyCode) {

case 38:

curMan = up;

p1.x = per_position.x - 1;

p1.y = per_position.y;

p2.x = per_position.x - 2;

p2.y = per_position.y;

break;

case 39:

curMan = right;

p1.x = per_position.x;

p1.y = per_position.y + 1;

p2.x = per_position.x;

p2.y = per_position.y + 2;

break;

case 40:

curMan = down;

p1.x = per_position.x + 1;

p1.y = per_position.y;

p2.x = per_position.x + 2;

p2.y = per_position.y;

break;

case 37:

curMan = left;

p1.x = per_position.x;

p1.y = per_position.y - 1;

p2.x = per_position.x;

p2.y = per_position.y - 2;

break;

}

// 墙1，盒⼦3和墙1，盒⼦3和盒⼦3，盒⼦3和陷阱5，陷阱5和盒⼦3，陷阱5和墙1 都不能移动！

if (userMap[p1.x][p1.y] == 1) {

return false;

}

if (userMap[p1.x][p1.y] == 3 && (userMap[p2.x][p2.y] == 1 || userMap[p2.x][p2.y] == 3 || userMap[p2.x][p2.y] == 5)) { return false;

}

if (userMap[p1.x][p1.y] == 5 && (userMap[p2.x][p2.y] == 1 || userMap[p2.x][p2.y] == 3 || userMap[p2.x][p2.y] == 5)) { return false;

}

// 草地0 可以移动

if (userMap[p1.x][p1.y] == 0) {