》Walking mechanics
今天我們要來繼續做之前有練習過的動畫，並套用在 player 身上，也會提起應該要注意的地方。像是判斷動畫執行、以及是否翻轉圖片（也可以直接在 sprite 做掉，額外做另外一個動畫）。

》Javascript 內容

scene.create = function() {
    .....
    // 鍵盤操作
    this.cursors = this.input.keyboard.createCursorKeys()
}

scene.update = function() {
    // 判斷鍵盤左鍵、右鍵
    if (this.cursors.left.isDown) {
        this.player.body.setVelocityX(-100)
    } else if (this.cursors.right.isDown) {
        this.player.body.setVelocityX(100)
    } else {
        // 如果不是左鍵或右鍵，需把速度改為零
        this.player.body.setVelocityX(0)
    }
}

接著我們要為 player 創建走路的動畫

scene.create = function() {
    this.anims.create({
        key: ‘walking’,
        frames: this.anims.generateFrameNames(‘player’, { frames: [1, 2 ]}),
        frameRate: 10,
        yoyo: true,
        repeat: -1
    })
}

scene.update = function() {
    // 判斷鍵盤左鍵、右鍵
    if (this.cursors.left.isDown) {
        .....
        this.player.anims.play(‘walking’)
    } else if (this.cursors.right.isDown) {
        .....
        this.player.anims.play(‘walking’)
    } else {
        .....
        this.player.anims.stop(‘walking’)
        this.player.setFrame(0)			// 顯示在第一張圖片上
    }
}

這時候還有一些存在的問題，還需要檢查動畫是否在進行中；另外 sprite 只有 player 向右走的圖片，並沒有向左走的圖片，所以這時還需要翻轉它。

if (this.player.anims.isPlaying) {
    // 依照 sprite 圖及左右鍵方向應有呈現的樣子，決定 flipX
    this.player.flipX = true				    
    this.player.anims.play(‘walking’)
}

》結論
今天我們學到了如何實施一個讓 player 步行的動畫，以及檢測鍵盤左右鍵按下時，該如何判斷並執行動畫。

今天就先到這裡，我們明天見。