天天看點

原生js實作推箱子代碼 和 思路

一 思路

1.擷取img圖檔

2.建立map-10x10(必須将兩個個圖創好)(友善建構對象來使用)

建立map的時候要傳回人物的對象

插入元素的時候将地圖利用成二維數組

并将人物的位置封裝成對象

copy節點 直接創造節點 或者聲明創造節點的函數()//第一種占記憶體 第二種占運存

*添加任務旋轉的時候回在map函數中加對象

3.擷取鍵盤上的值

将鍵盤上的值封裝起來轉換成一個方向 ,再通過方向判斷人物和盒子的去留

在調用函數前面

4.分析推箱子的步驟

大體如下幾步:

1.人推空白

2.人進終點

3.人出終點

4.人在空白推箱子,箱子進空白;

5.人在空白推箱子,箱子進終點;

6.人在終點推箱子,箱子在終點進空白;

7.人在終點推箱子,箱子在空白進空白;

8.人在終點推箱子,箱子在終點推終點;

9.人在空白推箱子,箱子在空白推終點

(此方法不用判斷是否撞牆);

5.設定定時器 檢測事件随機事件的觸發(箱子全部在終點)

定時器進行跳關

和通關事件;

6.添加滑鼠點選的按鈕功能

1.擷取元素

2.綁定事件

3.給每個元素弄方向

4.調用函數(将move函數放進去);

7.添加跳關功能

1.擷取元素

2.綁定事件

3.進行調用函數(将deepclone的初始數組copy進去);

8.添加上一步功能

1.擷取元素

2.綁定事件

3.進行調用函數(将deepclone的上一步函數放到move前,并在執行此函數的時候調用函數)

*封裝功能可以友善後面的代碼和功能的實作

html 代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>推箱子</title>
		<link rel="stylesheet" href="css/tuixiangzi.css" target="_blank" rel="external nofollow"  />
		<script src="js/mapxinxi.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--居中-->
		<div class="center">
			<!--地圖子產品-->
			<div class="map">
			</div>
			<!--控制子產品-->
			<div class="control">
				<div>
					請選擇第<input type="text"  class="select" style="width: 100px;">關 <input type="button" id="btns" value="确定" />
				</div>
				<div class="fangxiang">
					<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="" class="touming"/></a>
					<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="cf"><img src="img/up.png" ></a><!--上-->
					<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  ><img src="" class="touming"/></a>
					<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="cf"><img src="img/left.png"></a><!--下-->
					<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="cf"><img src="img/down.png"></a><!--左-->
					<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="cf"><img src="img/right.png"></a><!--右-->
				</div>
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="replay"><img src="img/replay.png"></a><!--重來-->
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="prevstep"><img src="img/backStep.png"/></a><!--上一步-->
			</div>
			<!--通關成功子產品-->
		</div>
		<script src="js/map.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/other.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
           

css樣式

*{
	margin: 0px;
	padding: 0px;
}
body{
	background-color: rgba(180,180,180,0.5);
}
ul,li{
	list-style: none;
}
a{
	text-align: center;
}
.center{
	width: 800px;
	height: 520px;
	margin: 30px auto;
	background-color: blue;
	position: relative;
}
.map{
	width: 500px;
	height: 500px;
	background-image: url(../img/ground.png);
	left: 0;
	top: 0;
	border: 10px solid black;
}
/*地圖子產品結束*/

.control{
	position: absolute;
	width: 280px;
	height: 520px;
	background-color: mistyrose;
	left: 520px;
	top: 0px;
}
.control .fangxiang{
	width: 100%;
	height: 180px;
	margin-top: 100px;
}
#up{
	display: block;
	width: 100%;
	height: 80px;
}
.control img{
	/*margin: -1px;*/
	width: 80px;
	height: 80px;
	border: none;
	/*opacity: 0;*/
}
.touming{
	opacity: 0;
}
.up{
	transform:rotate(90deg);
}
.right{
	transform: rotateY(180deg);
}
.down{
	transform: rotate(-90deg);
}

           

