如何停止图片移动并在按键时触发操作？

Question

我正在学习Web编程，同时也在学习C++。我遇到了一个JavaScript的问题。

我需要知道如何基于图像位置创建一个“if语句”。

我正在做一个简单的游戏，其中有一个炮筒正在左右移动。我希望用户按下按钮后，炮筒停止并发射另一张图像朝向目标。

我已经创建了这些图像，并制作了一个GIF，该图像将从炮筒中以弧线形式朝着目标前进。

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

请问如何基于位置创建if语句？或者有人能告诉我如何让炮筒停止并使GIF图像出现吗？

- user1644781

---

嗨，Garrett。你能展示一下你已经完成了什么吗？这将有助于展示你的水平，并提供更多关于你想要实现的内容的信息。 - Aesthete

看一下这个，它是一个教授JavaScript的课程：http://www.codecademy.com - Bradley Braithwaite

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';
}

---

一个小小的警告，弧形运动需要一些数学计算才能在二维平面上进行翻译，具体取决于您想要多么准确。如果您喜欢数学，这将是一项有趣的练习 :)

- Ben

Answer 2

为了补充一些背景，通常的做法如下：

1. 你有一个主循环来“运行”游戏。
2. 每次循环迭代，你 a) 更新游戏对象（在你的情况下是大炮、弹丸和目标）的位置，并 b) 将结果对象渲染到屏幕上。
3. 当你检测到“开火”按键时，只需将移动大炮的“速度”设置为0，使其“停止”。

你可以使用Steve或sajawikio的方法来检索对象的位置，但你的游戏逻辑应该确定（并应该知道）所有对象的位置。它是你的游戏逻辑说“在位置（x，y）绘制弹丸”。你的游戏逻辑不应该说“我有一个弹丸，不确定它在哪里，HMM，所以让我们使用Javascript查询它的位置”。至少在这种情况下，你的运动是简单、可预测的。

- user2189331

Answer 3

要获取页面上第一张图片在屏幕上的x和y位置，例如，请尝试：

var xpos = document.getElementsByTagName('img')[0].x;

var ypos = document.getElementsByTagName('img')[0].y;

- sajawikio