javascript - 使用 javascript 生成图像并使其 move

Question

我正在尝试生成并 move 子弹。我让它毫无问题地生成，但它没有 move 。

Javascript:

var index = 0;

var timer_id; // reference of the timer, needed to stop it
var speed = 350; // pixels/second
var period = 10; // milliseconds
var sprite; // the element that will move
var sprite_speed = 0; // move per period
var sprite_position = 315; // pixels


document.getElementById('jack').addEventListener('click', function() {
  var img = document.createElement("img");
  img.src = "images/bullet.png";
  img.id = "bullet" + index;
  img.name = "bullet" + index;
  img.setAttribute("style", "position:relative;");
  var foo = document.getElementById("fooBar");
  foo.appendChild(img);

  move("bullet" + index);

  index++;
});


if (document.images) {
  var image1 = new Image();
  image1.src = "/images/jack01.png";
  var image2 = new Image();
  image2.src = "/images/jack02.png";
}

HTML

<a onmousedown="document.jack.src=image2.src;" onmouseup="document.jack.src=image1.src;">Spawn a bullet</a>

CSS

#bullet { 
  position: fixed;
  position: absolute;
  top: 750px;
  left: 500px;
}

#foobar {
  position: relative;
}

所以上面的代码确实生成了一颗子弹，但并没有让它 move !

Answer 1

对于动画，您需要一个循环。你可以看看我的 game loop代码 - 也许会有一些用处。

每个循环对象都有一个 update() 和 render() 函数，它们在循环运行时被调用。

您可以将更新代码放在更新函数中。 IE。增加子弹位置

然后就可以使用render函数将position值应用到bullet图片上