最開始我們要初始化信息，我們有五個狀態，遊戲封面，加載狀態，運行狀態，遊戲暫停，遊戲結束

我們還需要得分score，生命life

var START = 1;//初始狀態
var LOADING = 2;//加載狀態
var RUNNING = 3;//遊戲運行狀態
var WAIT = 4;//遊戲暫停狀態
var GAMEOVER = 5;//遊戲結束狀態

var state = START;//初始狀態

var score = 0;//遊戲得分

var life = 5;//我方飛機的生命值 

我們創建一個背景的構造函數，為了制造背景的動態效果，我們創建兩張背景

第一張圖片的位置為（0,0）

第二張圖片我們放在第一張圖片的上面，

當第一張圖片運動到最底下時，然後把第一張圖片放在第二張圖片的上面

當第二張圖片運動到最底下時，然後把第二張圖片放在第一張圖片的上面

var bg = new Image();//創建一個圖片對象
bg.src = "img/background.png";

var BG = {
    imgs:bg,
    width:480,
    height:850
}
//創建一個背景的構造函數
//為了制造背景的動態效果，我們創建兩張背景
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(){
        ctx.drawImage(this.imgs,this.x1,this.y1);
        ctx.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;//然後把第二張圖片放在第一張圖片的上面
        }
    }
}

//創建背景對象
var sky = new Bg(BG);

//創建logo
var logo = new Image();
logo.src = "img/start.png";

效果如下：

canvas：飛機大戰