排列三字谜

仿微信打飛機游戲的javascript代碼

2014-02-08 14:25:40來源:runjs作者:ZaneYoung

這是一個用javascript編寫的仿微信打飛機小游戲的源代碼。三個文件,main.js(主函數),entity.js(實體類與工廠類),util.js(工具類),基本原理就是把位置信息保存在對象里面……

今天閑來無事,于是就打算教一個初學javascript的女童鞋寫點東西,因此為了兼顧趣味性與簡易程度,果斷想到了微信的打飛機小游戲。。

本來想用html5做的,但是畢竟人家才初學,連jquery都還不會,所以最終還是決定用原生的javascript。雖說相對于園內的高手們而言代碼算不上優雅,效率算不上高,不過對于初學者來練手還是足以。

三個文件,main.js(主函數),entity.js(實體類與工廠類),util.js(工具類),基本原理就是把位置信息保存在對象里面,然后在setInterval里面統一對所有對象進行更新顯示。程序所用到的飛機與子彈圖片都是從微信上截屏得來的。

\

再上代碼:
 

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打飛機</title>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/entity.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">

window.onload=function(){
 Main.init();
 Util.g("startBtn").onclick=function(){
  Main.start();
  this.style.display="none";
 }
}
</script>
</head>
<!--
自己
敵機
子彈
-->
<body>
<div id="parent" style="
        margin: 0 auto;
        width:350px; height:480px;
        background-color:#c3c9c9;
        position: relative;
        overflow:hidden;">
 <div style="
     position:absolute;
        left:5px;
        top:5px;">積分:<span id="score">0</span></div>
    <button
     style="
      position:absolute;
         left:150px;
            top:240px;
            display:block;"
        id="startBtn">
點擊開始
</button>

</div>
</body>
</html>
 

main.js:

// JavaScript Document
var Main={
 init:function(){
  Util.init();
 },
 _totalEnemies:8,
 start:function(){
  //初始化敵機
  enemyPlaneFactory.creatEnemyPlane(this._totalEnemies);
  
  //初始化自己
  selfPlane.init();
  
  //初始化子彈
  bulletFactory.creatBullet(100);
  //開始渲染畫面
  this._render();
  //開始射擊子彈
  this._startShoot();
  
  //初始化鍵盤事件響應
  this._initEvent();
 },
 
 //渲染定時器
 _render_t:null,
 _render:function(){
  this._render_t=setInterval(function(){
   var enemys=enemyPlaneFactory.enemys;
   for(var i in enemys){
    var enemy=enemys[i];
    enemy.move(0,enemy.speed);
    
    if(enemy.x+enemy.e.width>selfPlane.x+10
     &&enemy.x<selfPlane.x+selfPlane.e.width-10
     &&enemy.y+enemy.e.height>selfPlane.y+selfPlane.e.height/2
     &&enemy.y<selfPlane.y+selfPlane.e.height){
      enemy.isDied=true;
      clearInterval(Main._render_t);
      clearInterval(Main._startShoot_t);
      var b=window.confirm("對不起,您已經掛了,是否重玩?")
      if(b){
       window.location.reload();
      }
    }
    
    if(enemy.y>Util.windowHeight||enemy.isDied){
     enemy.restore();
    }
   }
   
   var bullets=bulletFactory.bullets;
   for(var i in bullets){
    var bullet=bullets[i];
    bullet.move(0,-bullet.speed);
    
    for(var i in enemys){
     var enemy=enemys[i];
     //判斷子彈是否擊中敵機,如果擊中則隱藏子彈,殺死敵機,增加積分..
     if(bullet.y>10
      &&bullet.x>enemy.x
      &&bullet.x<enemy.x+enemy.e.width
      &&bullet.y<enemy.y+enemy.e.height){
       enemy.isDied=true;
       bullet.e.style.top=-bullet.e.height;
       selfPlane.score+=50;
       Util.scoreSpan.innerHTML=selfPlane.score+"";
     }
    }
   }
   
   
  },1000/15);
 },
 //射擊定時器
 _startShoot_t:null,
 _startShoot:function(){
  var i=0;
  var bullets=bulletFactory.bullets;
  var bulletsCount=bullets.length;
  this._startShoot_t=setInterval(function(){
   if(i>=bulletsCount){
    i=0;
   }
   var bullet=bullets[i];
   bullet.moveTo(selfPlane.x+selfPlane.e.width/2-bullet.e.width/2,selfPlane.y-bullet.e.height-3);
   i++;
  },300);
 },
 keyMove:10,
 _initEvent:function(){
  window.onkeydown=function(e){
   /*
   37:左
   38:上
   39:右
   40:下
   */
   var keynum;
   var left=37,up=38,right=39,down=40;

   if(window.event){// IE
     keynum = e.keyCode
   }else if(e.which) {// Netscape/Firefox/Opera
     keynum = e.which
   }
   
   switch(keynum){
    case left:
    selfPlane.move(-Main.keyMove,0);
    break;
    case up:
    selfPlane.move(0,-Main.keyMove);
    break;
    case right:
    selfPlane.move(Main.keyMove,0);
    break;
    case down:
    selfPlane.move(0,Main.keyMove);
    break;
    
    default:
    break;
   }
   
   //console.log(keynum);
  }
  
 }
 
 
}
 

