推箱子小游戏实现JS代码

//整个游戏地图数组
var maps
//当前游戏地图数组
var map
//当前关卡
var gindex=0;
//界面DIV
var game;
var temp="";
//定义游戏界面的宽和高
var ghight;
var gwidth;
//定义每个格子的宽高
var ihight;
var iwidth;
//定义英雄的坐标
var heroPoint=new Object();
//定义英雄下一个移动位置的坐标
var nextPoint=new Object();
//定义英雄下下一个移动位置的坐标
var nNextPoint=new Object();
//记录目的地
var items

//页面加载完后执行
function loadGame(){
	initMap()
	initGame()
}

function keyDown(){
	var code=window.event.keyCode;//监听键盘按下的是哪个键
	switch(code){
		case 38:	//上
			nextPoint.x=heroPoint.x;
			nextPoint.y=heroPoint.y-1;
			nNextPoint.x=heroPoint.x;
			nNextPoint.y=heroPoint.y-2;
			
		break;
		case 37:	//左
			nextPoint.x=heroPoint.x-1;
			nextPoint.y=heroPoint.y;
			nNextPoint.x=heroPoint.x-2;
			nNextPoint.y=heroPoint.y;
		break;
		case 40:	//下
			nextPoint.x=heroPoint.x;
			nextPoint.y=heroPoint.y+1;
			nNextPoint.x=heroPoint.x;
			nNextPoint.y=heroPoint.y+2;
		break;
		case 39:	//右
			nextPoint.x=heroPoint.x+1;
			nextPoint.y=heroPoint.y;
			nNextPoint.x=heroPoint.x+2;
			nNextPoint.y=heroPoint.y;
		break;
	}
	//英雄开始移动
	heroMove();
}
function heroMove() {
	
	var mvalue = map[nextPoint.y][nextPoint.x];
	var hero = document.getElementById(heroPoint.x + '' + heroPoint.y);
	var img = document.getElementById(nextPoint.x + '' + nextPoint.y);

	if(mvalue==2||mvalue==3) { //如果下一步碰到的是地面和目的地
		//更新界面
		hero.src = "img/2.png";
		img.src = "img/5.png";

		//地图数组更新
		map[heroPoint.y][heroPoint.x] = 2;
		map[nextPoint.y][nextPoint.x] = 5;
		//更新英雄的位置
		heroPoint.x = nextPoint.x;
		heroPoint.y = nextPoint.y;
	} else if(mvalue==4) { //如果下一步碰到的是箱子
		var mmvalue=map[nNextPoint.y][nNextPoint.x];
		if(mmvalue == 2 || mmvalue == 3) {
			var nimg=document.getElementById(nNextPoint.x+''+nNextPoint.y);
			hero.src= "img/2.png";
			img.src= "img/5.png";
			nimg.src="img/4.png";

			//地图数组更新
			map[heroPoint.y][heroPoint.x] = 2;
			map[nextPoint.y][nextPoint.x] = 5;
			map[nNextPoint.y][nNextPoint.x]=4;

			heroPoint.x = nextPoint.x;
			heroPoint.y = nextPoint.y;

		}
	}
	resetM();
}


function resetM(){
	var count=0;
	for (var i=0;i"
			//记忆英雄所在位置
			if(map[i][j]==5){
				heroPoint.x=j;
				heroPoint.y=i;
			}
			if(map[i][j]==3){
				var point=new Object();
				point.x=j;
				point.y=i;
				items[items.length]=point;
			}
		}
	}
	game.innerHTML = temp;
}

