畫布蛇游戲中的Javascript按鈕

Question

我在弄亂我為蛇游戲找到的腳本。 它可以正常工作，但是控制它的唯一方法是通過鍵盤。

這是控件的腳本：

window.addEventListener('keydown', function(e) {
    if (e.keyCode === 38 && direction !== 3) {
        direction = 2; // Up
    } else if (e.keyCode === 40 && direction !== 2) {
        direction = 3; // Down
    } else if (e.keyCode === 37 && direction !== 0) {
        direction = 1; // Left
    } else if (e.keyCode === 39 && direction !== 1) {
        direction = 0; // Right
    }
});

我的問題是，如何制作按鈕來控制游戲而不是使用鍵盤？

是否可以使用onclick="function()"和功能賦予方向值的按鈕來制作按鈕？

如果是這樣，怎么做？ 如果沒有，您有什么建議嗎？

這是我的JSFiddle

Answer 1

只需添加一些按鈕元素：

<button id="up" type="button">Up</button>
<button id="down" type="button">Down</button>
<button id="left" type="button">Left</button>
<button id="right" type="button">Right</button>

然后為每個按鈕添加點擊處理程序：

document.getElementById("up").addEventListener("click", function() {
    direction = 2;
});
// and so forth for the other buttons

更新的演示： http : //jsfiddle.net/WKQff/1/

請注意，我在演示中保留了現有的keydown處理程序，並且可以使用箭頭鍵和添加的按鈕來控制蛇。 顯然，如果您希望它僅與按鈕一起使用，則應刪除keydown處理程序。

當然，您可以將<img>元素與適當的方向圖標一起使用，而不是按鈕元素。