JS地下城ー貪食蛇
預計目標：
1. 本網頁遊戲一律用鍵盤操控。
2. 貪食蛇遊戲邏輯撰寫。
3. 為遊戲加入音效。
1. 遊戲畫面按鍵控制（event.keyCode）
我們先將遊戲畫面（遊戲封面、遊戲中畫面、遊戲結束畫面），用一塊ID為wrapper的<div>標籤包住，並加上tabindex=“0”這段話。如此就能對wrapper監聽鍵盤事件（執行focus後監聽）。若不是用vue.js則建議直接對window元件監聽。本次所用到的event.keyCode如下方程式碼顯示：
2. 遊戲環境及陣列控制
遊戲環境利用(x,y)座標系統定位蛇及食物的所在位置，切記遊戲環境的座標系和常見的笛卡兒座標系統不一樣，結果顯示如下圖：
建立遊戲環境之後，我們需要創造當前未被使用的陣列（availablePixel），提供食物隨機出現。此外，此陣列也可以判斷遊戲獲勝及失敗機制（當蛇身體占滿了所有空間，即為獲勝），詳細可就下圖及程式碼解釋：
3. 蛇身體及移動機制
一、方向控制：
由方向鍵取得方向key(up、down、right、left)之後，則需在(setInterval)裡，為蛇身體push進nextHead座標陣列資料，程式碼片段及圖片解釋如下：
二、蛇行進狀況判斷
貪食蛇的蛇身由陣列組控制，並隨時間(setInterval)改變陣列內容。不斷前進的蛇頭（陣列尾[長度-1]）在每次前進時，都需判斷下一格是否會碰到食物。若碰到食物時，則nextHead被push至陣列末端，陣列尾不釋放畫素（即陣列長度+1）；反之，若無碰到食物時，則nextHead一樣被push至陣列末端，陣列尾釋放畫素（即陣列長度維持不變），具體可依下圖及程式碼解釋之：
三、遊戲加速機制
我們所設定的setInterval為5，意思即為每5毫秒執行一次回呼函式，並在currentTime累加數字。
當程式執行現在時間(currentTime)累加至150（等於frameTime）時，則在if判斷區塊（蛇移動機制）執行一次（此時為每30毫秒，使蛇移動一次）。利用蛇的長度（或分數）改變縮小frameTime的值，加速遊戲速度。具體程式碼如下：
四、加上音效
遊戲沒有音效是蠻無聊的，這裡的音效利用Ching-Hsien Yeh在youtube教學裡提供的音效，同時也十分感謝這位大大分享教學。程式碼如下：
html標籤裡（audio標籤除了id外，都不要設任何參數）
<audio id="beep"> <!--吃到食物-->
<source src="media/beep.mp3" type="audio/mp3">
<source src="media/beep.ogg" type="audio/ogg">
</audio>script標籤裡（取得dom元素play();）
let beep = document.getElementById(‘beep’);
beep.play();
