位置：首页>> 网络编程>> JavaScript>> 发一个数字拼图网页游戏

发一个数字拼图网页游戏

作者：塞北的雪　来源：51js　发布时间：2008-10-12 10:02:00　

标签：游戏,网页游戏,javascript,拼图

发一个数字拼图游戏，有点小疑问

前几天写得，其中一段代码还要感谢“簡簡單單愛妳”的提示，不过我还是不太明白，，有点笨。

$("b"+i).onclick = function(i){return function(){move(i);this.blur();};}(i);

就是这句，动态设置对象事件，我看不懂上面的语法，还望大家指点一下：）

<html><head><title>8数码数字拼图 - asp之家</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /></head><body><style>.btn{width:100px;height:100px;margin:10px 0 0 10px;font-size:50px;BORDER: #ccc 1px solid;}</style><div style="text-align:center;"><div style="width:350px;height:350px;margin:auto;" id="boxs"><button id="b1" class="btn">1</button><button id="b2" class="btn">2</button><button id="b3" class="btn">3</button><button id="b4" class="btn">4</button><button id="b5" class="btn">5</button><button id="b6" class="btn">6</button><button id="b7" class="btn">7</button><button id="b8" class="btn">8</button><button id="b9" class="btn"> </button></div><div>移动次数：<span id="tips">0</span></div><br><button id="Get" onClick="Start()">开始</button></div><script language="javascript">SpaceChar=" ";CurrentStep=0;CurrentSeq=new Array("1","2","3","4","5","6","7","8",SpaceChar);function $(obj){return document.getElementById(obj);}function $$(TagName){return $('boxs').getElementsByTagName(TagName);}function Start(){CurrentStep=0;UpdateInfo('tips',CurrentStep);CurrentSeq.sort(function(){return Math.random( )*new Date％3-1});SetSerial();}function UpdateInfo(obj,msg){$(obj).innerHTML = msg;}function GetSerial(){for(i=1;i<=9;i++){CurrentSeq[i-1]=$('b'+i).value;}}function SetSerial(){for(i=1;i<=9;i++){$('b'+i).value=CurrentSeq[i-1];//for ie$('b'+i).innerHTML=CurrentSeq[i-1]; // for FF}}function move(dir){GetSerial();dir=parseInt(dir);if(CurrentSeq[dir-1]==SpaceChar) return;CurrentStep++;switch(dir){case 1:if(CurrentSeq[1]==SpaceChar){o1=0,o2=1;}else if(CurrentSeq[3]==SpaceChar){o1=0,o2=3;}else{return;}break;case 2:if(CurrentSeq[0]==SpaceChar){o1=0,o2=1;}else if(CurrentSeq[2]==SpaceChar){o1=1,o2=2;}else if(CurrentSeq[4]==SpaceChar){o1=1,o2=4;}else{return;}break;case 3:if(CurrentSeq[1]==SpaceChar){o1=2,o2=1;}else if(CurrentSeq[5]==SpaceChar){o1=2,o2=5;}else{return;}break;case 4:if(CurrentSeq[0]==SpaceChar){o1=3,o2=0;}else if(CurrentSeq[4]==SpaceChar){o1=3,o2=4;}else if(CurrentSeq[6]==SpaceChar){o1=3,o2=6;}else{return;}break;case 5:if(CurrentSeq[1]==SpaceChar){o1=4,o2=1;}else if(CurrentSeq[3]==SpaceChar){o1=4,o2=3;}else if(CurrentSeq[5]==SpaceChar){o1=4,o2=5;}else if(CurrentSeq[7]==SpaceChar){o1=4,o2=7;}else{return;}break;case 6:if(CurrentSeq[2]==SpaceChar){o1=5,o2=2;}else if(CurrentSeq[4]==SpaceChar){o1=5,o2=4;}else if(CurrentSeq[8]==SpaceChar){o1=5,o2=8;}else{return;}break;case 7:if(CurrentSeq[3]==SpaceChar){o1=6,o2=3;}else if(CurrentSeq[7]==SpaceChar){o1=6,o2=7;}else{return;}break;case 8:if(CurrentSeq[4]==SpaceChar){o1=7,o2=4;}else if(CurrentSeq[6]==SpaceChar){o1=7,o2=6;}else if(CurrentSeq[8]==SpaceChar){o1=7,o2=8;}else{return;}break;case 9:if(CurrentSeq[5]==SpaceChar){o1=8,o2=5;}else if(CurrentSeq[7]==SpaceChar){o1=8,o2=7;}else{return;}break;}t=CurrentSeq[o1];CurrentSeq[o1]=CurrentSeq[o2];CurrentSeq[o2]=t;SetSerial();UpdateInfo('tips',CurrentStep);Check();}function Check(){flag=true;for(i=0;i<=7;i++){if(CurrentSeq[i]!=i+1) flag=false;}if(flag){alert("成功！");}}function D(str){$('DebugInfo').innerHTML += str + '<br>';}function Clear(){$('DebugInfo').innerHTML = '';}window.onload=function(){for(i=1;i<=9;i++){$("b"+i).onclick = function(i){return function(){move(i);this.blur();};}(i);//就是这句，动态设置对象事件，我看不懂上面的语法，还望大家指点一下：）}}</script></body></html>

投稿

发一个数字拼图网页游戏

猜你喜欢