用javascript寫星際飛機大戰游戲

在github里看到了個不錯的腳本游戲，決定親自動手來寫，效果如下

 

下面是代碼的思路分享

把整個代碼理解消化確實不容易，但是如果你堅持看完相信你一定會有收獲

如果沒興趣可以直接點擊下面的鏈接 復制代碼 開玩：

http://www.cnblogs.com/demonxian3/p/6241755.html

 

1丶首先准備好素材

游戲的元素有：飛機 敵機 子彈 背景 暫停

 

 

素材的大小可以通過drawImage()來改變其大小，因此不需要太糾結素材多少像素

 

創建一個html文件 和一個js文件 

然后開始編輯該html文件

 

2.寫一個畫布：

<canvas id="canvas" width=500 height=500 style="border:1px solid #c3c3c3"></canvas>

 

 

3.獲取畫布對象

canvas = document.getElementById('canvas') 

cxt = canvas.getContext('2d');

 

 

4.設置畫布屬性

var boxx=0

var boxy=0

var boxwidth=500

var boxheight=500

 

 

 

 **************************畫飛機****************************

 

5.聲明飛機相關的變量

飛機橫坐標 縱坐標 寬度 高度 這些都是為下面的drawImage做准備的

var planex;

var planey;

var planewidth=60;

var planeheight=60;

var planeImage = new Image();

planeImage.src="images/hero.jpg";  //引入圖片

 

6.布置飛機初始位置

planex = (boxwidth - planewidth) / 2   //畫布的中央

planey = boxheight - planeheight　　　　 //畫布的底端

因為這里的坐標(x,y)指的是飛機左上角的坐標，因此需要把飛機的長度算上 

 

 

7.畫出飛機

有了坐標和寬高就可以把飛機畫出來了

cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);

 

現在可以打開網頁測試下，看看飛機是否畫出來了，

如果沒有畫出來，那么請別灰心，耐心的查一下有什么錯誤的地方

如果成功顯示出飛機了那么go on！

 

 

飛機畫出來了但是飛機不會動 

那么怎么能讓飛機動呢？ 

改變其坐標！

那么什么時候動呢？

按下鍵盤上的 ↑ ↓ ← → 鍵的時候

我們知道鍵盤有個事件驅動 onkeydown

而這個事件驅動有個屬性keycode 

用這個屬性可以綁定上下左右鍵對應的函數

如下可以看到對應的keycode碼

 

下面是四個我們需要的按鍵的對應碼

左 : 37

上 : 38

右 : 39

下 : 40

 

光有事件驅動onkeydown還不夠，我們還需要實時監聽事件的發生

說的通俗點就是 你在任意時刻去按鍵盤 程序都能夠及時響應

下面這個函數就可以幫我們實時監聽事件

addEventListener()函數

語法

element.addEventListener( event,  function,  useCapture)

 

參數解釋：

element    表示需要使用該方法的對象 

event        表示監聽什么事件  

function    表示監聽到事件后做出什么響應 

useCapture 表示在捕獲或冒泡執行 默認為false 我們就按照默認來

聲明一個運動跨度變量 這個變量的作用你馬上就能看到了

var sp=0;

 

 

8.監聽body元素 響應事件

下面四個if語句用來判斷飛機是否出界

 

body.addEventListener('keydown',function (event){
            switch(event.keyCode){
                case 37 : if(planex>boxx){sp=8}else{sp=0}planex-=sp;break;
                case 38 : if(planey>boxy){sp=8}else{sp=0}planey-=sp;break;
                case 39 : if((planex+planewidth)<boxwidth){sp=8}else{sp=0}planex+=sp;break;
                case 40 : if((planey+planeheight)<boxheight){sp=8}else{sp=0}planey+=sp;break;
                default:break;
            }
        },false)

 

 

到這里 你可以測試一下飛機是否可以動起來了

當然我會直接告訴你結果----不能動！！

因為上面的事件監聽改變的只是飛機的坐標，但是圖片還在原地

為了讓圖片跟着坐標動起來，我們需要寫一個函數

 

 

9.更新飛機圖片位置函數 

function drawplane(){

  cxt.clearRect(boxx,boxy,boxwidth,boxheight);                      //清除所有就元素

  cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);　　//重新畫出飛機

}
 

var fps  　　　　　　　　　　　　　　　　　　　　　　　　     //其實只是用來調飛機流暢度

