智力测验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拼图游戏）