画布蛇游戏中的Javascript按钮

我在胡闹我为蛇游戏找到的剧本。它工作正常，但控制它的唯一方法是通过键盘

以下是控件的脚本：

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（）”

的按钮，以及赋予方向值的函数

如果是这样，这是如何做到的？如果没有，你有什么建议吗

---

下面是我的

只需添加一些按钮元素：

<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>

更新的演示：

请注意，我在演示中留下了现有的keydown处理程序，可以通过使用箭头键和我添加的按钮来控制snake。显然，如果您希望它只与按钮一起工作，那么您应该删除keydown处理程序

---

当然，您可以使用带有适当方向图标的

元素，而不是按钮元素。

您是说要使用

或

元素来控制蛇的方向吗？是的，对不起。当我发布它时，我意识到我完全忽略了这个问题。我对javascript是新手，已经花了几个小时试图弄清楚如何做到这一点。谢谢你，我会尽快接受答案。不要着急。同时，其他人可能会发布更好的答案。

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