2

我想不出一种将按钮添加到我正试图适应另一种用途的简单 HTML5 游戏的好方法。

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

这是我正在尝试调整的输入代码。

输入.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;
    })

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

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

4

1 回答 1

0

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

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

于 2013-08-14T21:14:57.033 回答