画布蛇游戏中的Javascript按钮

Question

I am messing around with a script I found for a snake game. It works fine, but the only way to control it is through the keyboard.

Here is the script for the controls:

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
    }
});

My question is, how do I make buttons to control the game rather than using the keyboard?

Is it possible to make buttons with onclick="function()" and the function giving value to direction?

If so how is this done? If not, do you have any suggestions?

Here is my JSFiddle

Answer 1

Simply add some button elements:

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

And then add click handlers for each button:

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

Updated demo: http://jsfiddle.net/WKQff/1/

Note that I left your existing keydown handler in the demo, and that the snake can be controlled both by using the arrow keys and by using the buttons that I added. Obviously if you want it to work only with buttons then you should remove the keydown handler.

You can of course use <img> elements with appropriate direction icons instead of button elements.