地圖js資訊子產品

var mapobj={
	map0:[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,3,3,3,3,3,0,0],
	[0,3,3,3,0,0,0,0,3,0],
	[3,3,1,0,4,3,3,0,3,3],
	[3,1,1,4,0,4,0,0,5,3],
	[3,1,1,0,4,0,4,0,3,3],
	[3,3,3,3,3,3,0,0,3,0],
	[0,0,0,0,0,3,3,3,3,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
],
	map1:[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,3,3,3,0,0,0,0],
	[0,0,0,3,1,3,0,0,0,0],
	[0,0,0,3,0,3,3,3,3,0],
	[0,3,3,3,4,0,4,1,3,0],
	[0,3,1,0,4,5,3,3,3,0],
	[0,3,3,3,3,4,3,0,0,0],
	[0,0,0,0,3,1,3,0,0,0],
	[0,0,0,0,3,3,3,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
],
	map2:[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,3,3,3,3,3,3,3,0],
	[0,0,3,0,0,1,1,14,3,0],
	[0,0,3,0,0,0,3,3,3,3],
	[0,3,3,3,0,0,0,0,0,3],
	[0,3,0,0,0,3,4,3,0,3],
	[0,3,0,5,4,3,0,0,0,3],
	[0,3,0,0,0,3,3,3,3,3],
	[0,3,3,3,3,3,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
	],
	map3:[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,3,3,3,3,0,0],
	[0,0,3,3,3,0,5,3,0,0],
	[0,0,3,0,0,4,0,3,0,0],
	[0,3,3,0,3,0,3,3,3,0],
	[0,3,0,0,3,0,3,1,3,0],
	[0,3,0,3,0,0,4,1,3,0],
	[0,3,0,4,0,0,0,1,3,0],
	[0,3,3,3,3,3,3,3,3,0],
	[0,0,0,0,0,0,0,0,0,0]
	],
	map4:[
	[0,0,3,3,3,3,0,0,0,0],
	[0,0,0,3,0,0,3,3,3,0],
	[0,0,3,3,0,4,0,0,3,0],
	[0,0,3,0,0,0,4,0,3,0],
	[0,0,3,0,3,0,0,0,3,0],
	[0,0,3,0,3,4,14,14,3,0],
	[0,0,3,0,3,0,1,1,3,0],
	[0,0,3,0,4,5,1,1,3,0],
	[0,0,3,3,3,3,3,3,3,0],
	[0,0,0,0,0,0,0,0,0,0]
	]
}
           

建立地圖子產品

