整體效果展示：

一、實現思路

如圖，這是我完成該項目的一個邏輯圖，也是一個功能模塊完成的順序圖。

1. 遊戲界面的完成
2. 英雄飛機對象實現，在實現發射子彈方法過程中，又引出了子彈對象並實現。在此時，英雄飛機能進行基本操作了。
3. 敵機對象的實現，並且初步完成了boos出現（30s自動出現）。然後又引出了許多方法的處理，如英雄子彈擊中敵機和boos，英雄與敵機相撞等等。並一一解決。
4. 隨後又設置了一些遊戲的參數，如血量，關卡數，等級，積分，必殺，道具對象等等。
5. 最後又完成了一些輔助功能，暫停遊戲，繼續遊戲，退出遊戲等。

當然，我做的並不是一個完全版，還有很多需要改進的地方。我只是初步實現了飛機大戰遊戲最初級的遊戲體驗，還需要多多學習去完善。

二、遊戲界面的完成（主界面）

展示：

要實現這個的界面，主要是用到了css中animation（動畫）屬性來進行設置。下面我會貼出我寫的代碼。

html代碼：

        <!--主界面（遊戲界面）-->
        <div class="main" id="main">
            <!--背景圖片盒子-->
            <div class="bg" class="bg">
                <!--背景圖片-->
                <img src="img/bg1.jpg"
 
 id="back1"/>
                <img src="img/bg1.jpg" id="back2"/>
            </div>
            <!--遊戲參數盒子-->
            <div class="info">
                <span>擊殺：</span><span id="killNum">0</span><br />
                <span>得分：</span><
 
span id="score">0</span><br />
                <span>血量：</span><span id="blood">0</span><br />
                <span>等級：</span><span id="level">0</span><br />
                <span>炸彈：</span><span id="boom">0</span><br />
                <img src="img/end1.jpg" width="80px" height="80px"/>
            </div>
            <!--暫停按鈕-->
            <div class="btn_pause" onclick="stopGame()">
                <!--暫停按鈕-->
                <img src="img/pause1.png" />
            </div>
        </div>

css樣式：

/*
 *主界面樣式
 * */
.main {
    position: absolute;
    width: 441px;
    height: 632px;
    left: 35%;    /*右移動*/
    overflow: hidden; /*溢出部分隱藏不可見*/
    z-index: -3;  /*元素的堆疊順序*/
}
/**
  * 背景盒子
  */
.bg{
    position: absolute;
    width: 441px;
    height: 632px;
    z-index: -3;
    /*
     * -webkit-谷歌瀏覽器前綴是兼容性處理，還有火狐-moz-，IE-ms-
     * 參數對應說明：動畫名（類似函數名，調用函數一樣）  時間（多久完成），播放次數（無限），速度（勻速播放）
     */
    -webkit-animation: bg 10s infinite linear;
}
/*
 * 背景圖片
 * 取消兩張圖片間的斷層
 */
.bg img{
    float: left;
}
@-webkit-keyframes bg{
    from{margin-top: -932px}
    to{margin-top: -150px}
}

第一次發帖，還不熟悉套路，請大家多多包涵！

以上為今天的第一講，如需了解更加深入的知識，請大家進入知了堂社區：http://www.zhiliaotang.com/portal.php；

[知了堂學習筆記]_純JS制作《飛機大戰》遊戲_第1講(實現思路與遊戲界面的實現)