js键盘小游戏（新手）

来源：互联网发布：手机淘宝首页轮播大图编辑：程序博客网时间：2024/05/16 11:11

开发步骤：

1. 游戏需求

2. 游戏分析

3. 游戏开发与测试

4 游戏发布

开发心得：

1.写一行测试一行，避免出错，不要等到写了一大堆才测试。

2.软件领域中的知识在于积累。

以下是代码：

<html>  <head>   <title>打字小游戏</title>   <script>   var ShuZu=new Array("A","B","C","D");       //声明一个数组装住字母  var ZiMu='';                                                   //声明一个全局变量 function start()     {      time=setInterval("move()",300);            //        }    function move()     {      dia.style.top=parseInt(dia.style.top)+20;    // parseint(dia.style.top)>500     {        dia.style.top=50;       }      if(parseInt(dia.style.top)==70)       {        var XiaBiao=Math.floor(Math.random()*4);        ZiMu=ShuZu[XiaBiao];        dia.innerHTML=ZiMu;       }                     dia1.style.top=parseInt(dia1.style.top)+20;      if(parseInt(dia1.style.top)>500)        {        dia1.style.top=50;       }      if(parseInt(dia1.style.top)==70)       {        var XiaBiao1=Math.floor(Math.random()*4);        ZiMu1=ShuZu[XiaBiao1];        dia1.innerHTML=ZiMu1;       }                            dia2.style.top=parseInt(dia2.style.top)+20;      if(parseInt(dia2.style.top)>500)        {        dia2.style.top=50;       }      if(parseInt(dia2.style.top)==70)       {        var XiaBiao2=Math.floor(Math.random()*4);        ZiMu2=ShuZu[XiaBiao2];        dia2.innerHTML=ZiMu2;       }                               }    function stop()     {      clearInterval(time);     }     document.onkeydown=keydown;    function keydown(e)     {      var name=String.fromCharCode(e.which);      //alert(name);      if(ZiMu==name)      {       dia.style.top=50;       }      if(ZiMu1==name)      {       dia1.style.top=50;       }      if(ZiMu2==name)      {       dia2.style.top=50;       }     }        </script>  </head>  <body>   <center>    <button onClick="start()">开始</button>    <button onClick="stop()">结束</button>    <div id="dia" style="position: absolute;width:50px;height:50px;background:red;top:50px; left:0;"></div>             <div id="dia1" style="position: absolute;width:50px;height:50px;background:red;top:50px; left: 200;"></div>             <div id="dia2" style="position: absolute;width:50px;height:50px;background:red;top:50px; left: 500;"></div>   </center>  </body> </html>