Javascript 如何在运行时创建对象并移动它们？

我正在尝试在游戏更新中创建对象并移动它们。这是我的香蕉对象：

function Banana() {
    this.height = 1.96;
    this.width = 3.955;
    this.pos_x = CENTER - this.width/2;
    this.pos_y = -475;
    this.banana_image = banana_image;
};

这就是移动方法：

Banana.prototype.move = function(){
    if (this.pos_y > 500) {
        //this.banana_image.parentElement.removeChild(this.banana_image);
    }
    this.height += ZOOM_RATE;
    this.width += ZOOM_RATE;
    this.pos_y += 3;
    this.pos_x -= SIDES_RATE;
};

这是游戏更新部分：

Game.update = function() {

      this.player.move();

      //creating bananas
      if (objs.lenght <= 0) {
          this.banana = new Banana();
      } else {
          for (i = 0; i < 10; i++) {
              objs.push(new Banana());
          }  
      }

      //moving bananas
      for (i = 0; i < objs.lenght; i++) {
          this.objs[0].move();
      }


};

---

我试着问了很多人，但我找不到答案

假设要移动对象10次，然后停止

首先，您需要在

游戏的开始处添加一条线。draw

，以便它清除画布，使您始终从零开始绘图：

this.context.clearRect(0,0,500,500); // clear canvas, adjust box size if needed

然后创建一个函数来调用

update

和

draw

，并将要再次调用的函数排队：

var count = 10;

function updateAndDraw() {
    Game.update();
    Game.draw();
    count--;
    if (count) requestAnimationFrame(updateAndDraw);
}

// start moving:
requestAnimationFrame(updateAndDraw);

移动速度可能会过快，因此请调整

move

方法以进行较小的更改，或者使用

setTimeout

而不是

requestAnimationFrame

（但这会降低动画的流畅性）

请注意，您的代码中有一些错误，需要首先修复这些错误：

• length

  应为

  length

• function Game.draw=function（）{

  ：在

  Game.draw

  之前删除

  function

• …检查您在控制台中收到的错误消息

---

你在

update

中有一个输入错误——应该是

length

。你的动画循环在哪里？我有一个绘图函数

Game.Draw=function（）{this.context.drawImage（road，0,0，rw，rh）；this.context.drawImage（this.player.player_image，this.player.pos_x，this.player.pos_y，this.player.width，this.player.height）；this.context.drawImage（this.banana.banana_image，this.banana.pos_x，this.banana.pos_y，this.banana.width，this.banana.height）；）；

您必须有一个动画循环才能“移动”游戏项目。下面是一些演示如何使用动画循环的示例。

var count = 10;

function updateAndDraw() {
    Game.update();
    Game.draw();
    count--;
    if (count) requestAnimationFrame(updateAndDraw);
}

// start moving:
requestAnimationFrame(updateAndDraw);