JS網(wǎng)頁小游戲-推箱子代碼

2024-09-05 12:21:05

字體：大中小

供稿：網(wǎng)友

一個流行的益智游戲，網(wǎng)頁版推箱子代碼，做的很逼真，界面友好，開發(fā)智力。實現(xiàn)方法主要是JavaScript，請運(yùn)行一下看效果吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><META content="text/html; charset=gb2312" http-equiv=Content-Type><SCRIPT> var smapdata = new Array( "11111111111111111111","10000000000000000001","10010000000000000001","10010020000000000001","10010000000000000301","10010111110000003001","10000001000000000301","10000001000010000001","10000001000000000001","10000001000000111001","10000000000000000001","10000000011110000001","10020200000000000001","10000000000000000001","11111111111111111111")//原始地圖信息，便于編輯地圖。 var mapData =new Array(15);var spriteX=0;    spriteY=0;var winbox=0; function readMap(){ //重建地圖信息便于程序使用。  for(var i=0;i<15;i++){    mapData[i]=new Array(20);    for(var j=0;j<20;j++){      mapData[i][j]=smapdata[i].substr(j,1);    }  }} function CreateMap(){ //用dom來創(chuàng)建地圖。var x=30;var y=30;var cbox=0;for (var i=0;i<15;i++){for (var j=0;j<20;j++){var oe=document.createElement("div");    oe.id="box"+i+"_"+j; //設(shè)定id規(guī)則以便后面程序訪問。    oe.className="map"+mapData[i][j];    oe.style.pixelLeft=x;    oe.style.pixelTop=y;    gameArea.appendChild(oe);    x+=19;}y+=19;x=30;}} function mLeft(){  if(spriteX-1>0) {	if(mapData[spriteY][spriteX-1]=="1" ) return;	if(mapData[spriteY][spriteX-1]=="2" ) {		if(mapData[spriteY][spriteX-2]=="0" || mapData[spriteY][spriteX-2]=="3"){		if(mapData[spriteY][spriteX-2]=="3"){				mapData[spriteY][spriteX-2]="1";//若推到了目的地，則改箱子的屬性為障礙物，從而固定箱子位置。				winbox++;				if(winbox==3) win();//若三個箱子都到達(dá)目的地則贏。				}			else mapData[spriteY][spriteX-2]="2";		mapData[spriteY][spriteX-1]="0";		eval("box"+spriteY+"_"+(spriteX-1)).style.backgroundColor='#333333';		eval("box"+spriteY+"_"+(spriteX-2)).style.backgroundColor='#3333FF';		spriteX--;		sprite.style.pixelLeft-=19;       		}	}else{	spriteX--;	sprite.style.pixelLeft-=19;       	}  }} function mRight(){  if(spriteX+1<20){	if(mapData[spriteY][spriteX+1]=="1") return;	if(mapData[spriteY][spriteX+1]=="2"){  		if(mapData[spriteY][spriteX+2]=="0" || mapData[spriteY][spriteX+2]=="3"){		if(mapData[spriteY][spriteX+2]=="3") {				mapData[spriteY][spriteX+2]="1";				winbox++;				if(winbox==3) win();				}			else mapData[spriteY][spriteX+2]="2";		mapData[spriteY][spriteX+1]="0";		eval("box"+spriteY+"_"+(spriteX+1)).style.backgroundColor='#333333';		eval("box"+spriteY+"_"+(spriteX+2)).style.backgroundColor='#3333FF';		spriteX++;		sprite.style.pixelLeft+=19;       		}	}else{	spriteX++;	sprite.style.pixelLeft+=19;       	}  }} function mUp(){  if(spriteY-1>0) {	if(mapData[spriteY-1][spriteX]=="1") return;	if(mapData[spriteY-1][spriteX]=="2") {		if(mapData[spriteY-2][spriteX]=="0" || mapData[spriteY-2][spriteX]=="3") {		if(mapData[spriteY-2][spriteX]=="3") {				mapData[spriteY-2][spriteX]="1"; 				winbox++;				if(winbox==3) win();				}			else mapData[spriteY-2][spriteX]="2";		mapData[spriteY-1][spriteX]="0";		eval("box"+(spriteY-1)+"_"+spriteX).style.backgroundColor='#333333';		eval("box"+(spriteY-2)+"_"+spriteX).style.backgroundColor='#3333FF';		spriteY--;		sprite.style.pixelTop-=19;		}	}else{	spriteY--;	sprite.style.pixelTop-=19;       	}  }} function mDown(){  if(spriteY+1<20){ 	if(mapData[spriteY+1][spriteX]=="1") return;	if(mapData[spriteY+1][spriteX]=="2") {		if(mapData[spriteY+2][spriteX]=="0" || mapData[spriteY+2][spriteX]=="3") {		if(mapData[spriteY+2][spriteX]=="3") {				mapData[spriteY+2][spriteX]="1"				winbox++;				if(winbox==3) win();				}			else mapData[spriteY+2][spriteX]="2";		mapData[spriteY+1][spriteX]="0";		eval("box"+(spriteY+1)+"_"+spriteX).style.backgroundColor='#333333';		eval("box"+(spriteY+2)+"_"+spriteX).style.backgroundColor='#3333FF';		spriteY++;		sprite.style.pixelTop+=19;       		}	}else{	spriteY++;	sprite.style.pixelTop+=19;       	}  }} function win(){alert("you win!!!!!!!!!!!!!");} function fnKeydown(){var key=event.keyCode;switch(key){case 37:  mLeft();  break;case 39:  mRight();  break;case 38:  mUp();  break;case 40:  mDown();  break;}return false;} function init(){readMap();CreateMap();sprite.style.pixelLeft=49;sprite.style.pixelTop=49;spriteX=1;spriteY=1;} document.onkeydown=fnKeydown;</SCRIPT> <STYLE type=text/css>.map0 {	BACKGROUND-COLOR: #333333; BORDER-BOTTOM: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px}.map1 {	BACKGROUND-COLOR: #999999; BORDER-BOTTOM: #ffffff 2px outset; BORDER-LEFT: #ffffff 2px outset; BORDER-RIGHT: #ffffff 2px outset; BORDER-TOP: #ffffff 2px outset; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px}.map2 {	BACKGROUND-COLOR: #3333ff; BORDER-BOTTOM: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px}.map3 {	BACKGROUND-COLOR: #006600; BORDER-BOTTOM: #999999 0px solid; BORDER-LEFT: #999999 0px solid; BORDER-RIGHT: #999999 0px solid; BORDER-TOP: #999999 0px solid; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px}.box {	BACKGROUND-COLOR: #0000cc; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; HEIGHT: 20px; POSITION: absolute; WIDTH: 20px}</STYLE> <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD><BODY bgColor=#333333 onload=init()><div   class="70qarhlowxag"   id=gameArea></DIV><div   class="70qarhlowxag"   id=sprite style="POSITION: absolute"><IMG height=20 src="/d/file/p/2024/09-05/7e008ee7b35332163788d6b0f225ebcb.gif" width=20></DIV></BODY></HTML>

上一篇：CSS3貪吃蛇，HTML5實例

下一篇：乒乓球游戲JS網(wǎng)頁代碼