//地圖資料    0代表不可到達的路徑   1代表要被推到的地方 2代表普通路徑 3代表牆  4箱子,5人物,  14終點被推到的地方   15人和被推到的地方重疊
var dir=null;
var prevstep1=document.getElementsByClassName("prevstep")[0];
var fangxiang=document.getElementsByClassName("cf");//擷取方向鍵
var replay=document.getElementsByClassName("replay")[0];//擷取重新整理鍵
var allMap=Object.getOwnPropertyNames(mapobj);//擷取所有地圖的key值或者索引值;
var btns=document.getElementById("btns");
var startIndex=0;//定義地圖的初始下标位置
var map1=mapobj.map0;//初始地圖
var maxMap=document.getElementsByClassName("map")[0];//擷取地圖的div
var mand=creatMap(map1);//将人物的位置從地圖中拿出來
var jumNum=0;
var abjcopy={};//初始數組資料
var prevstep={};//上一步的數組
jumpG();
deepClone(mapobj,abjcopy);
var allMap2=Object.getOwnPropertyNames(abjcopy);//擷取地圖二的索引
//console.log(abjcopy);
function jumpG(){
//	console.log(allMap);//Array(5) [ "map1", "map2", "map3", "map4", "map5" ]
    var num=0; 
	for (var i=0;i<map1.length;i++) {
		for (var j=0;j<map1[i].length;j++) {
			if (map1[i][j]==1) {
				num++;
			}
			if (map1[i][j]==4) {
				num++;
			}
		}
	}
		if (num==0) {
			console.log(num);
			map1=mapobj[allMap[++startIndex]]
			if(startIndex>allMap.length){
				alert("通關成功");
			}
			mand=creatMap(map1);
			console.log(map1);
		}
		
		
		var time=setTimeout('jumpG()',500);
}
function creatMap(map1){
	   maxMap.innerHTML="";//清空地圖    
	//console.log(qiang);//<img src="img/wall.png" style="width: 50px; height: 50px; position: absolute;">
	var box=document.createElement("img");
		box.src="img/box.png";
		box.style.width=50+"px";
		box.style.height=50+"px";
		box.style.position="absolute";//建立箱子
	var man=document.createElement("img");
		man.src="img/man.png";
		man.style.width=50+"px";
		man.style.height=50+"px";
		man.style.position="absolute";
			if(dir=="up"){
		man.setAttribute("class","up");
//		mand.className="up";
	}else if(dir=="right")
	{
		man.className="right";
	}
	else if (dir=="down") {
		man.className="down";
	}
	else{
		man.className=""
	}
	var fx=document.createElement("img");
		fx.src="img/boxArrival.png";
		fx.style.width=50+"px";
		fx.style.height=50+"px";
		fx.style.position="absolute";	
	var fr=document.createElement("img");
		fr.src="img/mandian.png";
		fr.style.width=50+"px";
		fr.style.height=50+"px";
		fr.style.position="absolute";
	for(var i=0;i<map1.length;i++){
//		console.log(map1[i]);//Array(10) [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
		for(var j=0;j<map1[i].length;j++){
//			console.log(map1[i][j]);//每行的資料
				switch (map1[i][j]){
					case 1:	var finall=document.createElement("img");
								finall.src="img/terminal.png";
								finall.style.width=50+"px";
								finall.style.height=50+"px";
								finall.style.position="absolute";//建立終點
								finall.style.left=j*50+10+"px";
								finall.style.top=i*50+10+"px";
								maxMap.appendChild(finall);
						break;
					case 2:
						break;
					case 3:var qiang=document.createElement("img");
							qiang.src="img/wall.png"
							qiang.style.width=50+"px";
							qiang.style.height=50+"px";
							qiang.style.position="absolute";//建立牆					
							qiang.style.left=j*50+10+"px";
							qiang.style.top=i*50+10+"px";
							maxMap.appendChild(qiang);
						break;
					case 4:var s=box.cloneNode();					
							s.style.left=j*50+10+"px";
							s.style.top=i*50+10+"px";
							maxMap.appendChild(s);
						break;
					case 5:	
							man.style.left=j*50+10+"px";
							man.style.top=i*50+10+"px";
							maxMap.appendChild(man);//需要用來傳回位置
							man.addr={//将位置對象設定為man的屬性
								y:i,
								x:j
							}
						break;
					case 14:var s=fx.cloneNode();					
							s.style.left=j*50+10+"px";
							s.style.top=i*50+10+"px";
							maxMap.appendChild(s);
						break;
					case 15:var s=fr.cloneNode();					
							s.style.left=j*50+10+"px";
							s.style.top=i*50+10+"px";
							maxMap.appendChild(s);
						break;
					default:
						break;
				}
		}
	}
	return man;
}


function deepClone(a, b) {  //deepcopy複制數組  
  var obj = b || {};    
  for (var i in a) {        
    if (typeof a[i] === 'object') {
      obj[i] = (a[i].constructor === Array) ? [] : {}; //判斷是不是數組         
      arguments.callee(a[i], obj[i]);//執行遞歸
    } else {
      obj[i] = a[i];
    }
  }    
  return obj;
}
//function(){
//	
//}

           

人物移動子產品

function move(keycode){
	switch (keycode){
		case 37:dir="left";
			break;
		case 38:dir="up";
			break;
		case 39:dir="right";
			break;
		case 40:dir="down";
			break;
		default:
			break;
	}
	deepClone(mapobj,prevstep);//上一步的數組
	finalBox(dir,mand,mand.addr);
	moveBox(dir,mand,mand.addr);
	moveNull(dir,mand,mand.addr);
	movefinal(dir,mand,mand.addr);
}
function moveNull(code1,man,addr){//參數分别為 code 人物對象 和位置
//	console.log(code1);//三個形參都能傳進來
	switch(code1){
		case 'left': 
		if (map1[addr.y][addr.x-1]==0&&map1[addr.y][addr.x]==5){
					 man.addr={
						y:addr.y,
						x:addr.x-1
					}
					map1[addr.y][addr.x]=0;
					map1[addr.y][addr.x-1]=5;
				
		}	
		if (map1[addr.y][addr.x-1]==0&&map1[addr.y][addr.x]==15) {
			man.addr={
						y:addr.y,
						x:addr.x-1
					}
					map1[addr.y][addr.x]=1;
					map1[addr.y][addr.x-1]=5;
		}
		creatMap(map1);
		break ;
		case 'up':
		if (map1[addr.y-1][addr.x]==0&&map1[addr.y][addr.x]==5) {
					man.addr={
						y:addr.y-1,
						x:addr.x
					}
					map1[addr.y][addr.x]=0;
					map1[addr.y-1][addr.x]=5;
					creatMap(map1);
		}	
		if (map1[addr.y-1][addr.x]==0&&map1[addr.y][addr.x]==15) {
					man.addr={
						y:addr.y-1,
						x:addr.x
					}
					map1[addr.y][addr.x]=1;
					map1[addr.y-1][addr.x]=5;
					creatMap(map1);
		}	
		break;
		case 'right':
		if (map1[addr.y][addr.x+1]==0&&map1[addr.y][addr.x]==5) {
					man.addr={
						y:addr.y,
						x:addr.x+1
					}
					map1[addr.y][addr.x]=0;
					map1[addr.y][addr.x+1]=5;
					creatMap(map1);
		}
		if (map1[addr.y][addr.x+1]==0&&map1[addr.y][addr.x]==15) {
					man.addr={
						y:addr.y,
						x:addr.x+1
					}
					map1[addr.y][addr.x]=1;
					map1[addr.y][addr.x+1]=5;
					creatMap(map1);
		}
		
		break;
		case 'down' :
		if (map1[addr.y+1][addr.x]==0&&map1[addr.y][addr.x]==5) {
					man.addr={
						y:addr.y+1,
						x:addr.x
					}
					map1[addr.y][addr.x]=0;
					map1[addr.y+1][addr.x]=5;
					creatMap(map1);
		}
		if (map1[addr.y+1][addr.x]==0&&map1[addr.y][addr.x]==15) {
					man.addr={
						y:addr.y+1,
						x:addr.x
					}
					map1[addr.y][addr.x]=1;
					map1[addr.y+1][addr.x]=5;
					creatMap(map1);
		}	
		break;	
}
}
function moveBox(code1,man,addr){//移動箱子
	switch (code1){
		case "left":if (map1[addr.y][addr.x-1]==4&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x-2]!=3){
			if (map1[addr.y][addr.x-2]==0) {//當第二個是空的時候
				man.addr={
					y:addr.y,
					x:addr.x-1
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y][addr.x-1]=5;
				map1[addr.y][addr.x-2]=4;
				creatMap(map1);
			}
			if (map1[addr.y][addr.x-2]==1&&map1[addr.y][addr.x-1]==4) {//推箱子進入終點
				console.log(mand.addr);
				man.addr={
					y:addr.y,
					x:addr.x-1
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y][addr.x-1]=5;
				map1[addr.y][addr.x-2]=14;
				creatMap(map1);
			}

		}
			break;
		case "up":if (map1[addr.y-1][addr.x]==4&&map1[addr.y][addr.x]==5&&map1[addr.y-2][addr.x]!=3){
			if (map1[addr.y-2][addr.x]==0) {
				man.addr={
					y:addr.y-1,
					x:addr.x
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y-1][addr.x]=5;
				map1[addr.y-2][addr.x]=4;
				creatMap(map1);
			}
			if (map1[addr.y-2][addr.x]==1&&map1[addr.y-1][addr.x]==4) {//推箱子進入終點
				man.addr={
					y:addr.y-1,
					x:addr.x
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y-1][addr.x]=5;
				map1[addr.y-2][addr.x]=14;
				creatMap(map1);
			}
		}	
			break;
		case "right":if (map1[addr.y][addr.x+1]==4&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x+2]!=3){
			if (map1[addr.y][addr.x+2]==0) {
				man.addr={
					y:addr.y,
					x:addr.x+1
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y][addr.x+1]=5;
				map1[addr.y][addr.x+2]=4;
				creatMap(map1);
			}
			if (map1[addr.y][addr.x+2]==1&&map1[addr.y][addr.x+1]==4) {//推箱子進入終點
				man.addr={
					y:addr.y,
					x:addr.x+1
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y][addr.x+1]=5;
				map1[addr.y][addr.x+2]=14;
				creatMap(map1);
			}
		}
			break;
		case "down":if (map1[addr.y+1][addr.x]==4&&map1[addr.y][addr.x]==5&&map1[addr.y+2][addr.x]!=3){
			if (map1[addr.y+2][addr.x]==0) {
				man.addr={
					y:addr.y+1,
					x:addr.x
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y+1][addr.x]=5;
				map1[addr.y+2][addr.x]=4;
				creatMap(map1);
			}
			if (map1[addr.y+2][addr.x]==1&&map1[addr.y+1][addr.x]==4) {//推箱子進入終點
				man.addr={
					y:addr.y+1,
					x:addr.x
				}
				map1[addr.y][addr.x]=0;
				map1[addr.y+1][addr.x]=5;
				map1[addr.y+2][addr.x]=14;
				creatMap(map1);
			}
			
		}
			break;
		default:
			break;
	}
}
function movefinal(code1,man,addr){//人進終點,在終點移動
	switch(code1){
		case "left":
		if (map1[addr.y][addr.x-1]==1&&map1[addr.y][addr.x]==5) {
					man.addr={
						y:addr.y,
						x:addr.x-1
					}
					map1[addr.y][addr.x]=0;
					map1[addr.y][addr.x-1]=15;
					creatMap(map1);
		}
		if (map1[addr.y][addr.x-1]==1&&map1[addr.y][addr.x]==15) {
					man.addr={
						y:addr.y,
						x:addr.x-1
					}
					map1[addr.y][addr.x]=1;
					map1[addr.y][addr.x-1]=15;
					creatMap(map1);
		}
		break;
		case "up":
				if (map1[addr.y-1][addr.x]==1&&map1[addr.y][addr.x]==5) {
									man.addr={
										y:addr.y-1,
										x:addr.x
									}
									map1[addr.y][addr.x]=0;
									map1[addr.y-1][addr.x]=15;
									creatMap(map1);
						}	
				if (map1[addr.y-1][addr.x]==1&&map1[addr.y][addr.x]==15) {
									man.addr={
										y:addr.y-1,
										x:addr.x
									}
									map1[addr.y][addr.x]=1;
									map1[addr.y-1][addr.x]=15;
									creatMap(map1);
						}		
		break;
		case "right":
					if (map1[addr.y][addr.x+1]==1&&map1[addr.y][addr.x]==5) {
									man.addr={
										y:addr.y,
										x:addr.x+1
									}
									map1[addr.y][addr.x]=0;
									map1[addr.y][addr.x+1]=15;
									creatMap(map1);
						}
					if (map1[addr.y][addr.x+1]==1&&map1[addr.y][addr.x]==15) {
									man.addr={
										y:addr.y,
										x:addr.x+1
									}
									map1[addr.y][addr.x]=1;
									map1[addr.y][addr.x+1]=15;
									creatMap(map1);
						}
		break;
		case "down":
			if (map1[addr.y+1][addr.x]==1&&map1[addr.y][addr.x]==5) {
					man.addr={
						y:addr.y+1,
						x:addr.x
					}
					map1[addr.y][addr.x]=0;
					map1[addr.y+1][addr.x]=15;
					creatMap(map1);
		}
			if (map1[addr.y+1][addr.x]==1&&map1[addr.y][addr.x]==15) {
					man.addr={
						y:addr.y+1,
						x:addr.x
					}
					map1[addr.y][addr.x]=1;
					map1[addr.y+1][addr.x]=15;
					creatMap(map1);
		}
		break;
		default:
		break;
	}
}
function finalBox(code1,man,addr){
	switch(code1){
		case "left":
		if (map1[addr.y][addr.x-1]==14&&map1[addr.y][addr.x-2]==1&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x-2]!=3){
			man.addr={
				y:addr.y,
				x:addr.x-1
			}
			map1[addr.y][addr.x-1]=15;
			map1[addr.y][addr.x-2]=14;
			map1[addr.y][addr.x]=0;
			creatMap(map1);
		}
		if (map1[addr.y][addr.x-1]==14&&map1[addr.y][addr.x-2]==0&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x-2]!=3){
			man.addr={
				y:addr.y,
				x:addr.x-1
			}
			map1[addr.y][addr.x-1]=15;
			map1[addr.y][addr.x-2]=4;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		if (map1[addr.y][addr.x-1]==14&&map1[addr.y][addr.x-2]==1&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x-2]!=3){
			man.addr={
				y:addr.y,
				x:addr.x-1
			}
			map1[addr.y][addr.x-1]=15;
			map1[addr.y][addr.x-2]=14;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		break;
		case "up":
		if (map1[addr.y-1][addr.x]==14&&map1[addr.y-2][addr.x]==1&&map1[addr.y][addr.x]==5&&map1[addr.y-2][addr.x]!=3){
			man.addr={
				y:addr.y-1,
				x:addr.x
			}
			map1[addr.y-1][addr.x]=15;
			map1[addr.y-2][addr.x]=14;
			map1[addr.y][addr.x]=0;
			creatMap(map1);
		}
		if (map1[addr.y-1][addr.x]==14&&map1[addr.y-2][addr.x]==0&&map1[addr.y][addr.x]==15&&map1[addr.y-2][addr.x]!=3){
			man.addr={
				y:addr.y-1,
				x:addr.x
			}
			map1[addr.y-1][addr.x]=15;
			map1[addr.y-2][addr.x]=4;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		if (map1[addr.y-1][addr.x]==4&&map1[addr.y-2][addr.x]==0&&map1[addr.y][addr.x]==15&&map1[addr.y-2][addr.x]!=3){
			man.addr={
				y:addr.y-1,
				x:addr.x
			}
			map1[addr.y-1][addr.x]=5;
			map1[addr.y-2][addr.x]=4;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		if (map1[addr.y-1][addr.x]==14&&map1[addr.y-2][addr.x]==1&&map1[addr.y][addr.x]==15&&map1[addr.y-2][addr.x]!=3){
			man.addr={
				y:addr.y-1,
				x:addr.x
			}
			map1[addr.y-1][addr.x]=15;
			map1[addr.y-2][addr.x]=14;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		break;
		case "right":
		if (map1[addr.y][addr.x+1]==14&&map1[addr.y][addr.x+2]==1&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x+2]!=3){
			man.addr={
				y:addr.y,
				x:addr.x+1
			}
			map1[addr.y][addr.x+1]=15;
			map1[addr.y][addr.x+2]=14;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		if (map1[addr.y][addr.x+1]==14&&map1[addr.y][addr.x+2]==0&&map1[addr.y][addr.x]==15&&map1[addr.y][addr.x+2]!=3){
			man.addr={
				y:addr.y,
				x:addr.x+1
			}
			map1[addr.y][addr.x+1]=15;
			map1[addr.y][addr.x+2]=4;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		if (map1[addr.y][addr.x+1]==14&&map1[addr.y][addr.x+2]==1&&map1[addr.y][addr.x]==5&&map1[addr.y][addr.x+2]!=3){
			man.addr={
				y:addr.y,
				x:addr.x+1
			}
			map1[addr.y][addr.x+1]=15;
			map1[addr.y][addr.x+2]=14;
			map1[addr.y][addr.x]=0;
			creatMap(map1);
		}
		break;
		case "down":
		if (map1[addr.y+1][addr.x]==14&&map1[addr.y+2][addr.x]==1&&map1[addr.y][addr.x]==5&&map1[addr.y+2][addr.x]!=3){
			man.addr={
				y:addr.y+1,
				x:addr.x
			}
			map1[addr.y+1][addr.x]=15;
			map1[addr.y+2][addr.x]=14;
			map1[addr.y][addr.x]=0;
			creatMap(map1);
		}
		if (map1[addr.y+1][addr.x]==14&&map1[addr.y+2][addr.x]==0&&map1[addr.y][addr.x]==15&&map1[addr.y+2][addr.x]!=3){
			man.addr={
				y:addr.y+1,
				x:addr.x
			}
			map1[addr.y+1][addr.x]=15;
			map1[addr.y+2][addr.x]=4;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		if (map1[addr.y+1][addr.x]==14&&map1[addr.y+2][addr.x]==1&&map1[addr.y][addr.x]==15&&map1[addr.y+2][addr.x]!=3){
			man.addr={
				y:addr.y+1,
				x:addr.x
			}
			map1[addr.y+1][addr.x]=15;
			map1[addr.y+2][addr.x]=14;
			map1[addr.y][addr.x]=1;
			creatMap(map1);
		}
		break;
		default:
		break;
	}
	
}

           

按鈕功能控制子產品

window.onload=function(){
	creatMap(map1);
	document.body.onkeydown=function(event){
		move(event.keyCode);
	}
//****鍵盤控制子產品****//
for (var i=0;i<fangxiang.length;i++){
//	console.log(fangxiang.length);
	fangxiang[i].i=i;//作用域問題 三種解法  我将變量變成節點的屬性
	fangxiang[i].onclick=function(){
		console.log(this.i);
			switch(this.i){
				case 0:dir="up";break;
				case 1:dir="left";break;
				case 2:dir="down";break;
				case 3:dir="right";break;
				default:
				break;
			}
	deepClone(mapobj,prevstep);//存儲上一步
	moveNull(dir,mand,mand.addr);
	movefinal(dir,mand,mand.addr);
	finalBox(dir,mand,mand.addr);
	moveBox(dir,mand,mand.addr);
		}
}
//重新整理目前關卡的功能
replay.onclick=function(){
			maxMap.innerHTML=''
			deepClone(abjcopy,mapobj);
   			map1=mapobj[allMap[startIndex]];
			mand=creatMap(map1);
}
//跳關功能子產品
btns.onclick=function(){
	var selValue=document.getElementsByClassName("select")[0].value;
	console.log(selValue);
	startIndex=selValue-1;
	deepClone(abjcopy,mapobj);
   	map1=mapobj[allMap[startIndex]];
	mand=creatMap(map1);
}
}
//上一步功能子產品
prevstep1.onclick=function(){
	console.log("瞿恒");
	maxMap.innerHTML="";
	console.log(prevstep);
	deepClone(prevstep,mapobj);
	map1=mapobj[allMap[startIndex]];
	mand=creatMap(map1);
}

           

素材請私聊 部落客 或者自行尋找

聯系QQ918922703

繼續閱讀