一 思路
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
![JavaScript學習筆記（六）(Jquery入門)注意:attr和prop[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)