Question

我在学校项目中，我们正在制作一个javascript游戏。游戏由9个图像组成，您可以使用命令＆＃34; up＆＃34; ＆＃34;向下＆＃34; ＆＃34;右＆＃34;左＆＃34;所以四处走动。在文本字段中输入命令，然后按Enter键。但我们希望将命令绑定到html按钮。

这是我们到目前为止所得到的：http://jsfiddle.net/KAxrx/

<div id="gamebuttons">
    <button id="up" button onClick="">UP</button>
    <button id="down" button onClick="">DOWN</button>
    <button id="left" button onClick="">LEFT</button>
    <button id="right" button onClick="">RIGHT</button>
    </div>

也可以在这里看到：http://kaspermedk.dk/

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

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

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

Answer 1

在不改变代码的情况下，这是一种方法

function clickHandler(sender) {
    input.value = sender.id;

    playGame();
}

<button id="up" onclick="clickHandler(this)">UP</button>
<button id="down" onclick="clickHandler(this)">DOWN</button>
<button id="left" onclick="clickHandler(this)">LEFT</button>
<button id="right" onclick="clickHandler(this)">RIGHT</button>

Answer 2

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

我改变了你的代码， JSFiddle 。

我将您的开关移到了一个单独的功能。

看看。

Answer 3

我提供了一个简单示例，介绍如何使用jQuery创建 左，右，上，下 动作。

Demo Fiddle

<强>的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'});
});

将javascript案例绑定到html按钮

3 个答案:

Demo Fiddle