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>元素而不是按钮元素。

画布蛇游戏中的Javascript按钮

1 个答案: