3

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

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

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

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

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

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

4

3 回答 3

2

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

它会做什么？可能会left以某种方式改变大炮的位置。我建议在您的大炮上设置 CSS 样式，然后使用 Javascriptposition:absolute更改属性。.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;
}

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

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

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

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

一个小小的警告，以弧线传播的东西将需要一些数学来将它们翻译成二维，这取决于你想要它的准确度。如果你喜欢数学，这是一个有趣的练习:)

于 2012-09-04T00:09:21.550 回答
0

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

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

var ypos = document.getElementsByTagName('img')[0].y;
于 2012-09-04T00:08:57.383 回答
0

只是添加一点背景，通常这样做的方式是：

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

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

于 2012-09-04T00:15:18.017 回答