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

Question

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

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

这是 Move 方法:

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();
      }


};

游戏抽奖:

function 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); 
}; 

我尝试向多人询问这个问题，但找不到答案。

Answer 1

假设您想要移动对象 10 次然后停止。

首先，您需要在 Game.draw 的开头添加一行，以便它清除 Canvas ，使您始终从头开始绘制:

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 > (但这会使动画不太流畅)。

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

• 长度应为长度
• function Game.draw = function() {:删除 Game.draw 之前的 function。
• ...检查控制台中收到的错误消息。