js OO写的一个键盘字母游戏

                       今天用OO写了一个键盘字母的游戏,可以用于平常的键盘练习,写的不好的地方谢谢指出。   

                      主要实现了效果:

 

                     1.实现了积分的累加;

 

                     2.积分到一定程度后升级;

 

                     3.当字母下落到一定程度的时候就游戏失败。

 

                  附加效果图:

                 

          

 

                   以下贴出代码:

 

        

<html>
 <head>
  <title>键盘游戏完整版</title>
 </head>
 <script>
  var speet=1; //移动的速度
  function createDiv(){
   var createbutton=document.createElement("div");
   createbutton.style.width="800px";
   createbutton.style.height="1000px";
   createbutton.style.border="2px solid";
   document.body.appendChild(createbutton);
  }
  function createSource(){
  var createSource;   
  var score=500; //升级的最低积分
  var sco=0;  //积分
  var i=1;  //等级
   init();
   function init(){
       createSource=document.createElement("div");
    createSource.style.width="100px";
    createSource.style.height="20px";
    createSource.style.border="1px solid blue";
    createSource.innerHTML="积分:"+sco;
    createSource.position="absolute";
    document.body.appendChild(createSource);
   }
   this.leijia=function(){
    sco+=10;
    createSource.innerHTML="积分:";
    createSource.innerHTML="积分:"+sco;
    //alert(zhengbai);
    if(sco == score){
     score+=500;
     alert("恭喜升级:"+i++);
     speet+=1;
     alert("speett-----------------"+speet);
    }
   }
  }
  function CharA(charDiv){
    var CharArray=new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","S","Y","Z");
    var a;
    init();
   function init(){
    a=document.createElement("div");
    var charDiv=CharArray[parseInt(Math.random() * 26)];
    a.innerHTML=charDiv;
    a.style.width="50px";
    a.style.position="absolute";
    a.style.height="50px";
    a.style.top="50px";
    a.style.left=Math.random() * 100 + Math.random() * 500 + 50 + "px";
    document.body.appendChild(a);
   }
   this.shoaa=function(){
    init();
    
   }
   this.move=function(){
    a.style.top=parseInt(a.style.top)+speet+"px";
    if(parseInt(a.style.top)>700){
     alert("game over");
     clearInterval(time);
    }
   }
   this.charinner=function(){
    return a.innerHTML;
   }
   this.hidden=function(){
    a.style.display="none";
    document.body.removeChild(a);
   }
  }
  function Game(){
   var chars=new Array();
   var cs=new createSource();
   createDiv();
   function initData(){
    for(var i=0;i<10;i++){
    var charA=new CharA();
    chars.push(charA);
    }
   }
   initData();
   this.start=function(){
    time=setInterval(function (){
    for(var i=0;i<chars.length;i++){
      chars[i].move();
    }
    },100);
   }
   document.οnkeydοwn=function(e){
    for(var i=0;i<chars.length;i++){
     //alert(chars[i].innerHTML);
     if(String.fromCharCode(e.which)==chars[i].charinner()){
      chars[i].hidden();
      chars[i].shoaa();
      cs.leijia();
     }
    }
   } 
  }
  window.οnlοad=function(){
   var game=new Game();
   game.start();
  }
 </script>
 <body>
 </body>
</html>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值