var gameTimmer = setInterval (run,1000/fps);　　　　  //gameTimer是游戲的總驅動計時器

 

function run(){　　　　　　　　　　　　　　　　　　　        //drawplane函數自動運行

 drawplane();　　　　　　　　　　　　　　　　　　 　　　

}

 

 **************************畫子彈****************************

 

 10.設置子彈的相關變量 也是為drawImage函數的五個參數所做准備

var bulletx;

var bullety;

var bulletwidth=10;

var bulletheight=10;

var bulletImage=new Image();  

bulletImage.src="images/bullet.png"

 

 

11.存放子彈的彈夾-----數組

用數組來存放子彈方便我們訪問每個子彈對象

var herobullet;                    //用來表示單個子彈

var allbullets = new Array();      //用來表示所有子彈

 

12.設置子彈初始位置

我們希望 每顆子彈的起始位置是隨着飛機而改變的 因此把飛機的變量引進來

bulletx=planex+planewidth/2

bullety=planey+bulletheight

 

13.聲明子彈的構造函數、

這部分有點難理解 也是本代碼的難點

下面聲明的構造函數是用來制作子彈的

 

function bullet(x,y){

this.x=x;                //子彈橫坐標

this.y=y;　　　　　　　　　　//子彈縱坐標

this.islive=true;　　     //子彈存活屬性

this.timmer=null;　　　　　//子彈計時器 用來使得子彈自己運動

    this.run = function run(){    //子彈的運動方法

       if(this.islive==false||this.y<-10){  //判斷子彈是否存活或出界

       clearInterval(this.timmer);  //停止運動

　　  this.islive=false;

        }else{

        this.y-=20     　　　　　　//讓子彈往上飛

 　　 }

    }

}

 

 14.生產子彈

 有了做子彈的秘方 那么就可以開始制造子彈了

 在這里可以使用到我們之前定義的數組存放每顆子彈

function producebullet(){

  herobullet = new bullet(bulletx,bullety);  //生產子彈
 
  allbullets.push(herobullet);  //存放子彈

  var timmer = setInterval("allbullets[" + （allbullets.length-1） +"].run()" , 50); //設置子彈子彈運行 這里用到eval可以將字符變為有效方法 

  allbullets[allbullets.length-1].timmer=timmer;  //將自動運行的子彈方法賦予到子彈的屬性

}

 

15.畫出子彈

同飛機的道理相同：光改變坐標是看不出效果，還需要把圖片位置也更新了

function  drawbullet(){

  for (var i=0;i<allbullets.length;i++){ //遍歷每顆子彈

  if(allbullets[i].islive){  //如果子彈掛了 就不需要再畫出來了

  cxt.drawImage(bulletImage,allbullets.x,allbullets.y,bulletwidth,bulletheight);

  }

  }

}

 

 16.讓drawbullet函數自動運行

然后把drawbullet函數 放到之前定義的run函數里 不是子彈的方法

function run(){

  drawplane();

  drawbullet();

}

 

17.讓子彈自動生產

給生產子彈的函數加個計時器

btimmer = setInterval(producebullet,500)

 

 **************************畫敵機****************************

我們來回顧下畫子彈的步驟

 

設置相關屬性 ->  確定初始坐標 -> 子彈構造函數 ->  生產子彈 -> 畫出子彈 -> 自動生產和繪畫

 

畫敵機的步驟和上面的步驟是一樣的

 

但是有個不同的點 那就是敵機初始的橫坐標應該是隨機的  而縱坐標都是0 （頂部位置）

 

說到隨機 Math.random()函數 是不可以缺少的

但這個只能產生0~1的隨機數

因此 Math.random*500   范圍就是0~500范圍

最后四拾伍入   Math.ceil(Math.random*500);

 

18.設置敵機的相關屬性

 

var enemyx;

var enemyy;

var enemywidth=30

var enemyheight=30

var allenemys = new Arr();  //和子彈一樣 數組用來存放所有敵機

var heroenemy;              //用來表示其中單個敵機

var enemyImage= new Image();

enemyImage.src="images/enemy.png"

 

 

19.敵機構造函數

 

//構造函數
//下面基本上和子彈差不多 就不解釋了
function enemy(x,y){

  this.x=x;

  this.y=y;

  this.islive=true;

  this.timmer=null;

  this.run = function run(){

   if (this.islive==false||this.y>boxheight){

   clearInterval(this.timmer);

   this.islive=false;

   }else{

   this.y+=2.5;   

   }

  }

}

