HTML5畫布元素作爲對象

Question

我想將舊的動作遊戲轉換爲HTML5。我喜歡AS3爲您提供的方法，因爲您在畫布上繪製的每個元素都是一個對象，您可以對其進行操作，例如對其執行動作和動畫。

Straight canvas似乎並沒有給你這種能力，但我希望有一個抽象了HTML5 canvas的框架，並賦予它這種額外的力量。

Answer 1

您可以創建構造函數來構建需要創建的元素，並且可以在構造函數中創建動作方法，這樣您就可以根據元素和動作獲得各種可能性。一球構造函數

例子：

// Ball constructor 
var Ball = function(x, y) { 
    this.x = x; 
    this.y = y; 

    this.radius = 10; 
    this.color = '#fff'; 

    // Direction and min, max x,y 
    this.dX = 15; 
    this.dY = -15; 

    this.minX = this.minY = 20 + this.radius; 
    this.maxX = this.radius - (canvasWidth - 20); 
    this.maxY = this.radius + canvasHeight; 

    this.draw = function(ctx) { 
     ctx.beginPath(); 
      ctx.arc(this.x, this.y, this.radius, 0, twoPI, true); 
     ctx.closePath(); 
     ctx.save(); 
      ctx.fillStyle = this.color; 
      ctx.fill(); 
     ctx.restore(); 
    }; 
}; 

這樣使用它：

// CREATE THE BALL 
ball = new Ball(centerX, canvasHeight - paddle.height - 30); 
ball.draw(ctx);