迷宫

最新推荐文章于 2022-09-16 15:46:39 发布

原创最新推荐文章于 2022-09-16 15:46:39 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

25 篇文章

订阅专栏

<html>

<head>

<style>

body{

font-size:12px;

}

</style>

<scripttype="text/javascript">

var isinit = false;

var_width = 200;

var_height = 200;

var_perlen = 20;

var_ctborder = 2;

varclickObj;

varlastclickobj;

vardiscolorstate ={none:"gainsboro",msover:"oldlace",msclick:"red"};

var_ds;

vart;

varcolarr = new Array(_height/_perlen);

for(vari=0,j=_height/_perlen;i<j;i++){

colarr[i]=new Array(_width/_perlen);

}

varcolarrData = new Array(_height/_perlen);

for(vari=0,j=_height/_perlen;i<j;i++){

colarrData[i]=new Array(_width/_perlen);

}

varc_onclick = function(e){

var _x,_y;

var e = e || event || window.event;

var srcE = e.target || e.srcElement;

if(/^\d+::\d+/.test(srcE.id)){

if(!lastclickobj){

if(srcE.id!=(_height/_perlen-1)+"::"+(_width/_perlen-1)){

alert("请从入口进入。");

return;

}else if(isinit){

_ds.innerHTML= "游戏开始。您用时0秒。";

opertime();

}

if(lastclickobj){

if(srcE.id==lastclickobj.id){

srcE.style.backgroundColor=discolorstate.msover;

lastclickobj = srcE.beforeObj;

return;

}

if(lastclickobj&&isinit){

if(!checkLine(srcE)){

alert("路线错误。");

return;

}

if(srcE.id=="0::0"){

srcE.style.backgroundColor=discolorstate.msclick;

alert("成功走出。");

window.clearInterval(t);

return;

}

if(isinit&&lastclickobj){

if(!checkLine(srcE)){

alert("路线错误。");

return;

}

srcE.style.backgroundColor=discolorstate.msclick;

srcE.beforeObj= lastclickobj;

lastclickobj= srcE;

}

};

varcheckLine = function(obj){

var_b = false;

vartempArr = obj.id.split("::");

var_t1=parseInt(tempArr[0]);

var_t2=parseInt(tempArr[1]);

vartempobj = colarrData[_t1][_t2].split(",");

for(vari=0;i<4;i++){

if(tempobj[i]==1&& colarr[_t1][_t2]==1){

if(i==0){

if(lastclickobj.id==(_t1-1)+"::"+_t2){

returntrue;

}

}elseif(i==1){

if(lastclickobj.id==_t1+"::"+(_t2+1)){

returntrue;

}

}elseif(i==2){

if(lastclickobj.id==(_t1+1)+"::"+_t2){

returntrue;

}

}else{

if(lastclickobj.id==_t1+"::"+(_t2-1)){

returntrue;

}

returnfalse;

};

varopertime = function(){

t=setInterval("displaytime()",1000);

};

vardisplaytime = function(){

var ts = _ds.innerHTML;

_ds.innerHTML=ts.replace(/\d+/,function(msg){

return(parseInt(msg)+1)+"";

});

};

varc_onmousemove = function(e){

vare = e || event || window.event;

varsrcE = e.target || e.srcElement;

if(srcE.style.backgroundColor==discolorstate.msclick){

if(clickObj &&clickObj.id!=srcE.id&&clickObj.style.backgroundColor!=discolorstate.msclick){

clickObj.style.backgroundColor= discolorstate.none;

clickObj==null;

}

return;

}

if(clickObj&&clickObj.style.backgroundColor!=discolorstate.msclick&&clickObj.id!=srcE.id){

clickObj.style.backgroundColor =discolorstate.none;

}

clickObj= srcE;

srcE.style.backgroundColor= discolorstate.msover;

};

varinit = function(){

_ds= document.getElementById("display");

varct = document.getElementById("content");

ct.style.width = (_width+_ctborder*2)+"px";

ct.style.height= (_height+_ctborder*2)+"px";

ct.style.borderWidth= _ctborder;

var_hv = _height/_perlen;

var_wv = _width/_perlen;

for(vari=0;i<_hv;i++){

for(var j=0;j<_wv;j++){

vardesktop = document.createElement("div");

desktop.style.position="absolute";

desktop.style.width = _perlen+"px";

desktop.style.height= _perlen+"px";

desktop.style.top = (_ctborder+i*_perlen)+"px";

desktop.style.left= (_ctborder+j*_perlen)+"px";

desktop.style.backgroundColor= discolorstate.none;

desktop.id= i+"::"+j;

desktop.onmousemove= c_onmousemove;

desktop.onclick= c_onclick;

if(i==0&&j==0){

desktop.innerHTML= "to";

}

if(i==(_hv-1)&&j==(_wv-1)){

desktop.innerHTML= "in";

}

ct.appendChild(desktop);

}

varmakeline = function(e){

vare = e || event || window.event;

varsrcE = e.target || e.srcElement;

for(vari=0;i<_height/_perlen;i++){

for(var h=0;h<_width/_perlen;h++){

varobj = document.getElementById(i+"::"+h);

colarr[i][h] = (obj.style.backgroundColor== discolorstate.msclick?"1":"0");

}

for(vard=0,q=_height/_perlen;d<q;d++){

for(var h=0,k=_width/_perlen;h<k;h++){

var t1 = (d==0? "0":colarr[d-1][h]);

var t2 =(h==(k-1)?"0":colarr[d][h+1]);

var t3 =(d==(q-1)?"0":colarr[d+1][h]);

var t4 = (h==0? "0":colarr[d][h-1]);

colarrData[d][h] =t1+","+t2+","+t3+","+t4;

}

init();

isinit= true;

lastclickobj=null;

clickObj=null;

_ds.innerHTML= "路线已生成，请从入口进入游戏开始。";

};

vargl = document.getElementById("getLine");

gl.onclick= makeline;

varry = document.getElementById("replay");

ry.onclick= function(){

window.location.href= window.location.href;

};

window.onload= init;

</script>

</head>

<bodystyle="margin:0;padding:0">

玩法介绍：<br/>

1.在画面点出迷宫路线，in表示入口，to表示出口。按录制按钮生成迷宫路线<br/>

3.从入口进入，游戏开始，如果路线错误，回退。<br/>

4.走到出口，出迷宫。<br/>

(作者：周小虎anbangzhiguo@163.com。 )

<div>

</body>

</html>