game.htm

来自「JavaScript编程实例7」· HTM 代码 · 共 160 行

HTM
160 行
字号 
<html>
<head>
  <title>
    拼图游戏
  </title>
</head>

<body>
<script language="JavaScript">
<!--

  var startpos = new Array(9,9,9,9, 9,0,0,0, 9,0,0,0, 9,0,0,0, 9,9,9,9);
  var pos      = new Array(9,9,9,9, 9,0,0,0, 9,0,0,0, 9,0,0,0, 9,9,9,9);
  var nummoves = 0;
   
  //产生0-8的随机数
  function random()
  {
    today = new Date();
    num = today.getTime();
    num = Math.round(Math.abs(Math.sin (num)*1000000)) % 9;
    return num;
  }

  //即时显示当前每个按钮的值，和移动次数，测试是否胜利
  function display(pos)
  {
    document.form2.elements[0].value=" "+pos[5]+" ";
    document.form2.elements[1].value=" "+pos[6]+" ";
    document.form2.elements[2].value=" "+pos[7]+" ";
    document.form2.elements[3].value=" "+pos[9]+" ";
    document.form2.elements[4].value=" "+pos[10]+" ";
    document.form2.elements[5].value=" "+pos[11]+" ";
    document.form2.elements[6].value=" "+pos[13]+" ";
    document.form2.elements[7].value=" "+pos[14]+" ";
    document.form2.elements[8].value=" "+pos[15]+" ";
    win();	//测试是否移动完成
  }
  
  //移动一步    
  function move(num)
  {
    //num为当前点击的按钮
    if (pos[num-4]==0)
    {
      pos[num-4]= pos[num];
      pos[num]= 0; 
      nummoves++;
    } 
    else if (pos[num-1]==0)
    {
      pos[num-1]= pos[num];
      pos[num]= 0; 
      nummoves++; 
    }
    else if (pos[num+1]==0)
    {
      pos[num+1]= pos[num];
      pos[num]= 0;  
      nummoves++;
    }
    else if (pos[num+4]==0)
    {
      pos[num+4]= pos[num];
      pos[num]= 0; 
      nummoves++; 
    }
    display(pos);
    focus();
  }
  
  //测试胜利条件
  function win()
  {
    if (pos[5]== 1 & pos[6]== 2 & pos[7]== 3 & pos[9]== 4 & pos[10]== 5 & pos[11]== 6 & pos[13]== 7 & pos[14]== 8 & pos[15]== 0)
      if (confirm('你成功了! 还想再玩一次吗 ?'))
        newgame();
  }

  //重新开始一个游戏
  function newgame()
  {
    var digital_array= new Array(0,0,0,0,0,0,0,0,0);
    for (var i=1; i<9;i++)	//随机将1-8写入helparray
    {
      randomnum= random();		//0-8随机数
      while (digital_array[randomnum])
        randomnum= random();
      digital_array[randomnum]= i;
    }
        
    for (var i=1; i<21;i++)
    {
      pos[i]= startpos[i];
    }
    for (var i=0; i<3; i++)
      for (var j=0; j<3; j++)
         pos[i*4+j+5]= digital_array[i*3+j];
    nummoves=0;
    display(pos);
  } 
  
// -->
</script>

<form name="form1">
<table style="position:absolute;left:200px" cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" value=" 1 "></td>
<td><input type="button" value=" 2 "></td>
<td><input type="button" value=" 3 "></td></tr>
<tr>
<td><input type="button" value=" 4 "></td>
<td><input type="button" value=" 5 "></td>
<td><input type="button" value=" 6 "></td>
<tr>
<td><input type="button" value=" 7 "></td>
<td><input type="button" value=" 8 "></td>
<td><input type="button" value="   "></td></tr>
</table>
</form>

<p>
<h1>拼图游戏</h1>
<p><font color=red>游戏规则</font>
<br>
将下面数字盘排列成和上面的数字盘一模一样!
<br>
所有和空格子相邻的数字都可移至空格子的位置上。
<br>
只要在想移动的格子上按一下，它就会移到空格子的位置。
<br>
试试看吧!
<p>
<form name="form2">
<table style="position:absolute;left:200px" cellspacing="0" cellpadding="0">
<tr>
<td><input type="button" value="   " onClick='move(5)'></td>
<td><input type="button" value="   " onClick='move(6)'></td>
<td><input type="button" value="   " onClick='move(7)'></td></tr>
<tr>
<td><input type="button" value="   " onClick='move(9)'></td>
<td><input type="button" value="   " onClick='move(10)'></td>
<td><input type="button" value="   " onClick='move(11)'></td>
<tr>
<td><input type="button" value="   " onClick='move(13)'></td>
<td><input type="button" value="   " onClick='move(14)'></td>
<td><input type="button" value="   " onClick='move(15)'></td></tr>
</table>
</form>

<form >
  <input type="button" value="开始 !" onClick="newgame()">
</form>

</body>
</html>

game.htm - 源码说明

本页面展示了「JavaScript编程实例7」中的 game.htm 源码文件，采用 HTM 编程语言编写，共 160 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?