智力测验Puzzle网页游戏

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

智力测验Puzzle网页游戏

标签：智力测验　时间：2011-04-24　已阅读：
智力测验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>

智力测验Puzzle网页游戏

本类推荐代码

本类阅读排行

最新源码下载