JavaScript 寫遊戲 : 搬運工
<!--
Copyright(c) 1998-2004 dewin all rights reserved
Start 2002-10-02 17:50
Finish 2002-10-15 22:41
Last Edit 2003-06-11 18:55
-->
<body>
<style>
.Ground{}
.Floor{}
.Wall{border:2px outset #ADFF2F;background-color:#888888;z-index:0}
.Aim{background-color:#FF69B4;filter:Alpha(opacity=100,FinishOpacity=0,Style=3);z-index:0}
.Box{background-color:#87CEFA;filter:Alpha(opacity=0,FinishOpacity=100,Style=3);z-index:1}
.Man{background-color:red;z-index:1;filter:filpv}
</style>
<textarea id=Info rows=20>rddlllllluurrrDulllddrrRRRRuulDLrrdLulDDDldRuuurururrddLLLulDDDlddrrULuuuurrurDrdLLLulDDDDrddlluRuuuulllluurrrDulllddrrRurDDDDDldRuuuuuulullDldRRRurDDDDuuuululDldRRurDDDlDR</textarea><br>
<input type=button value='copy' onclick='Info.select();document.execCommand("Copy")'>
<input type=button value='paste' onclick='Info.focus();if(!/[^(l|r|u|d|L|R|U|D)]/g.exec(window.clipboardData.getData("Text")))document.execCommand("Paste")'>
<input type=button value='Auto Run' onclick='Run()'><br><br>
Boxes has Moved<br><input id=BoxMoveInfo readonly> Steps<br>
Man has Moved<br><input id=ManMoveInfo readonly> Steps
<span id=Base style='position:absolute;overflow:hidden'></span>
<script>
function init(){
MainMap = [];
RePlayTime = 10 //million second
MapW = MapH = 30;
PushScrollNo = 30;
BoxCompletes = 0;
TotalBox = 0;
Timer = null;
canMove = true
BoxMoves = 0;
Count = -1;
BackRecord = [];
BoxMoveInfo.value = 0;
ManMoveInfo.value = 0;
}
/*
W = Wall
0 = Box
@ = Box on Aim
* = Man
# = Man on Aim
. = Aim
= Space
*/
Map = [];
Map[0] = [
'WWWWWWWWWWW',
'W W* W',
'W 00000 0 W',
'W W',
'WWWWW WWWWW',
' W .W ',
' W .W ',
' W...W ',
' W .W ',
' WWWWW '
]
function ReadMap(k){
init();
Base.innerHTML = '';
var w=Map[k][0].length*MapW
var h=Map[k].length*MapW
Base.style.width = w;
Base.style.height = h;
Base.style.left = (w>document.body.clientWidth)?0:(document.body.offsetWidth-w)/2;
Base.style.top = 10;
for(var y=0;y<Map[k].length;y++){
MainMap[y] = [];
for(var x=0;x<Map[k][y].length;x++){
MainMap[y][x] = Map[k][y].charAt(x);
if(MainMap[y][x]=='W')iHtml(x,y,'Wall');
else{
//if(MainMap[y][x]=="|"){iHtml(x,y,'Floor');MainMap[y][x]=' '}
//else iHtml(x,y,'Ground');
iHtml(x,y,'Ground');
switch(MainMap[y][x]){
case '0':iBox(x,y,0);break;
case '.':iHtml(x,y,'Aim');break;
case '@':iHtml(x,y,'Aim');iBox(x,y,1);BoxCompletes++;break;
case '*':iMan(x,y,0);break;
case '#':iHtml(x,y,'Aim');iMan(x,y,1);break;
}
}
}
}
}
function iHtml(x,y,k){
Base.insertAdjacentHTML("beforeEnd","<span style='position:absolute;left:"+x*MapW+";top:"+y*MapH+";width:"+MapW+";height:"+MapH+"' class='"+k+"' x="+x+" y="+y+">");
}
function iBox(x,y,k){
MainMap[y][x] = Base.appendChild(document.createElement("<span style='position:absolute;left:"+x*MapW+";top:"+y*MapH+";width:"+MapW+";height:"+MapH+"' class='Box' complete='"+k+"'>"));
TotalBox++;
}
function iMan(x,y,k){
Man = Base.appendChild(document.createElement("<img alt='Man' src='pic/BOXMAN.GIF' style='position:absolute;left:"+x*MapW+";top:"+y*MapH+";width:"+MapW+";height:"+MapH+";' class='Man'>"));
Man.x = x
Man.y = y
MainMap[y][x] = (k==0)?' ':'.';
}
function Dir(x,y,k){
if(!canMove) return
var ManFront = MainMap[y+parseInt(Man.y)][x+parseInt(Man.x)];
if(ManFront==' ' || ManFront=='.')if(k!=null)Move1(x,y,k.toLowerCase());else Move1(x,y);
else{
if(typeof(ManFront)=='object'){
var ManFrontFront = MainMap[2*y+parseInt(Man.y)][2*x+parseInt(Man.x)];
if(ManFrontFront == ' '){if(k!=null)Move1(x,y,k.toUpperCase());else Move1(x,y);Move2(ManFront,x,y);}
else if(ManFrontFront == '.'){if(k!=null)Move1(x,y,k.toUpperCase());else Move1(x,y);Move3(ManFront,x,y);}
BoxMoves++
}
}
}
function Move1(x,y,k){
if(k != null){
BackRecord[++Count] = k
BackRecord.length = Count+1
}
Man.x = x+parseInt(Man.x);
Man.y = y+parseInt(Man.y);
Man.style.left = Man.x*MapW;
Man.style.top = Man.y*MapH;
}
function Move2(obj,x,y){
obj.style.left = (x+Man.x)*MapW;
obj.style.top = (y+Man.y)*MapH;
MainMap[y+parseInt(Man.y)][x+parseInt(Man.x)] = obj;
if(obj.complete == 0) MainMap[Man.y][Man.x]=' ';
else{
MainMap[Man.y][Man.x] = '.';
BoxCompletes --;
}
obj.complete = 0;
}
function Move3(obj,x,y){
obj.style.left = (x+Man.x)*MapW;
obj.style.top = (y+Man.y)*MapH;
MainMap[y+parseInt(Man.y)][x+parseInt(Man.x)] = obj;
if(obj.complete == 1) MainMap[Man.y][Man.x]='.';
else{
MainMap[Man.y][Man.x] = ' ';
if(++BoxCompletes == TotalBox) oWin();
}
obj.complete = 1;
}
function UnDo(){
if(Count >= 0){
canMove = true
switch(BackRecord[Count]){
//not object
case 'l':Move1(1,0);break;//left -> right
case 'u':Move1(0,1);break;//up -> down
case 'r':Move1(-1,0);break;//right -> left
case 'd':Move1(0,-1);break;//down -> up
//object
case 'L':UnGo(1,0);break;//left -> right
case 'U':UnGo(0,1);break;//up -> down
case 'R':UnGo(-1,0);break;//right -> left
case 'D':UnGo(0,-1);break;//down -> up
}
iSelects(--Count)
}
}
function UnGo(x,y){
BoxMoves--;
var obj = MainMap[-y+parseInt(Man.y)][-x+parseInt(Man.x)];
if(MainMap[Man.y][Man.x]==' '){
if(obj.complete == 0)MainMap[-y+parseInt(Man.y)][-x+parseInt(Man.x)]=' ';
else{
MainMap[-y+parseInt(Man.y)][-x+parseInt(Man.x)]='.';
BoxCompletes --;
}
obj.complete=0
}
else{
if(obj.complete == 0){
MainMap[-y+parseInt(Man.y)][-x+parseInt(Man.x)]=' ';
if(++BoxCompletes == TotalBox) oWin();
}
else MainMap[-y+parseInt(Man.y)][-x+parseInt(Man.x)]='.';
obj.complete=1
}
obj.style.left = Man.x*MapW;
obj.style.top = Man.y*MapH;
MainMap[Man.y][Man.x] = obj;
Move1(x,y);
}
function ReDo(){
if(Count+1<BackRecord.length){
switch(BackRecord[++Count]){
case 'l': case 'L': Dir(-1,0);break;//left
case 'u': case 'U': Dir(0,-1);break;//up
case 'r': case 'R': Dir(1,0);break;//right
case 'd': case 'D': Dir(0,1);break;//down
}
iSelects(Count)
}
else clearInterval(Timer);
}
function oWin(){
canMove = false
alert('Congratulation! You have pass.')
}
function window.onload(){
ReadMap(0);
document.body.scroll='no'
function document.onkeydown(){
if(event.ctrlKey){
switch(event.keyCode){
case 37:document.body.scrollLeft-=PushScrollNo;break;//left
case 38:document.body.scrollTop-=PushScrollNo;break;//up
case 39:document.body.scrollLeft+=PushScrollNo;break;//right
case 40:document.body.scrollTop+=PushScrollNo;break;//down
}
}
else{
switch(event.keyCode){
case 37:Dir(-1,0,'l');break;//left
case 38:Dir(0,-1,'u');break;//up
case 39:Dir(1,0,'r');break;//right
case 40:Dir(0,1,'d');break;//down
}
event.returnValue = false;
Info.value = BackRecord.join("")
iSelects(Count)
}
}
function document.onclick(){ReDo()}
function document.oncontextmenu(){UnDo();event.returnValue = false;}
window.focus();
Base.focus();
}
function Run(){
var temp = Info.value;
if(temp == '')return;
ReadMap(0);
BackRecord=temp.split("")
Timer = setInterval(ReDo,RePlayTime)
}
function iSelects(x){
var iRange = Info.createTextRange()
iRange.collapse(true)
iRange.moveStart("character",x)
iRange.moveEnd("character",1)
iRange.select()
BoxMoveInfo.value = BoxMoves;
ManMoveInfo.value = x+1;
}
</script>