//初始信息
function initMap() {
	//初始化地图数组
maps = [
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 1, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 4, 2, 4, 3, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 3, 2, 4, 5, 1, 1, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 4, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 5, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 2, 4, 4, 1, 0, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 2, 4, 2, 1, 0, 1, 3, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 2, 1, 1, 1, 3, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 2, 2, 2, 2, 3, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 2, 2, 2, 1, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 2, 2, 2, 1, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 1, 1, 1, 0, 0, 0],
			[0, 0, 0, 1, 1, 4, 1, 1, 1, 2, 2, 2, 1, 0, 0, 0],
			[0, 0, 0, 1, 2, 5, 2, 4, 2, 2, 4, 2, 1, 0, 0, 0],
			[0, 0, 0, 1, 2, 3, 3, 1, 2, 4, 2, 1, 1, 0, 0, 0],
			[0, 0, 0, 1, 1, 3, 3, 1, 2, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 5, 4, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 4, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 2, 4, 2, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 3, 4, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 3, 3, 2, 3, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 5, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 2, 4, 2, 2, 1, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 2, 1, 2, 1, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 3, 1, 2, 1, 2, 2, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 3, 4, 2, 2, 1, 2, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 3, 2, 2, 2, 4, 2, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
			[0, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0],
			[0, 1, 2, 2, 2, 3, 1, 1, 1, 2, 1, 0, 0, 0, 0, 0],
			[0, 1, 2, 1, 2, 1, 2, 2, 2, 2, 1, 1, 0, 0, 0, 0],
			[0, 1, 2, 1, 2, 4, 2, 4, 1, 3, 2, 1, 0, 0, 0, 0],
			[0, 1, 2, 1, 2, 2, 2, 2, 2, 1, 2, 1, 0, 0, 0, 0],
			[0, 1, 2, 3, 1, 4, 2, 4, 2, 1, 2, 1, 0, 0, 0, 0],
			[0, 1, 1, 2, 2, 2, 2, 1, 2, 1, 2, 1, 1, 1, 0, 0],
			[0, 0, 1, 2, 1, 1, 1, 3, 2, 2, 2, 2, 5, 1, 0, 0],
			[0, 0, 1, 2, 2, 2, 2, 2, 1, 1, 2, 2, 2, 1, 0, 0],
			[0, 0, 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, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 1, 2, 5, 1, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 2, 2, 1, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 4, 2, 4, 2, 4, 2, 1, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 2, 4, 1, 1, 2, 2, 1, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 2, 4, 2, 1, 2, 1, 1, 0, 0],
			[0, 0, 0, 0, 1, 3, 3, 3, 3, 3, 2, 2, 1, 1, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 2, 2, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 3, 2, 4, 1, 1, 2, 1, 1, 0, 0, 0],
			[0, 0, 0, 1, 3, 3, 4, 2, 4, 2, 2, 5, 1, 0, 0, 0],
			[0, 0, 0, 1, 3, 3, 2, 4, 2, 4, 2, 1, 1, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 1, 1, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 2, 2, 1, 1, 2, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 2, 2, 2, 4, 2, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 4, 2, 1, 1, 1, 2, 4, 1, 0, 0, 0, 0],
			[0, 0, 0, 1, 2, 1, 3, 3, 3, 1, 2, 1, 0, 0, 0, 0],
			[0, 0, 1, 1, 2, 1, 3, 3, 3, 1, 2, 1, 1, 0, 0, 0],
			[0, 0, 1, 2, 4, 2, 2, 4, 2, 2, 4, 2, 1, 0, 0, 0],
			[0, 0, 1, 2, 2, 2, 2, 2, 1, 2, 5, 2, 1, 0, 0, 0],
			[0, 0, 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, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 4, 4, 4, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 5, 2, 4, 3, 3, 2, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 2, 4, 3, 3, 3, 1, 1, 0, 0, 0, 0],
			[0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		],
		[
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0],
			[0, 0, 1, 1, 2, 2, 1, 0, 0, 1, 2, 2, 2, 1, 0, 0],
			[0, 0, 1, 2, 4, 2, 1, 1, 1, 1, 4, 2, 2, 1, 0, 0],
			[0, 0, 1, 2, 2, 4, 3, 3, 3, 3, 2, 4, 2, 1, 0, 0],
			[0, 0, 1, 1, 2, 2, 2, 2, 1, 2, 5, 2, 1, 1, 0, 0],
			[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		]
	];
		//获取地图DIV
		game = document.getElementById('game');
		//初始化地图的宽高       parseInt()函数可解析一个字符串，并返回一个整数
		gheight = parseInt(game.style.height);
		gwidth = parseInt(game.style.width);
		//初始化游戏格子的宽高
		iheight = gheight / maps[0].length;
		iwidth = gwidth / maps[0][0].length;
	}