智力測驗Puzzle網頁游戲

2024-09-05 12:21:01

字體：大中小

來源：轉載

供稿：網友

智力測驗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("/jscss/demoimg/201104/0.jpg","/jscss/demoimg/201104/01.jpg","/jscss/demoimg/201104/02.jpg","","/jscss/demoimg/201104/04.jpg","/jscss/demoimg/201104/05.jpg","/jscss/demoimg/201104/06.jpg","","/jscss/demoimg/201104/08.jpg","/jscss/demoimg/201104/09.jpg","/jscss/demoimg/201104/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 = "";      }    }  }}// 加載圖片到標記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>

上一篇：猜數字小游戲，JS版

下一篇：JS重現_經典拼板游戲（JS拼圖游戲）