javascript - 如何停止图像移动并根据击键引起 Action ？

Question

我正在自学网络编程。我也在研究 C++。我在使用 Javascript 时遇到问题。

我需要知道如何根据图像的位置创建“if 语句”。

我正在制作一个简单的游戏，其中有一门来回移动的大炮。我希望用户按下一个按钮，这将使大炮停止并向目标发射另一个图像。

我已经创建了将从大炮沿弧线向目标移动的图像和图像的 gif。

如果用户在大炮处于正确位置时开火，图像将击中目标。

有人能告诉我如何根据位置创建 if 语句吗？或者有人可以告诉我如何让大炮停止并让 gif 出现吗？

Answer 1

要移动大炮，请仔细阅读 onkeyup() 事件 - 它将等待释放键并执行某些操作。

它会做什么？可能以某种方式改变大炮的 left 位置。我建议在您的大炮上设置 CSS 样式 position:absolute，然后使用 Javascript 更改 .left 属性。

例如，这里有一些 Javascript 可以帮助您入门(未经测试):

var cannon = document.getElementById("cannonPic");
var leftlim = 200;

document.body.onkeyup = function() {
    // Remove 'px' from left position style
    leftPosition = cannon.style.left.substring(0, cannon.style.left - 2);

    // Stop the cannon?
    if (leftPosition >= leftLim) {
        return;
    }

    // Move cannon to new position
    cannon.style.left = cannon.style.left.substr(0, cannon + 10);
}

它的配套 HTML 看起来像...

...
<img id='cannonPic' src='cannon.jpg' />
...
<script type='text/javascript' src='cannon.js' />

HTML 的样式可以是这样的:

#cannonPic {
    left:0;
    position:absolute;
}

---

要回答“出现/重新出现”子问题，您可以使用通过 Javascript 访问的 .display 属性:

var cannon = document.getElementById("cannonPic");

function appear() {
    cannon.style.display = '';
}

function hide() {
    cannon.style.display = 'none';
}

---

一个小小的警告，以弧形运动的东西需要一些数学来将它们转换成二维，这取决于你想要的精确度。如果你喜欢数学，这是一个有趣的练习:)