用JavaScript开发山寨打字游戏

样式如下：代码见图下方;这是去年没事和一个女生一个小时完成的，算是JS基础！ 也可以把背景颜色的弄成黑色的！

下方有正确和错误计数，以及可以按方向键加速下落等

 

 

代码

< HTML >

< HEAD >

     < TITLE > 山寨金山打字程序 < / TITLE>

     < meta http - equiv = " Content-Type "  content = " text/html;charset=gb2312 " >

< / HEAD>

< style type = " text/css " >

body

{

    overflow:hidden;

    margin: 0 ;
    
    background - color:#fffff;

    font - family:宋体;
    
    font - weight: 200 ;

}

DIV.#heike

{

    overflow:hidden;

    position:relative;

    top: 5 % ;

    width: 90 % ;

    height: 90 % ;

    border - style:solid;

    border - width: 1 ;

    border - color:# 009900 ;

}

< / style>

< script language = " javascript " >

var  string = " ABCDEFGHIJKLMNOPQRSTUVWXYZ " ;

var  strCount;

var  str;

var  Color;

var  Font;

var  cross = 0 ;

var  pass = 0 ;

var  timer = 500 ;

var  oldtime;

function  OnLoad()

{

    strCount  =   5 ;

    str  =  [];
    
    let  =  [];
    
    Color  =  [];

    Color[ 0 ]  =   " #ff2211 " ;                                        // 文字的颜色

    Color[ 1 ]  =   " #ff3311 " ;

    Color[ 2 ]  =   " #ff5511 " ;

    Color[ 3 ]  =   " #ff8811 " ;

    Color[ 4 ]  =   " #ffBB99 " ;

    Color[ 5 ]  =   " #1ff4f1 " ;

    Color[ 6 ]  =   " #ff5566 " ;

    Color[ 7 ]  =   " #668899 " ;

    Color[ 8 ]  =   " #99BBfA " ;

    Color[ 9 ]  =   " #fECECC " ;

    Font =   " 40px " ;
    
       


    setTimeout( " strik() " ,timer);

}

function  strik()

{

     for ( var  i = 0 ;i < strCount;i ++ )

    {

         if ( typeof (str[i])  !=   " undefined " )                     // 如果字符串存在

        {

             if (str[i][ " Carch " ].style.pixelTop  >  heike.clientHeight)

            {

                str[i][ " Carch " ].outerHTML  =   "" ;

                 delete  str[i][ " Level " ];                      // 删除数组元素

                 delete  str[i][ " Speed " ];

                 delete  str[i][ " Carch " ];

                 delete  str[i];
                 delete  let[i];
                
                cross ++ ;
                 // alert(cross);
                document.getElementById( " textfield2 " ).value = " - " + cross;
                
                 if (cross >= 100 )
                {
                    alert( " 游戏结束！ " );
                     return ;
                }

            }

             else

            {

                str[i][ " Carch " ].style.pixelTop  +=  str[i][ " Speed " ];
        
            }
            

        }

         else   if (Math.random() < 0.25 )                               // 随机小数

        {

            str[i]  =   new  Array();

            str[i][ " Level " ]  =  Math.round(Math.random() * 4 );

            str[i][ " Speed " ]  =  (Math.round(Math.random() * str[i][ " Level " ])  << 2 ) + 10 ;

            document.all[ " heike " ].insertAdjacentHTML( " AfterBegin " , " " + i + " '> " + randomLetter(i) + " " );

            str[i][ " Carch " ]  =  document.all[ " SPAN_ " + i];

            str[i][ " Carch " ].style.fontSize  =  Font;                                                                          // 字体

            str[i][ " Carch " ].style.position  =   " absolute " ;         // 位置

            str[i][ " Carch " ].style.pixelLeft  =  Math.round(Math.random()  * heike.clientWidth);                                                   // x坐标

            str[i][ " Carch " ].style.pixelTop  =   - str[i][ " Carch " ].offsetHeight;                                                                  // y坐标

            str[i][ " Carch " ].style.color  =  Color[str[i][ " Level " ] + 5 ];                                                                          // 颜色

           /*   str[i]["Carch"].style.filter = "glow(Color="+Color[str[i] ["Level"]]+",Strength=5)";                                            //滤镜效果
*/
            str[i][ " Carch " ].style.zIndex  =  str[i][ " Level " ];      // z-Index

        }

    }

    setTimeout( " strik() " ,timer);

}

function  randomLetter(n)
{
     var  rNum = parseInt(Math.random() * 26 );
     while (checkNan(rNum) == false )
    {
        rNum = parseInt(Math.random() * 26 );
    }
    let[n] = rNum;
//     alert(rNum);
//     alert(string.substring(rNum,rNum+1));
     return  string.substring(rNum,rNum + 1 );
    
}

function  checkNan(rNum)
{
    
     for  ( var  i = 0 ; i < strCount; i ++ )
    {
         if (let[i] == " undefined "   ||  let[i] == rNum)
             return   false ;
    }
    
     return   true ;
}

function  deleteLet()
{
     var  asNum = event.keyCode;
     for  ( var  i = 0 ; i < strCount; i ++ )
    {
         // alert(asNum+"   "+(let[i]+65));
         if ((let[i] + 65 ) == asNum)
        {
                str[i][ " Carch " ].outerHTML  =   "" ;
                 delete  str[i][ " Level " ];                      // 删除数组元素

                 delete  str[i][ " Speed " ];

                 delete  str[i][ " Carch " ];

                 delete  str[i];
                 delete  let[i];
                pass ++ ;
                document.getElementById( " textfield " ).value = pass;
                 if (pass % 10 == 0   &&  timer >= 100 )
                {
                    timer += 100 ;
                    oldtime = timer;
                }
                 return ;
        }
        
    }
     if (event.keyCode == 40 )
    {
       timer = oldtime;
    }

}
function  reuturntime()
{
    timer = 500 ;
}
document.onkeyup = reuturntime;
document.onkeydown = deleteLet;

< / script>

< BODY onLoad = " OnLoad() " >

< table width = " 100% "  height = " 100% "  border = " 0 "  cellspacing = " 0 "  cellpadding = " 0 " >

< tr >< td align = " center "  height = " 100% " >< div id = " heike " >< / div>< / td >< / tr>

< tr >< td align = " center "  style = " padding:5;font-size:9pt;color:#FFFFFF; " >< p > 得分：
       < input type = " text "  name = " textfield "  id = " textfield " >
  失分：
   < input type = " text "  name = " textfield2 "  id = " textfield2 " >
< / p>
     < p > 使用 IE  6.0  以上版本或以IE 为核心的浏览器浏览本页， 1024 *   
      
      768分辨率为佳  < / p>
     < / td>< / tr >
< / table>

< / BODY>

< / HTML>

 

 

转载于:https://www.cnblogs.com/Simcoder/archive/2010/04/21/1717284.html