智力测验Puzzle网页游戏，类似魔板的游戏

发布时间：2018-09-15 13:05:15 所属栏目：语言来源：站长网

导读：智力测验Puzzle网页游戏，类似魔板的游戏，虽然简单了点，但代码内的注释超丰富，对于要学习 Java Script的朋友，是一份不错的参考资料。游戏分为初级、中级、高级三个级别。演示： htmlheadtitle智力测验Puzzle/titlescript language=JavaScript// 全局

　　智力测验Puzzle网页游戏，类似魔板的游戏，虽然简单了点，但代码内的注释超丰富，对于要学习JavaScript的朋友，是一份不错的参考资料。游戏分为初级、中级、高级三个级别。

　　演示：

<html> <head> <title>智力测验Puzzle</title> <script language="JavaScript"> // 全局变量 var previousStep = 10; // 上一步 var nextStep; // 下一步 var intSize = 11; // 图片数 var intSteps = 0; // 步数 var beginGame = false; // 是否开始游戏 var intGameLevel = 1000; // 游戏程度 // 图片数组 var arrayImages = new Array("/uploads/allimg/1104/0.jpg","/uploads/allimg/1104/01.jpg","/uploads/allimg/1104/02.jpg","","/uploads/allimg/1104/04.jpg","/uploads/allimg/1104/05.jpg","/uploads/allimg/1104/06.jpg","","/uploads/allimg/1104/08.jpg","/uploads/allimg/1104/09.jpg","/uploads/allimg/1104/010.jpg"); // 检查下一步是否为允许的步骤 function validStep(currentStep, newStep){ switch(currentStep){ case 0: if (newStep == 1 || newStep == 4) return (true); break; case 1: if (newStep == 0 || newStep == 2 || newStep == 5) return (true); break; case 2: if (newStep == 1 || newStep == 6) return (true); break; case 4: if (newStep == 0 || newStep == 5 || newStep == 8) return (true); break; case 5: if (newStep == 1 || newStep == 4 || newStep == 6 || newStep == 9) return (true); break; case 6: if (newStep == 2 || newStep == 5 || newStep == 10) return (true); break; case 8: if (newStep == 4 || newStep == 9) return (true); break; case 9: if (newStep == 5 || newStep == 8 || newStep == 10) return (true); break; case 10: if (newStep == 6 || newStep == 9) return (true); break; default: return (false);} } // 是否已经完成 function checkDone(){ var objNode,intBeginPos,strImageName; for(var i = 0; i < intSize; i++) { if (arrayImages[i] != ""){ objNode = puzzleNode.childNodes[i]; // 取得图文件名称的位置 intBeginPos = objNode.src.lastIndexOf("/"); // 取得图片名称 strImageName = objNode.src.substring(intBeginPos+1,objNode.src.length); // 检查图片文件是否正确 if (strImageName != arrayImages[i]) return (false); } } return (true); } // 使用者移动图片 function moveImage(){ if (beginGame) { // 取得使用者选择的图片 for (var i = 0; i < intSize; i++) { if (window.event.srcElement == puzzleNode.childNodes[i]) { nextStep = i; break; } } // 检查是否为合法的下一步 if (validStep(previousStep, nextStep)){ puzzleNode.childNodes[previousStep].swapNode(puzzleNode.childNodes[nextStep]); previousStep = nextStep; intSteps++; step.innerText = "目前为第" + intSteps + "步"; if (checkDone()){ alert("在第 " + intSteps + " 步完成游戏!"); beginGame = false; step.innerText = ""; } } } } // 源码来自：烈火下载 http://www.veryhuo.com/down // 加载图片到标记 function loadImages(){ for(var i = 0; i < intSize; i++) // 指定图片的src属性 if (arrayImages[i] != "") puzzleNode.childNodes[i].src = arrayImages[i]; } // 打乱Puzzle的图片 function randomizeImages(){ for(var i = 0; i < intGameLevel; i++) { // 随机数取得下一步 nextStep = Math.round(Math.random() * (intSize - 1)); if (validStep(previousStep,nextStep)){ // 是合理的步骤, 交换节点 puzzleNode.childNodes[previousStep].swapNode(puzzleNode.childNodes[nextStep]); previousStep = nextStep; // 重设目前的步骤 } } } // 建立HTML的图片标记 function createPuzzle(){ var tempNode; var imageNode = document.createElement("IMG"); var brNode = document.createElement("BR"); // 建立3x3个图片 for (var j = 0; j <= 2; j++){ // 建立三个图片 for (var i = 0; i <= 2; i++) { tempNode = imageNode.cloneNode(); puzzleNode.appendChild(tempNode); } // 插入<br>标记 if (j != 2){ tempNode = brNode.cloneNode(); puzzleNode.appendChild(tempNode); } } resetPuzzle(); } // 重设Puzzle游戏 function resetPuzzle(){ loadImages(); intSteps = 0; beginGame = false; intGameLevel = 1000; gamelevel.innerText = "初级"; step.innerText = ""; } // 开始Puzzle游戏 function beginPuzzle(){ randomizeImages() intSteps = 0; beginGame = true; step.innerText = "目前为第" + intSteps + "步"; } // 选择等级 function selectLevel(){ intGameLevel = parseInt(level.options[level.selectedIndex].value); switch (intGameLevel){ case 1000: gamelevel.innerText = "初级"; break; case 2000: gamelevel.innerText = "中级"; break; case 3000: gamelevel.innerText = "高级"; break; } } </script> </head> <body onload="createPuzzle()" ID="bodyNode"> <hr> <div align="center" id="puzzleNode" onclick="moveImage()"></div> <hr> <center> <select name="level"> <option value="1000" Selected>初级</option> <option value="2000">中级</option> <option value="3000">高级</option> </select> <input type="button" onclick="selectLevel()" value="选择"> <b>游戏为<span id="gamelevel"></span></b><br> <input type="button" value="重设游戏" onclick="resetPuzzle()"> <input type="button" value="开始游戏" onclick="beginPuzzle()"> <b><span id="step"></span></b> </center> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

JS怎样完成移动端的拖	css3渐变背景的兼容问
css3的focus-within选	CSS属性之字体文本列