entity.js:

//自身的對象
var selfPlane={
 x:0,
 y:0,
 score:0,
 e:null,
 init:function(){
  this.x=(Util.windowWidth-Util.selfPlaneElement.width)/2;//相對于父窗體的x偏移(css:left)
  this.y=Util.windowHeight-Util.selfPlaneElement.height;//相對于父窗體的y偏移(css:top)
  this.e=Util.selfPlaneElement;//對應的dom元素
  Util.selfPlaneElement.style.left=this.x+"px";
  Util.selfPlaneElement.style.top=this.y+"px";
  Util.parentElement.appendChild(this.e);
 },
 move:function(moveX,moveY){
  var x=this.x+moveX;
  var y=this.y+moveY;
  
  if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){
   return ;
  }
  if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){
   return ;
  }
  this.x=x;
  this.y=y;
  
  this.e.style.left=this.x+"px";
  this.e.style.top=this.y+"px";
 },
 moveTo:function(x,y){
  
  if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){
   return ;
  }
  if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){
   return ;
  }
  this.x=x;
  this.y=y;
  
  this.e.style.left=this.x+"px";
  this.e.style.top=this.y+"px";
 }
}


//敵機的類
var enemyPlane=function(x,y,speed){
 this.x=x;
 this.y=y;
 this.e=Util.enemyPlaneElement.cloneNode(true);
 this.e.style.left=x;
 this.e.style.top=y;
 this.e.style.display="none";
 Util.parentElement.appendChild(this.e);
 this.e.style.display="block";
 this.speed=speed;
 this.isDied=false;
}
//prototype:原型
enemyPlane.prototype.move=function(moveX,moveY){
 this.x+=moveX;
 this.y+=moveY;
 this.e.style.left=this.x+"px";
 this.e.style.top=this.y+"px";
}
//敵人復活
enemyPlane.prototype.restore=function(){
 this.x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);
 this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;
 this.speed=2+Math.random()*4;
 this.e.style.left=this.x+"px";
 this.e.style.top=this.y+"px";
 this.isDied=false;
}
//敵機工廠
var enemyPlaneFactory={
 enemys:[],
 creatEnemyPlane:function(n){
  for(var i=0;i<n;i++){
   //0~1 乘以窗口寬度,得到的就是從0~窗口寬度的一個隨機x值
   var x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);
   var y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;
   var speed=2+Math.random()*4;
   var ep=new enemyPlane(x,y,speed);
   this.enemys.push(ep);
  }
 }
}
//子彈
var bullet=function(x,y,speed){
 this.x=x;
 this.y=y;
 this.speed=speed;
 this.e=Util.bulletElement.cloneNode(true);
 this.e.style.left=this.x+"px";
 this.e.style.top=this.y+"px";
 Util.parentElement.appendChild(this.e);
 this.isUsed=false;
}

bullet.prototype.move=function(moveX,moveY){
 this.x+=moveX;
 this.y+=moveY;
 this.e.style.left=this.x+"px";
 this.e.style.top=this.y+"px";
}
bullet.prototype.moveTo=function(X,Y){
 this.x=X;
 this.y=Y;
 this.e.style.left=this.x+"px";
 this.e.style.top=this.y+"px";
}


//子彈恢復
bullet.prototype.restore=function(){
 this.x=Main.self
 this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;
 this.speed=2+Math.random()*4;
 this.e.style.left=this.x+"px";
 this.e.style.top=this.y+"px";
}
//子彈工廠
var bulletFactory={
 bullets:[],
 creatBullet:function(n){
  for(var i=0;i<n;i++){
   var b=new bullet(0,-Util.bulletElement.height,20);
   this.bullets.push(b);
  }
 }
}
 

util.js:

// JavaScript Document
var Util={
 windowWidth:350,
 windowHeight:480,
 selfPlaneElement:null,
 enemyPlaneElement:null,
 bulletElement:null,
 parentElement:null,
 scoreSpan:null,
 g:function(id){
  return document.getElementById(id);
 },
 
 init:function(){
  this.parentElement=this.g("parent");
  
  this.selfPlaneElement=this._loadImg("images/self.gif");
  
  this.enemyPlaneElement=this._loadImg("images/boss.gif");
  
  this.bulletElement=this._loadImg("images/bullet.jpg");
  
  this.scoreSpan=this.g("score");
 },
 
 _loadImg:function(src){
  var e=document.createElement("img");
  e.style.position="absolute";
  e.src=src;
  return e;
 }
}

預覽:http://runjs.cn/detail/hthdv8tw

源代碼下載:http://files.cnblogs.com/Mr-Nobody/打飛機小游戲原生javascript版.zip


贊助商鏈接:

排列三字谜 日本棒球比分 河北十一选五任五遗 中国体彩北单比分直播 三级片免费网站下载 成都沐足排行榜 澳洲幸运5 麻将app下载 日本女优生殖器图片 河北11选5遗漏 日本一本道成人电影 雪缘园 东莞酒店小姐大阅兵 一部老台湾三级片 麻将来了微信版本 江苏7位数*规则 搜 为什么手机上赌博不抓