今天也沒什麼事，所以就準備繼續完善這個小遊戲。第一次點進來的同學可以看看上篇。今天給人物增加了攻擊扣血，被擊打僵直等，順便還給人物增加了一個轉轉轉的技能，不過可能圖沒有扣好，轉轉轉顯得有點鬼畜。
怎麼實現人物攻擊讓敵人掉血呢，首先我們先要判斷攻擊究竟有沒有打在敵人身上。當人物攻擊時，判斷兩個DIV之間有沒有碰撞就行了。
移動碰撞
首先我們先實現不攻擊，當人物前進撞到敵人時，讓敵人被自己推著移動。這裡就需要用到DIV的碰撞檢測了。目前這個遊戲很簡單，所以我就只考慮了水平的碰撞，忽略了垂直碰撞，這兩者之間其實原理是一樣的。我是用offsetLeft屬性檢測碰撞的。當我們按D前進時，在keydown中監聽人物之間的距離，當this.refs.player2.offsetLeft – this.refs.player1.offsetLeft小於等於player1人物圖片的寬度時，就認為兩個人物之間碰撞了。當檢測到碰撞後，給player2人物加上後退行動，這樣碰撞後每次player1人物前進的時候，player2人物就會後退。
攻擊碰撞檢測
攻擊檢測和移動檢測其實差不多，當人物按J,K等鍵攻擊的時候，keydown事件中檢測2個人物有沒有碰撞。如果碰撞了，就給被攻擊的人加上一個被擊中的狀態，並且加上一個被擊中的行動。那麼怎麼把攻擊和扣血聯絡起來呢，其實也很簡單。首先我們定義一個全域性變數Blood，初始血量設為100。我們假設每次被拳頭攻擊扣10點血量，就在J的keydown中讓Blood – 10。接下來我們還要把血量的變化直觀的顯示在頁面上，加一個血量的圖片，然後利用clip屬性改變圖片的可見尺寸來表示血量的多少。舉個例子，假設血量圖片寬度是100px，最開始顯示的是完整的圖片，當player2被拳頭擊中，血量減少時，圖片相應的也只會顯示90px的尺寸。用這個辦法把攻擊和血量顯示聯絡起來。
Blood = Blood - 10
this.refs.blood.style.clip = `rect(0 ${Blood}px 50px 0)`
複製程式碼當血量變為0時，遊戲結束。
移動攻擊檢測
移動攻擊其實就是2個技能了，波動拳和新增的飛毛腿。在飛行過程中實時檢測技能與人物間有沒有碰撞，當第一次碰撞時，扣除相應的血量並且移除技能。
今天大概就完成了這些，主要是摳圖太麻煩了。現在遊戲還沒有加入對戰功能，後面準備增加一個電腦AI對戰，順便把遊戲頁面美化一下，畢竟現在的畫面實在是有點醜。再次附上下載地址github.com/leslie233/r…。
GIF演示