将javascript案例绑定到html按钮

我参加了一个学校项目，我们正在制作一个javascript游戏。游戏由9幅图像组成，在这里你可以使用命令“向上”“向下”“向右”“向左”移动。你可以在文本字段中输入命令并按enter键。但是我们希望命令绑定到html按钮

这就是我们目前得到的结果：

向上的
向下
左边
正确的

在这里还可以看到现场直播：

到目前为止，我们还没有任何款式，其中一些可能是丹麦语的

但我们想要的是将4个命令连接到我们制作的4个按钮。我们非常绝望，希望有人能帮助我们！：）

---

如果您不理解或需要更多信息，请询问我们：）

在不更改太多代码的情况下，以下是一种方法

函数clickHandler（发送方）{
input.value=sender.id；
游戏（）；
}

UP
向下
左边
正确的

您可以在按钮上添加事件侦听器

我稍微修改了你的代码，JSFIDLE

我把你的开关移到了一个单独的功能

---

看一看。

我提供了一个简单的示例，说明如何使用

jQuery

创建左、右、上、下移动

jQuery

var vertical = 0;
var horizontal = 0;
$('#game button').click(function(){
    var clk = $(this).attr('id');
    clk == "up"?vertical--:
    clk == "down"?vertical++:
    clk == "right"?horizontal++:
    horizontal--;
    $('#dot').css({'left':''+horizontal+'px','top':''+vertical+'px'});
});

---

您好，谢谢您的回答。我们尝试了您所说的，但它有效（几乎）有时无效，您可以在此处看到它：（向下滚动一点）更新：只有向下按钮不起作用。

var vertical = 0;
var horizontal = 0;
$('#game button').click(function(){
    var clk = $(this).attr('id');
    clk == "up"?vertical--:
    clk == "down"?vertical++:
    clk == "right"?horizontal++:
    horizontal--;
    $('#dot').css({'left':''+horizontal+'px','top':''+vertical+'px'});
});