Question

我无法找到一个很好的方法来添加按钮到一个简单的HTML5游戏，我正在尝试适应其他用途。

我没有使用箭头键来控制播放器，而是希望有一个实际的“向上，向下，向左，向右”按钮，这些按钮必须被点击（或者更准确地说，在移动设备上触摸）。

以下是我正在尝试改编的输入代码。

input.js：

(function() {
    var pressedKeys = {};

    function setKey(event, status) {
        var code = event.keyCode;
        var key;

        switch(code) {
        case 32:
            key = 'SPACE'; break;
        case 37:
            key = 'LEFT'; break;
        case 38:
            key = 'UP'; break;
        case 39:
            key = 'RIGHT'; break;
        case 40:
            key = 'DOWN'; break;
        default:
            // Convert ASCII codes to letters
            key = String.fromCharCode(code);
        }

        pressedKeys[key] = status;
    }


    document.addEventListener('submit', function(e){
        console.log(e);
        return false;
    })

    document.addEventListener('keydown', function(e) {
        setKey(e, true);
    });

    document.addEventListener('keyup', function(e) {
        setKey(e, false);
    });

    window.addEventListener('blur', function() {
        pressedKeys = {};
    });

    window.input = {
        isDown: function(key) {
            return pressedKeys[key.toUpperCase()];
        }
    };
})();

以下是app.js中引用'isDown'函数的代码：

function handleInput(dt) {
    if(input.isDown('DOWN') || input.isDown('s')) {
        player.pos[1] += playerSpeed * dt;
    }

    if(input.isDown('UP') || input.isDown('w')) {
        player.pos[1] -= playerSpeed * dt;
    }

    if(input.isDown('LEFT') || input.isDown('a')) {
        player.pos[0] -= playerSpeed * dt;
    }

    if(input.isDown('RIGHT') || input.isDown('d')) {
        player.pos[0] += playerSpeed * dt;
    }
}

我非常擅长制作HTML5游戏，因此任何关于如何处理触摸/点击事件的建议都会很棒。另外，对于按钮本身，使用div，表单还是别的东西会更好吗？

由于

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

编辑/更新：

所以我把它插入我的app.js：

$("#upButton").click(function(){
        console.log("click");
        player.pos[1] -= playerSpeed * dt;
    })

它实际上注册了点击事件，但它产生了一个非常奇怪和随机数量的“点击”（从几个打瞌睡到数千个）。我正在调整的特定代码可以在此代表处找到：https://github.com/jlongster/canvas-game-bootstrap

这个家伙的游戏非常整洁，但对于像我这样的HTML5游戏，它有很多“高级”的东西。

Answer 1

如果它是始终可见的按钮 - 在html中创建按钮并添加点击事件。

如果你需要画布上的动态按钮 - 你可以绘制按钮，并在鼠标点击检查鼠标点击按钮区域和按钮是否可见/活动，然后执行你的行动。

添加按钮到简单的HTML5游戏

1 个答案: