HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gamebox</title>
<link rel="stylesheet" type="text/css" href="css/666.css"/>
<script type="text/javascript" src="js/123.js" charset="utf-8"></script>
</head>
<body onload="Show();">
<div id="main" style="margin: 50px auto; border: solid 1px red; width: 320px; height: 320px; ">
</div>
</body>
</html>
CSS：
*{
margin: 0px;
padding: 0px;
}
.bg{
margin: 0px;
width: 32px;
height: 32px;
background-image: url(../img/01.jpg);
float: left;
}
.box{
margin: 0px;
width: 32px;
height: 32px;
background-image: url(../img/05.jpg);
float: left;
}
.box1{
margin: 0px;
width: 32px;
height: 32px;
background-image: url(../img/06.jpg);
float: left;
}
.wall{
margin: 0px;
width: 32px;
height: 32px;
background-image: url(../img/03.jpg);
float: left;
}
.goal{
margin: 0px;
width: 32px;
height: 32px;
background-image: url(../img/02.jpg);
float: left;
}
.role{
margin: 0px;
width: 32px;
height: 32px;
background-image: url(../img/04.jpg);
float: left;
}
js:
var maxX = 10;
var maxY = 10;
var mapAry =[//地图状态数组 0:墙 1:路 2:目标
[1,1,0,0,0,0,0,0,1,1],
[0,0,0,1,1,2,1,0,0,0],
[0,1,1,2,1,1,1,1,1,0],
[0,1,0,1,0,2,1,0,1,0],
[0,1,1,2,1,2,1,0,1,0],
[0,0,0,1,1,1,1,1,1,0],
[1,1,0,1,1,2,0,0,0,0],
[1,1,0,1,1,1,0,1,1,1],
[1,1,0,1,1,1,0,1,1,1],
[1,1,0,0,0,0,0,1,1,1]
];
var imgAry = new Array();//pic array
var role = new Point(4,2);//role zuobaio
var boxs = [new Point(2,2),new Point(2,4),new Point(2,5),new Point(2,6)
,new Point(6,4),new Point(5,5)];
// define role zuobiao
function Point(x,y)
{
this.x = x;
this.y = y;
}
//create single div
function CreateDiv(obj,css)
{
var d = document.createElement(obj);
d.className = css;
document.getElementById("main").appendChild(d);
return d;
}
// 初始化界面
function Show()
{
//显示地图
for(var i = 0;i < maxX;i++)
{
imgAry[i] = new Array();
for(var j = 0 ; j < maxY ;j++)
{
if(mapAry[i][j] == 0)
{
imgAry[i][j] = CreateDiv("div","wall");
}else if(mapAry[i][j] == 1)
{
imgAry[i][j] = CreateDiv("div","bg");
}else if(mapAry[i][j] == 2)
{
imgAry[i][j] = CreateDiv("div","goal");
}
}
}
//显示角色
imgAry[role.x][role.y].className = "role";
//显示箱子
for(var i = 0 ; i < boxs.length;i++)
{
imgAry[boxs[i].x][boxs[i].y].className = "box";
}
}
//角色移动
function RoleMove(k)
{
var p = new Point(role.x,role.y);//保存角色移动前坐标
if(k == 37) //向左
{
role.y--;
}else if(k == 38)//向上
{
role.x--;
}
else if(k == 39)//向右
{
role.y++;
}
else if(k == 40)//向下
{
role.x++;
}
//还原角色所在的背景
if(mapAry[role.x][role.y] == 0) //如果是墙
{
role = p ;
} else
{
//还原背景
if(mapAry[p.x][p.y] == 1){
imgAry[p.x][p.y].className ="bg";
}else if(mapAry[p.x][p.y] == 2)
{
imgAry[p.x][p.y].className ="goal";
}
//判断是否推到箱子
for(var i = 0 ; i < boxs.length; i++)
{
if(role.x == boxs[i].x && role.y == boxs[i].y)
{
if(BoxMove(role ,k) == false)
{
role = p;
}
break;
}
}
}
//显示角色
imgAry[role.x][role.y].className = "role";
}
function BoxMove(p,k)
{
var b1 = true; //箱子是否可以移动
var tmpP;
if(k == 37)
{
tmpP = new Point(p.x,p.y-1);
} else if(k == 38)
{
tmpP = new Point(p.x - 1,p.y);
}else if(k == 39)
{
tmpP = new Point(p.x,p.y + 1 );
}else if(k == 40)
{
tmpP = new Point(p.x + 1,p.y);
}
//判断当前坐标是否是墙
if(mapAry[tmpP.x][tmpP.y] == 0)
{
b1= false;
}
//判断当前坐标是否有箱子
for(var i = 0 ; i < boxs.length;i++)
{
if(tmpP.x == boxs[i].x && tmpP.y ==boxs[i].y )
{
b1 = false;
break;
}
}
if(b1 == true)
{
for(var i = 0 ; i < boxs.length;i++)
{
if(boxs[i].x == p.x && boxs[i].y == p.y)
{
boxs[i] = tmpP;
break;
}
}
imgAry[tmpP.x][tmpP.y].className ="box";
if(mapAry[tmpP.x][tmpP.y] == 2)
{
imgAry[tmpP.x][tmpP.y].className ="box1";
}
}
return b1;
}
//获取键盘控制
function Move()
{
var k = event.keyCode;
var count = 0;
RoleMove(k);
for(var i = 0; i < boxs.length;i++)
{
if(mapAry[boxs[i].x][boxs[i].y] == 2)
{
count++;
}
}
if(count == 6)
{
alert("恭喜过关，游戏结束!!!")
}
}
document.onkeydown = Move;
img图片:
成品：
键盘上下左右键控制方向。