20生產敵機

 

//生產隨機位置的敵機

function produceenemy(){

  enemyx=Math.ceil(Math.random()*500);  //產生隨機初始位

  enemyy=33;                            //在畫布頂端產生敵機

  heroenemy = new enemy(enemyx,enemyy);  //生產敵機

  allenemys.push(heroenemy);            //加入數組

  var timmer = setInterval("allenemys[" + (allenemys.length-1) + "].run()"); //啟動run函數並使其自動運行

  allenemys[allenemys.length-1].timmer=timmer;   //run函數賦予在enemy屬性

}

 

 

21畫出敵機

//畫出敵機

function drawenemy(){

  for (var i=0;i<allenemys.length;i++){

  if(allenemys[i].islive){

   cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight)

  }

 }

}

 

 

22自動生產敵機 更新敵機

最后把 drawenemy 加入run函數里  給produeenemy 加個計時器

function run(){

  drawplane();

  drawbullet();

  drawenemy();

}

etimmer = setInterval(produceenemy,800);

 

 **************************擊中敵機****************************

飛機 敵機  子彈 都畫好了 而且都可以動起來了 ， 現在來寫子彈碰到敵機時敵機消失的規則

 

上圖可以清晰的看出子彈擊中敵機的范圍

擊中條件：

bulletx + bulletwidth > enemyx

bulletx < enemyx + enemywidth

bullety < enemyy + enemyheight

function checkbullet{

　　for(var i=0;i<allenemys.length;i++){  //遍歷敵機

　　　　if (allenemys[i].islive){

　　　　var e = allenemys[i];              //獲取敵機對象

　　　　}

　　　　for(var j=0;j<allbullets.length;j++){  //遍歷

　　　　　　if(allbullets[j].islive){

　　　　　　　　var b = allbullets[j];

　　　　　　　　if(b.x+b.width>e.x&&b.x<e.x+e.width&&b.y<e.y+e.height){ //這里使用到上面的規則

　　　　　　　　　　b.islive=false;  //在構造函數里只要islive的屬性為假 就會停止run函數的計時器

　　　　　　　　　　e.islive=false;  //因此子彈和敵機相關計時器都被clear掉了

　　　　　　　　　　score+=100;  //加分

　　　　　　　　}

　　　　　　}

　　　　}

　　}

}

 

**************************擊中我機****************************

我機的死亡的規則：

 

 

擊中條件：

enemyx+enemywidth > planex

enemyx < planex + planewidth

enemyy + enemyheight > planey

 

function checkenemy(){

　　for(var i=0;i<allenemys[i].length;i++){

      　　if(allenemys[i].islive){

　　　　　　var e = allenemys[i];

　　　　　　if(e.x+e.width > planex && e.x < planex + planewidth && e.y + e.height > planey){

　　　　　　　　e.islive=false;

　　　　　　　　stop();

　　　　　　}

　　　　}

     }

}

 

 **************************停止一切****************************

然后把stop函數寫出來

function stop(){

  clearInterval(btimmer);　　　　//停止生產子彈

  clearInterval(etimmer);　　　　//停止生產敵機

  clearInterval(gameTimmer);    //停止游戲

  allenemys.length=0;　　　　   　//初始化

  allbullets.length=0;　　　　　　//初始化

  show.innerHTML=score;　　　    //統計總分

  score=0;

}

 

 **************************啟動一切****************************

然后把checkbullet函數 和checkenemy函數 放到游戲驅動run 里頭

function run(){

  drawplane();  //畫飛機

  drawenemy();  //畫敵機

  drawbullet();  //畫子彈

  checkbullet(); //檢查子彈

  checkenemy();  //檢查敵機

  drawscore();　　//實時加分

}

 

 

最后設置一下加分相關的標簽

這個標簽用來顯示當前分數

<div style="position: absolute;top: 90px;left: 30px;
font-weight: bold;font-size: 40px;color:cornflowerblue">
<span id="show">0</span></div>

 

 

獲取標簽

show = document.getElementById('show');

 

 

實時計分

function drawscore(){

  show.innerHTML=score;

}

 

 

當然還可以加一些小細節，比如暫停按鈕 彈出窗口統計得分

還可以玩好玩的，比如飛機無敵 無限子彈 超級子彈 無敵並排子彈 總之你自己想怎么改都行

源代碼:http://www.cnblogs.com/demonxian3/p/6241755.html