js實現飛機大戰小游戲

用JavaScript來實現一個鼠標指針控制的飛機大戰小程序，效果圖如下。

1.進入頁面階段

　　

2.第二載入階段效果圖

3.第三核心階段

　　

4.第四暫停階段

5.第五結束階段

實現這個項目的HTML代碼只需要一行，創建一個畫布並且設置寬高到合適，並且要將畫布設置為塊級元素。

<canvas id="canvas" width="480" height="650"></canvas>

 

由上圖可知，這個游戲分為4個階段，在寫項目之前先分析一下每個項目都需要做什么工作。

1.第一階段：加載背景圖片，然后不停的運動，並且在圖片上加一個logo。

2.第二階段是游戲的過度階段，加載過度界面，出現一個小飛機飄過。

3.第三階段是游戲的核心階段。

　　3.1設置自己的英雄飛機的的動態效果和移動方法，並且考慮到飛機發生碰撞的情況進行判斷。

　　3.2 子彈的繪制以及子彈的運動，還有子彈碰到敵方飛機的時候的改變。

　　3.3 設置地方飛機的繪制和移動，以及敵方飛機的各個屬性和與子彈發生碰撞的情況，和與英雄飛機發生碰撞的情況。

4.第四階段判斷鼠標一處畫布的時候游戲暫停

5.當生命值為0的時候進入游戲的第五階段，GAMEOVER。

 

