首页 >> JavaScript >> Js高级编程 >> 发一个数字拼图网页游戏

发一个数字拼图网页游戏

作者:塞北的雪来源:51js 时间:2008-10-12 网友评论条【大中小】

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

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

$("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> [提示：你可先修改部分代码，再按运行]

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/javascript/program/200810/490012.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

闽ICP备06017341号

发一个数字拼图网页游戏

Aspxhome.com. 中国Asp之家. 版权所有