JS网页推箱子
这一周完成了这个推箱子游戏，中间出现了很多问题，有时也总运行不出结果，这过程中我学会了使用Firefox+Firebug来进行调试，虽然这过程是先看懂别人的代码再去实现，但感觉收获也很大。这个推箱子还有很多很多需要加强的地方，未来还会不断改进它。
-------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>JS网页推箱子</title>
<script type="text/javascript">
var win=0;
var positionx=1;
var positiony=1;
var x=30;
var y=30;
var mapdate=new Array(15);
var mapdate1=new Array(
"11111111111111111111",
"10000000100000000001",
"10010000100001100001",
"10010020100000000001",
"10010000000000000301",
"10010111110000003001",
"10000001000000000301",
"10000001000000000001",
"10000001000000000001",
"10000001000001111001",
"10000000000000000001",
"10000000011110001001",
"10020200000000001001",
"10000000000000001001",
"11111111111111111111")
function makemap()
{for(var i=0;i<15;i++)
{mapdate[i]=new Array(20);
for(var j=0;j<20;j++)
{mapdate[i][j]=mapdate1[i].substr(j,1);
var ae=document.createElement("div");
ae.id="box"+i+"_"+j;
ae.className="map"+mapdate[i][j];
ae.style.pixelLeft=x;
ae.style.pixelTop=y;
gamearea.appendChild(ae);
x=x+20;
}
y=y+20;
x=30;
}
person.style.pixelLeft=50;
person.style.pixelTop=50;
}
function ifkeydown()
{
var key=event.keyCode;
if(key==37)
{left();}
if(key==39)
{right();}
if(key==38)
{up();}
if(key==40)
{down();}
}
function left()
{
if(mapdate[positiony][positionx-1]=="1")
{return;}
if(mapdate[positiony][positionx-1]=="0")
{person.style.pixelLeft-=20;
positionx--;}
if(mapdate[positiony][positionx-1]=="2")
{if(mapdate[positiony][positionx-2]=="1")
{return;}
if(mapdate[positiony][positionx-2]=="0")
{eval("box"+positiony+"_"+(positionx-1)).style.backgroundColor="#000000";
eval("box"+positiony+"_"+(positionx-2)).style.backgroundColor=" #00FF00";
mapdate[positiony][positionx-1]="0";
mapdate[positiony][positionx-2]="2";
person.style.pixelLeft-=20;
positionx--;
}
if(mapdate[positiony][positionx-2]=="3")
{eval("box"+positiony+"_"+(positionx-1)).style.backgroundColor="#000000";
eval("box"+positiony+"_"+(positionx-2)).style.backgroundColor=" #00FF00";
mapdate[positiony][positionx-1]="0";
mapdate[positiony][positionx-2]="1";
person.style.pixelLeft-=20;
positionx--;
win=win+1;
if(win==3)
{alert("you,win!");}
}
}
if(mapdate[positiony][positionx-1]=="3")
{return;}
}
function right()
{
if(mapdate[positiony][positionx+1]=="1")
{return;}
if(mapdate[positiony][positionx+1]=="0")
{person.style.pixelLeft+=20;
positionx++;}
if(mapdate[positiony][positionx+1]=="2")
{if(mapdate[positiony][positionx+2]=="1")
{return;}
if(mapdate[positiony][positionx+2]=="0")
{eval("box"+positiony+"_"+(positionx+1)).style.backgroundColor="#000000";
eval("box"+positiony+"_"+(positionx+2)).style.backgroundColor=" #00FF00";
mapdate[positiony][positionx+1]="0";
mapdate[positiony][positionx+2]="2";
person.style.pixelLeft+=20;
positionx++;
}
if(mapdate[positiony][positionx+2]=="3")
{eval("box"+positiony+"_"+(positionx+1)).style.backgroundColor="#000000";
eval("box"+positiony+"_"+(positionx+2)).style.backgroundColor=" #00FF00";
mapdate[positiony][positionx+1]="0";
mapdate[positiony][positionx+2]="1";
person.style.pixelLeft+=20;
positionx++;
win=win+1;
if(win==3)
{alert("you,win!");}
}
}
if(mapdate[positiony][positionx+1]=="3")
{return;}
}
function up()
{
if(mapdate[positiony-1][positionx]=="1")
{return;}
if(mapdate[positiony-1][positionx]=="0")
{person.style.pixelTop-=20;
positiony--;}
if(mapdate[positiony-1][positionx]=="2")
{if(mapdate[positiony-2][positionx]=="1")
{return;}
if(mapdate[positiony-2][positionx]=="0")
{eval("box"+(positiony-1)+"_"+positionx).style.backgroundColor="#000000";
eval("box"+(positiony-2)+"_"+positionx).style.backgroundColor=" #00FF00";
mapdate[positiony-1][positionx]="0";
mapdate[positiony-2][positionx]="2";
person.style.pixelTop-=20;
positiony--;
}
if(mapdate[positiony-2][positionx]=="3")
{eval("box"+(positiony-1)+"_"+positionx).style.backgroundColor="#000000";
eval("box"+(positiony-2)+"_"+positionx).style.backgroundColor=" #00FF00";
mapdate[positiony-1][positionx]="0";
mapdate[positiony-2][positionx]="1";
person.style.pixelTop-=20;
positiony--;
win=win+1;
if(win==3)
{alert("you,win!");}
}
}
if(mapdate[positiony-1][positionx]=="3")
{return;}
}
function down()
{
if(mapdate[positiony+1][positionx]=="1")
{return;}
if(mapdate[positiony+1][positionx]=="0")
{person.style.pixelTop+=20;
positiony++;}
if(mapdate[positiony+1][positionx]=="2")
{if(mapdate[positiony+2][positionx]=="1")
{return;}
if(mapdate[positiony+2][positionx]=="0")
{eval("box"+(positiony+1)+"_"+positionx).style.backgroundColor="#000000";
eval("box"+(positiony+2)+"_"+positionx).style.backgroundColor=" #00FF00";
mapdate[positiony+1][positionx]="0";
mapdate[positiony+2][positionx]="2";
person.style.pixelTop+=20;
positiony++;
}
if(mapdate[positiony+2][positionx]=="3")
{eval("box"+(positiony+1)+"_"+positionx).style.backgroundColor="#000000";
eval("box"+(positiony+2)+"_"+positionx).style.backgroundColor=" #00FF00";
mapdate[positiony+1][positionx]="0";
mapdate[positiony+2][positionx]="1";
person.style.pixelTop+=20;
positiony++;
win=win+1;
if(win==3)
{alert("you,win!");}
}
}
if(mapdate[positiony+1][positionx]=="3")
{return;}
}
document.onkeydown=ifkeydown;
</script>
<style type="text/css" >
.man {position:absolute; width:20px; height:20px; background-color:#FF0000; BORDER-BOTTOM: #ffffff 2px outset;
BORDER-LEFT: #ffffff 2px outset;
BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset; }
.map0 { background-color:#000000; position:absolute; width:20px; height:20px; BORDER-BOTTOM: #ffffff 2px outset;
BORDER-LEFT: #ffffff 2px outset;
BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset; }
.map2 { background-color: #00FF00; position:absolute; width:20px; height:20px; BORDER-BOTTOM: #ffffff 2px outset;
BORDER-LEFT: #ffffff 2px outset;
BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset; }
.map3 { background-color: #0000FF; position:absolute; width:20px; height:20px; BORDER-BOTTOM: #ffffff 2px outset;
BORDER-LEFT: #ffffff 2px outset;
BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset; }
.map1 { background-color: #999999; position:absolute; width:20px; height:20px; BORDER-BOTTOM: #ffffff 2px outset;
BORDER-LEFT: #ffffff 2px outset;
BORDER-RIGHT: #ffffff 2px outset;
BORDER-TOP: #ffffff 2px outset; }
</style>
</head>
<body style="left:400px; position:absolute;" bgcolor="#999999" onload="makemap()">
<div id="gamearea"></div>
<div id="person" class="man"></div>
</body>
</html>