如何在運行時創建對象並移動它們？

我正在嘗試在我的遊戲更新上創建對象並移動它們。這是我的香蕉對象：如何在運行時創建對象並移動它們？

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

我試圖問這對多個人，但我找不到答案。

來源

2016-07-30 Carlos Menzoni

你在'update'中有個拼寫錯誤 - 應該是'length'。你的動畫循環在哪裏？ – markE

我有一個繪圖功能 'Game.draw = function（）{ \t this.context.drawImage（road，0,0，rw，rh）; this.context.drawImage（this.player.player_image， \t \t \t \t \t \t this.player.pos_x， \t \t \t \t \t \t this.player.pos_y， \t \t \t \t \t \t this.player .width， \t \t \t \t \t \t this.player.height）; this.context.drawImage（this.banana。banana_image， \t \t \t \t \t \t this.banana.pos_x， \t \t \t \t \t \t this.banana.pos_y， \t \t \t \t \t \t this.banana.width， \t \t \t \t \t \t這一點。 banana.height）; };' –

您必須有一個動畫循環來「移動」您的遊戲項目。這裏是一些[Documentation]（http://stackoverflow.com/documentation/html5-canvas/1892/introduction-to-html5-canvas/11659/detecting-mouse-position-on-the-canvas），展示瞭如何使用動畫循環。 – markE

假設您想要移動對象10次然後停止。

首先，你需要添加一行的Game.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而不是（但這會使動畫更不流利）。

注意，你在你的代碼的一些錯誤，你需要首先解決：

lenght應該length
function Game.draw = function() {：Game.draw之前刪除function。
...檢查您在控制檯中獲得的錯誤消息。

來源

2016-07-31 16:49:23 trincot

如何在運行時創建對象並移動它們？

回答

相關問題