您现在的位置:首页 >> 前端 >> 内容

用OO方式写键盘字母小游戏

时间:2013/8/30 9:36:13 点击:

  核心提示:htmlhead title0.0/title script window.onload=function Test(){alert(游戏提示,本游戏没有关卡限制,每次得分超过整百时,进入下一关,点击...
<html>

 <head>

  <title>0.0</title>

  <script>

   window.onload=function Test(){

    alert("游戏提示,本游戏没有关卡限制,每次得分超过整百时,进入下一关,点击确定开始游戏吧!");

    var game=new Game();

    game.start();

   }

   var times;

   var words;

   var down=2;

   var fen=100;

   var createCharDiv=new Array();

   function Game(){

    //alert("coming game()");

    words=new Array("A","B","C","D","E","F","G","H","I","J","K","L","N","M","O","P","Q","R","S","T","U","V","W","Z","X","Y");

    var createBackground=new CreateBackground();

    var createScore=new CreateScore();

    //var createCharDiv=new CreateCharDiv();

    this.start=function(){

     for(var i=0;i<5;i++){

      createCharDiv[i]=new CreateCharDiv();

     }

    

     times=setInterval(function(){

      for(var i=0;i<5;i++){

       createCharDiv[i].move();

      }                

     },50);

    

     document.onkeydown=keydown;

     function keydown(e){

      var real=String.fromCharCode(e.which);

      //alert(real);

      for(var i=0;i<5;i++){

       if(createCharDiv[i].pHTML()==real){

        //alert("zhong");

        createScore.addScore();

        createCharDiv[i].againTop();

       }

      }     

     }

    }

    

    

   }

   function CreateBackground(){

    //alert("coming CreateBackground()");

    var newBackground;

    function initBackground(){

     //alert("coming initBackground()");

     newBackground=document.createElement("p");

     //alert(newBackground);

     newBackground.style.width="500px";

     newBackground.style.height="600px";

     newBackground.style.border="3px solid black";

     newBackground.style.position="absolute";

     //newBackground.style.background="pink";

     document.body.appendChild(newBackground);

    }

    initBackground();

   }

   function CreateScore(){

    //alert("1");

    var scoreboard;

    var score=0;

    function initScore(){

     //alert("2");

     scoreboard=document.createElement("p");

     scoreboard.style.width="100px";

     scoreboard.style.height="20";

     scoreboard.style.top="10px";

     scoreboard.style.left="405px";

     scoreboard.style.position="absolute";

     scoreboard.style.border="3px solid black";

     scoreboard.style.background="green";

     scoreboard.innerHTML="得分:"+score;

     document.body.appendChild(scoreboard);

     //alert(scoreboard);

    }

    initScore();

    

    this.addScore=function(){

     score+=10;

     scoreboard.innerHTML="";

     scoreboard.innerHTML="得分:"+score;

     if(score==fen){

      alert("亲,即将进入下一关,请做好准备!");

      down++;

      fen+=100;

      //alert("fen"+fen);

      for(var i=0;i<5;i++){

       createCharDiv[i].againTop();

      }

     }

     

    }

   }

   

   

   function CreateCharDiv(){

    //alert("CreateCharDiv()");

    var newDiv;

    var numbs=0;

    function initCharDiv(){

     //alert("initCharDiv()");

 

     num=parseInt(Math.random()*words.length);

     //alert(words.length);

     newDiv=document.createElement("p");

     newDiv.style.width="30px";

     newDiv.style.height="30px";

     newDiv.style.border="1px solid black";

     newDiv.style.position="absolute";

     newDiv.style.top="20px";

     //规定范围内取随机数   *(上限-下限+1)+下限

     //newDiv.style.left=parseInt(Math.random()*480)+"px";

     newDiv.style.left=parseInt(Math.random()*(470-20+1)+20)+"px";

     newDiv.style.background="red";

     newDiv.innerHTML=words[num];

     document.body.appendChild(newDiv);

    }

    initCharDiv();

    

    this.move=function(){

     //alert("move()");

     newDiv.style.top=parseInt(newDiv.style.top)+down;

     if(parseInt(newDiv.style.top)>580){

      clearInterval(times);

      alert("oh oh oh , game over !");

     }

    }

    this.pHTML=function(){

     return newDiv.innerHTML;

    }

    this.againTop=function(){

     newDiv.style.display="none";

      initCharDiv();          

    }

    

   }

   

  </script>

 </head>

 <body> 

 </body>

</html>

Tags:用O OO O方 方式 
作者:网络 来源:不详