下面是這個項目的核心JavaScript代碼

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        // 0  游戲初始化的一些數據
            // 0.1 把上面游戲的五個階段整理成數字
            const START = 0;
            const STARTTING = 1;
            const RUNNING = 2;
            const PAUSE = 3;
            const GAMEOVER = 4;
            // 0.2 定義一個自己的狀態，時刻跟上面的五個狀態進行比較，然后判斷游戲目前處於哪個階段
            var state = START;
            // 0.3 畫布的信息得獲取過來
            const WIDTH = 480;
            const HEIGHT = 650;
            // 0.4 游戲的分數
            var score = 0;
            // 0.5 我方飛機的生命
            var life = 3;
        // 1  第一階段 游戲歡迎階段
            // 1.1 加載背景圖片
            // 1.1.1  創建背景圖片的dom對象
            var bg = new Image();
            bg.src = "images/background.png";
            // 1.1.2  背景圖片的詳細信息（用對象表示）
            var BG = {
                imgs : bg,
                width : 480,
                height : 852
            }
            // 1.1.3  自定義構造函數，構造背景圖片的
            function Bg(config){
                this.imgs = config.imgs;
                this.width = config.width;
                this.height = config.height;
                // 定義繪制背景圖片的坐標
                this.x1 = 0;
                this.y1 = 0;
                this.x2 = 0;
                this.y2 = -this.height;
                // 定義繪制方法
                this.paint = function(){
                    context.drawImage(this.imgs,this.x1,this.y1);
                    context.drawImage(this.imgs,this.x2,this.y2);
                }
                //圖片要運動
                this.step = function(){
                    this.y1++;
                    this.y2++;
                    // 判斷圖片的臨界值
                    if(this.y1 == this.height){
                        this.y1 = -this.height;
                    }
                    if(this.y2 == this.height){
                        this.y2 = -this.height;
                    }
                }
            }
            // 1.1.4 創建背景圖片的對象
            var abc = new Bg(BG)
            // 1.2 加載LOGO
            var logo = new Image();
            logo.src = "images/start.png";
        // 2  第二階段 游戲過渡階段
            // 2.1 創建圖片的構造
            var loadings = [];
            loadings[0] = new Image();
            loadings[0].src = "images/game_loading1.png";
            loadings[1] = new Image();
            loadings[1].src = "images/game_loading2.png";
            loadings[2] = new Image();
            loadings[2].src = "images/game_loading3.png";
            loadings[3] = new Image();
            loadings[3].src = "images/game_loading4.png"
            // 2.2 圖片的詳細信息
            var LOADINGS = {
                imgs : loadings,
                length : loadings.length,
                width : 186,
                height : 38
            }
            // 2.3 動畫效果的構造
            function Loading(config){
                this.imgs = config.imgs;
                this.length = config.length;
                this.width = config.width;
                this.height = config.height;
                // 在數組中去尋找圖片。得定義一個索引。
                this.startIndex = 0;
                // 開始繪制
                this.paint = function(){
                    context.drawImage(this.imgs[this.startIndex],0,HEIGHT - this.height);
                }
                // 定義一個速度
                this.time = 0;
                // 運動方法
                this.step = function(){
                    this.time ++;
                    if(this.time % 5 == 0){
                        this.startIndex ++;
                    }
                    // 臨界點，圖片加載完成以后，到第三階段去
                    if(this.startIndex == this.length){
                        state = RUNNING;
                    }
                }
            }
            // 2.4 動畫效果的對象
            var loading = new Loading(LOADINGS);
            // 2.5 onclick
            canvas.onclick = function(){
                if(state == START){
                    state = STARTTING;
                }
            }
        // 3  第三階段 游戲運行中
        // 3.1 繪制我方飛機
        // 3.1.1 加載我方飛機的圖片（1.飛機正常運行的狀態，2.飛機碰撞以后的狀態）
        var heros = [];
        heros[0] = new Image();
        heros[0].src = "images/hero1.png";
        heros[1] = new Image();
        heros[1].src = "images/hero2.png";

        heros[2] = new Image();
        heros[2].src = "images/hero_blowup_n1.png";
        heros[3] = new Image();
        heros[3].src = "images/hero_blowup_n2.png";
        heros[4] = new Image();
        heros[4].src = "images/hero_blowup_n3.png";
        heros[5] = new Image();
        heros[5].src = "images/hero_blowup_n4.png";
        // 3.1.2 初始化我方飛機的數據
        var HEROS = {
            imgs : heros,
            length : heros.length,
            width : 99,
            height : 124,
            frame : 2    //添加一個狀態
        }
        // 3.1.3 我方飛機的構造函數
        function Hero(config){
            this.imgs = config.imgs;
            this.length = config.length;
            this.width = config.width;
            this.height = config.height;
            this.frame = config.frame;
            // 定義索引值
            this.startIndex = 0;
            // 定義飛機的坐標
            this.x = WIDTH/2 - this.width/2;
            this.y = HEIGHT - 150;
            // 增加一個標識，表示飛機是否發生了碰撞，給個false，表示一直沒有碰撞
            this.down = false;
            // 增加一個標識，表示飛機碰撞以后，碰撞的動畫，碰撞的動畫是否執行完成
            this.candel = false;

            // 繪制方法
            this.paint = function(){
                context.drawImage(this.imgs[this.startIndex],this.x,this.y);
            }
            // 運動方法
            this.step = function(){
                // 監測飛機是否碰撞的屬性，如果沒有碰撞，索引在0和1之間切換
                if(!this.down){
                    // 沒有碰撞，切換索引
                    if(this.startIndex == 0){
                        this.startIndex = 1;
                    }else{
                        this.startIndex = 0;
                    }
                }else{
                    // 飛機發生了碰撞
                    this.startIndex++;
                    if(this.startIndex == this.length){
                        life -- ;
                        if(life == 0){
                            state = GAMEOVER;
                            this.startIndex = this.length - 1;
                        }else{
                            hero = new Hero(HEROS);
                        }
                    }
                }
            }
            this.time = 0;
            //射擊方法
            this.shoot = function(){
                this.time ++;
                if(this.time % 4 == 0){
                    bullets.push(new Bullet(BULLET));
                }    
            }
            this.bang = function(){
                this.down = true;
            }
        }
        // 3.1.4 創建對象
        var hero = new Hero(HEROS);
        // 3.1.5 飛機跟隨鼠標移動
        canvas.onmousemove = function(event){
            if(state == RUNNING){
                var x = event.offsetX;
                var y = event.offsetY;
                // 直接賦值給飛機的x和y坐標
                hero.x = x - hero.width/2;
                hero.y = y - hero.height/2;
            }
        }
        // 3.2 繪制子彈
        // 3.2.1 加載子彈的圖片
        var bullet = new Image();
        bullet.src = "images/bullet1.png";
        // 3.2.2 初始化子彈的數據
        var BULLET = {
            imgs : bullet,
            width : 9,
            height : 21
        }
        // 3.2.3 子彈的構造函數
        function Bullet(config){
            this.imgs = config.imgs;
            this.width = config.width;
            this.height = config.height;
            // 坐標
            this.x = hero.x + hero.width/2 - this.width/2;
            this.y = hero.y - this.height;
            // 繪制
            this.paint = function(){
                context.drawImage(this.imgs,this.x,this.y);
            }
            // 運動
            this.step = function(){
                this.y -= 10;
            }
            // 加上一個標識，標識子彈是否發生碰撞
            this.candel = false;
            // 撞擊的方法，用於修改子彈是否碰撞的屬性
            this.bang = function(){
                this.candel = true;
            }
        }
        // 3.2.4 增加一個數組，用來存儲子彈
        var bullets = [];
        // 3.2.5 繪制數組里面的所有的子彈
        function bulletsPaint(){
            for(var i = 0;i < bullets.length;i++){
                bullets[i].paint()
            }
        }
        // 3.2.6 繪制數組里面的所有的子彈的運動
        function bulletsStep(){
            for(var i = 0;i < bullets.length;i++){
                bullets[i].step()
            }
        }
        // 3.2.7 當子彈移出畫布的時候和發生碰撞以后，要把子彈從數組中刪除
        function bulletsDel(){
            for(var i = 0;i < bullets.length;i++){
                if(bullets[i].y < -bullets[i].height || bullets[i].candel){
                    bullets.splice(i,1);
                }
            }
        }
        // 3.3 繪制地方飛機
        // 3.3.1 加載敵方飛機的圖片(3種)
        // 小飛機
        var enemy1 = [];
        enemy1[0] = new Image();
        enemy1[0].src = "images/enemy1.png";
        enemy1[1] = new Image();
        enemy1[1].src = "images/enemy1_down1.png";
        enemy1[2] = new Image();
        enemy1[2].src = "images/enemy1_down2.png";
        enemy1[3] = new Image();
        enemy1[3].src = "images/enemy1_down3.png";
        enemy1[4] = new Image();
        enemy1[4].src = "images/enemy1_down4.png";
        // 中飛機
        var enemy2 = [];
        enemy2[0] = new Image();
        enemy2[0].src = "images/enemy2.png";
        enemy2[1] = new Image();
        enemy2[1].src = "images/enemy2_down1.png";
        enemy2[2] = new Image();
        enemy2[2].src = "images/enemy2_down2.png";
        enemy2[3] = new Image();
        enemy2[3].src = "images/enemy2_down3.png";
        enemy2[4] = new Image();
        enemy2[4].src = "images/enemy2_down4.png";
        // 大飛機
        var enemy3 = [];
        enemy3[0] = new Image();
        enemy3[0].src = "images/enemy3_n1.png";
        enemy3[1] = new Image();
        enemy3[1].src = "images/enemy3_n2.png";
        enemy3[2] = new Image();
        enemy3[2].src = "images/enemy3_down1.png";
        enemy3[3] = new Image();
        enemy3[3].src = "images/enemy3_down2.png";
        enemy3[4] = new Image();
        enemy3[4].src = "images/enemy3_down3.png";
        enemy3[5] = new Image();
        enemy3[5].src = "images/enemy3_down4.png";
        enemy3[6] = new Image();
        enemy3[6].src = "images/enemy3_down5.png";
        enemy3[7] = new Image();
        enemy3[7].src = "images/enemy3_down6.png";
        // 3.3.2 初始化敵方飛機的數據
        var ENEMY1 = {
            imgs : enemy1,
            length : enemy1.length,
            width : 57,
            height : 51,
            type : 1,    //增加一個類型，判斷是哪一種飛機
            frame : 1,
            life : 1,
            score : 1
        }
        var ENEMY2 = {
            imgs : enemy2,
            length : enemy2.length,
            width : 69,
            height : 95,
            type : 2,    //增加一個類型，判斷是哪一種飛機
            frame : 1,
            life : 5,
            score : 5
        }
        var ENEMY3 = {
            imgs : enemy3,
            length : enemy3.length,
            width : 169,
            height : 258,
            type : 3,    //增加一個類型，判斷是哪一種飛機
            frame : 2,
            life : 10,
            score : 10
        }
        // 3.3.3 敵方飛機的構造函數
        function Enemy(config){
            this.imgs = config.imgs;
            this.length = config.length;
            this.width = config.width;
            this.height = config.height;
            this.type = config.type;
            this.frame = config.frame;
            this.life = config.life;
            this.score = config.score;
            // 坐標
            this.x = Math.random() * (WIDTH - this.width);
            this.y = -this.height;
            // 索引
            this.startIndex = 0;
            // 增加一個標識，表示飛機是否發生了碰撞，給個false，表示一直沒有碰撞
            this.down = false;
            // 增加一個標識，表示飛機碰撞以后，碰撞的動畫，碰撞的動畫是否執行完成
            this.candel = false;
            // 繪制
            this.paint = function(){
                context.drawImage(this.imgs[this.startIndex],this.x,this.y);
            }
            // 運動
            this.step = function(){
                if(!this.down){
                    // 根據飛機的狀態來判定飛機是否由動畫，就是要大飛機有動畫效果
                    this.startIndex ++;
                    // 小飛機和中飛機就是0，大飛機是在0和1之間切換
                    this.startIndex = this.startIndex % this.frame;
                    this.y ++;
                }else{
                    this.startIndex++;
                    if(this.startIndex == this.length){
                        this.candel = true;
                        this.startIndex = this.length - 1;
                    }
                }
            }
            this.checkHit = function(zd){   //這個參數可能是子彈，可能是我方飛機
                return zd.y + zd.height > this.y
                && zd.x + zd.width > this.x
                && zd.y < this.y + this.height
                && zd.x < this.x + this.width
            }
            // 撞擊的方法，用於修改飛機是否碰撞的屬性
            this.bang = function(){
                this.life -- ;
                if(this.life == 0){
                    this.down = true;
                    score += this.score;
                }
            }
        }
        // 3.3.4 創建數組，用於存儲敵方飛機
        var enemies = [];
        // 3.3.5 數組中去添加飛機
        function pushEnemies(){
            var numRand = Math.floor(Math.random() * 100);
            if(numRand < 10){
                enemies.push(new Enemy(ENEMY1))
            }else if(numRand > 98){
                enemies.push(new Enemy(ENEMY2))
            }else if(numRand == 50){
                enemies.push(new Enemy(ENEMY3))
            }
        }
        // 3.3.6 敵方飛機的繪制函數
        function paintEnemies(){
            for(var i = 0;i < enemies.length;i++){
                enemies[i].paint()
            }
        }
        // 3.3.7 敵方飛機的運動函數
        function stepEnemies(){
            for(var i = 0;i < enemies.length;i++){
                enemies[i].step()
            }
        }
        // 3.3.8 敵方飛機的刪除函數
        function delEnemies(){
            for(var i = 0;i < enemies.length;i++){
                // 兩種情況
                if(enemies[i].y > HEIGHT || enemies[i].candel){
                    enemies.splice(i,1);
                }
            }
        }
        // 3.4 檢測是否撞擊
        function hitEnemies(){
            for(var i = 0;i < enemies.length;i++){
                // 自己飛機撞
                if(enemies[i].checkHit(hero)){
                    enemies[i].bang();
                    hero.bang();
                }
                // 子彈撞
                for(var j = 0;j < bullets.length;j++){
                    if(enemies[i].checkHit(bullets[j])){
                        enemies[i].bang();
                        bullets[j].bang();
                    }
                }
            }
        }
        // 3.5 文本函數
        function paintText(){
            context.font = "bold 30px 微軟雅黑";
            context.fillText("SCORE:" + score,20,20);
            context.fillText("LIFE:" + life,300,20);
        }

        // 4  第四階段 游戲暫停
        canvas.onmouseout = function(){
            if(state == RUNNING){
                state = PAUSE;
            }
        }
        canvas.onmouseover = function(){
            if(state == PAUSE){
                state = RUNNING;
            }
        }
        var pause = new Image();
        pause.src = "images/game_pause_nor.png";
        // 5  第五階段 游戲GG
        function paintOver(){
            context.font = "bold 50px 微軟雅黑";
            context.fillText("GAME OVER!!!",50,250);
        }





        setInterval(function(){
            abc.paint();
            abc.step();
            switch (state) {
                case START:
                    context.drawImage(logo,40,0)
                    break;

                case STARTTING:
                    loading.paint();
                    loading.step();
                    break;

                case RUNNING:
                    hero.paint();
                    hero.step();
                    hero.shoot();

                    bulletsPaint();
                    bulletsStep();
                    bulletsDel();

                    pushEnemies();
                    paintEnemies();
                    stepEnemies();
                    delEnemies();

                    hitEnemies();

                    paintText();
                    break;

                case PAUSE:
                    hero.paint();

                    bulletsPaint();

                    paintEnemies();

                    paintText();

                    context.drawImage(pause,150,350);
                    break;

                case GAMEOVER:
                    hero.paint();

                    bulletsPaint();

                    paintEnemies();

                    paintText();

                    paintOver()
                    break;

            }
        },10)

    </script>