结果图

首先创建canvas

浏览器不兼容

canvas>

body>

第一步：画二维数组地图

0表示平地 1表示墙 2表示小人 3表示箱子 4表示目标

var gameMap1=[

[1,1,1,1,1,1,1,1,1,1],

[1,1,1,0,0,0,0,4,1,1],

[1,1,1,1,0,0,1,1,1,1],

[1,4,0,0,0,0,0,0,0,1],

[1,0,0,0,1,2,0,0,0,1],

[1,0,0,0,1,0,0,0,0,1],

[1,0,0,0,1,0,3,0,0,1],

[1,0,0,0,3,3,0,0,0,1],

[1,0,0,0,0,4,0,0,0,1],

[1,1,1,1,1,1,1,1,1,1]

];

第二步：导入图片

var block=new Image();//0

block.src="img/block.gif";

var wall=new Image();//1

wall.src="img/wall.png";

var man=new Image();//2

man.src="img/down.png";

var box=new Image();//3

box.src="img/box.png";

var target=new Image();//4

target.src="img/ball.png";

var completedBox=new Image();//5

completedBox.src="img/comp_box.png";

第三步：初始化

window.οnlοad=function(){

canvas=document.getElementById("canvas");

ctx=canvas.getContext("2d");

/**

* 地图初始化

*/

gameMap=gameMap1;

initMap(gameMap);

}

/**

* 地图初始化

*/

function initMap(gameMap){

for(var i=0;ifor(var j=0;jvar pic = block;

switch(gameMap[i][j]){

case 0:

pic = block;

break;

case 1:

pic = wall;

break;

case 2:

manPosX=w*j;

manPosY=h*i;

pic = man;

break;

case 3:

pic = box;

break;

case 4:

pic = target;

break;

}

ctx.drawImage(pic,w*j,h*i,pic.width,pic.height);

}

}

}

第四步：添加键盘事件

//body绑定键盘事件

浏览器不兼容

canvas>

body>

实现doKeyDown(event)方法

/**

* 键盘事件处理

*@param {Object} e

*/

function doKeyDown(e){

console.info(e);

switch(e.keyCode){

case 37://left

go('left');

break;

case 38://up

go('up');

break;

case 39://right

go('right');

break;

case 40://down

go('down')

break;

}

}

第五步：实现对象移动

/**

* 移动对象

*@param {Object} obj

*@param {Object} originX

*@param {Object} originY

*@param {Object} newX

*@param {Object} newY

*/

function move(obj,originX,originY,newX,newY){

//画一个新的对象

ctx.drawImage(obj,newX,newY,w,h);

//原来位置的对象的删除

ctx.clearRect(originX,originY,w,h);

//在原来的位置画block对象

ctx.drawImage(block,originX,originY,block.width,block.height);

}

第六步实现上下左右移动

向下移动为例：

/**

* 向下移动

*/

function goDown(){

//原来位置暂存到tempX，tempY，为了删除原来位置的对象做好准备

var tempX=manPosX;

var tempY=manPosY;

//算出对象在二位数组中的位置i,j

var i=manPosY/h;

var j=manPosX/w;

//判断二位数组中的下一个位置能不能走，如果等于0表示能走

if(gameMap[i+1][j]==0){

man.src="img/down.png";

manPosY+=h;

move(man,tempX,tempY,manPosX,manPosY);

//人走到了下一个位置以后下一个位置的值为2原来的位置的值改成0

gameMap[i+1][j]=2;

gameMap[i][j]=0;

//如果人遇到了箱子，先移动箱子，移动箱子之前要判断箱子的下一个位置能不能走，如果能走把箱子移到下一个位置，人到箱子的位置

}else if(gameMap[i+1][j]==3){

var boxX=j*w;

var boxY=(i+1)*h;

if(gameMap[i+2][j]==0){

move(box,boxX,boxY,boxX,boxY+h);

man.src="img/down.png";

manPosY+=h;

move(man,tempX,tempY,manPosX,manPosY);

gameMap[i+1][j]=2;

gameMap[i+2][j]=3;

gameMap[i][j]=0;

//如果下一个位置是目标点箱子移到目标然后目标点的位置改成5

}else if(gameMap[i+2][j]==4){

move(completedBox,boxX,boxY,boxX,boxY+w);

man.src="img/down.png";

manPosY+=w;

move(man,tempX,tempY,manPosX,manPosY);

gameMap[i+2][j]=5;

gameMap[i+1][j]=2;

gameMap[i][j]=0;

}

}

}

向上，向左，向右同理。

第七步：判断胜利

/**

* 判断胜利

*/

function checkFinish(){

for(var i=0;ifor(var j=0;jif(gameMap[i][j]==3 || gameMap[i][j]==4){

return false;

}

}

}

return true;

}

源码下载：http://download.csdn.net/detail/qq_24082497/9579876