为简单的HTML5游戏添加按钮

我想不出一个好方法来为一个简单的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游戏来说，它有很多"高级"的东西。