您的位置：首页 > Web前端 > HTML5

HTML5推箱子实现

2016-07-19 10:16 603 查看

结果图

首先创建canvas

<body>
<canvas id="canvas" width="400" height="400">
浏览器不兼容
</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.onload=function(){

canvas=document.getElementById("canvas");
ctx=canvas.getContext("2d");
/**
* 地图初始化
*/
gameMap=gameMap1;
initMap(gameMap);
}
/**
* 地图初始化
*/
function initMap(gameMap){
for(var i=0;i<gameMap.length;i++){
for(var j=0;j<gameMap[i].length;j++){
var 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绑定键盘事件
<body onkeydown="doKeyDown(event)">
<canvas id="canvas" width="400" height="400" >
浏览器不兼容
</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;i<gameMap.length;i++){
for(var j=0;j<gameMap[i].length;j++){
if(gameMap[i][j]==3 || gameMap[i][j]==4){
return false;
}
}
}
return true;
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航