JavaScript用200行代码制作打飞机小游戏实例

window.onload = function(){  var Base = new base();  var start = document.getElementById('start');  start.onclick = function(){    Base.fadehide('start');    getId('path').style.display='block';    Base.fadeshow('path');    Base.createBullteAndMovePlain();  }}

   this. fadehide = function (name){      var   i = 1;      var odiv = document.getElementById(name);      function show(){          odiv.style.opacity = i;        i-=0.1;          if(i<0){odiv.style.display = 'none';clearInterval(t);         }      }       var t = setInterval(show,10);       return this;    }    this.fadeshow = function (name){      var i = 0;      var odiv = document.getElementById(name);      function show(){          odiv.style.opacity = i;        i+=0.1;          if(i>1){clearInterval(t);}      }       var t = setInterval(show,100);        return this;    }

    //生成子弹      this.createBullteAndMovePlain = function (){      var arr= [];      var bulletNum=[];      var way = path.getElementsByClassName('way');      var play =document.getElementById('bullet');      var flag =0;      var score=0;      //获取按键      document.onkeydown = function(evt){        var ev = evt||event;        //left keyCode is 39        //right keyCode is 37        switch(ev.keyCode){          case 39:          flag=(flag+1)%5;          break;          case 37:          if(flag==0){          flag=Math.abs(flag-4);          }else if(flag>0){            flag=(flag-1)%5;          }          break;        }      //移动飞机          function movePlain (){            var plain = document.getElementById('player');            switch(flag){            case 0:player.style.left='0px';break;            case 1: player.style.left='100px';break;            case 2: player.style.left='200px';break;            case 3: player.style.left='300px';break;            case 4:player.style.left='400px';break;          }          }          movePlain();      }      function createBulltes(){        //生成敌人          var newenemy = document.createElement('img');          newenemy.src = 'img/enemy.png';          newenemy.style.position='absolute';          newenemy.style.zIndex='5';          var enemyTop=0;          var sign=0;          var randomNum = Math.random()*5;          sign=Math.floor(randomNum);          newenemy.style.top='0px';          switch(sign){            case 0:newenemy.style.left='0px';break;              case 1: newenemy.style.left='100px';break;              case 2: newenemy.style.left='200px';break;              case 3: newenemy.style.left='300px';break;              case 4:newenemy.style.left='400px';break;          }way[0].appendChild(newenemy);          arr.unshift(newenemy);      //生成子弹              var bullet = document.getElementById('bullet');          var newbullet = document.createElement('img');          var plain = document.getElementById('player');          newbullet.className='bullet';          newbullet.style.position='absolute';          newbullet.style.top='560px';            newbullet.src='img/bullet.png';          newbullet.style.zIndex='4';                var bulletTop=0;          switch(flag){            case 0: newbullet.style.left='45px';player.style.left='0px';;break;            case 1: newbullet.style.left='145px';player.style.left='100px';;break;            case 2: newbullet.style.left='245px';player.style.left='200px';break;            case 3: newbullet.style.left='345px';player.style.left='300px';break;            case 4: newbullet.style.left='445px';player.style.left='400px';break;          }way[2].appendChild(newbullet);          bulletNum.unshift(newbullet);        //分数图片          function scoreup(score){            var imgs = document.getElementsByClassName('score');            var imgsnum=score.toString().split('');            for(var i=0; i<imgsnum.length; i++){              imgs[4-i].src='img/'+imgsnum[i]+'.png';              }        }        //判定触碰        function decide(){        for(var i = 0;i<arr.length; i++){          for(var j=0; j<bulletNum.length; j++)        if(arr[i].offsetLeft==(bulletNum[j].offsetLeft-45)&&((arr[i].offsetTop+98)>bulletNum[j].offsetTop-10&&(arr[i].offsetTop+98)<bulletNum[j].offsetTop+10)){          score++;          scoreup(score);          arr[i].parentNode.removeChild(arr[i]);            bulletNum[j].parentNode.removeChild(bulletNum[j]);                }          }          var player=document.getElementById('player');          for(var i=0; arr.length; i++){            if(arr[i].offsetLeft==player.offsetLeft&&(arr[i].offsetTop+70)==player.offsetTop){              alert('game over');location.reload();            }          }        }        //放在一起的移动          function bulletmove (){                  bulletTop=newbullet.offsetTop;                    enemyTop=newenemy.offsetTop;                //    alert('buller:'+newbullet.offsetLeft);                  //  alert(newenemy.offsetLeft);                function move (){                  bulletTop-=6;                  enemyTop+=1;                  newbullet.style.top=bulletTop+'px';                  newenemy.style.top=enemyTop+'px';                   decide();                  if(bulletTop==0&&enemyTop==560){                        newbullet.style.opacity='0';                          newenemy.style.opacity='0';                          clearInterval(t);                          }else if(bulletTop==0){                          newbullet.parentNode.removeChild(newbullet);                            bulletNum.pop();                          }else if(enemyTop==560){                          newenemy.parentNode.removeChild(newenemy);arr.pop();                          }                }                    var t = setInterval(move,20);            }                  bulletmove();          }          var s=setInterval(createBulltes,3000);      }  }