当前位置:编程学习 > html/css >>

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

<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].divHTML()==real){
        //alert("zhong");
        createScore.addScore();
        createCharDiv[i].againTop();
       }
      }     
     }
    }
    
    
   }
   function CreateBackground(){
    //alert("coming CreateBackground()");
    var newBackground;
    function initBackground(){
     //alert("coming initBackground()");
     newBackground=document.createElement("div");
     //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("div");
     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("div");
     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.divHTML=function(){
     return newDiv.innerHTML;
    }
    this.againTop=function(){
     newDiv.style.display="none";
      initCharDiv();          
  &nbs
补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,