HTML5キャンバス要素をオブジェクトとして

Question

古いアクションスクリプトゲームをHTML5に変換したい。私は、AS3があなたに与えるアプローチが好きです。キャンバスに描画する各要素は、アクションやアニメーションの実行など、操作できるオブジェクトです。

ストレートキャンバスはあなたにこのような能力を与えてくれないようですが、私はHTML5キャンバスを抽象化したフレームワークがあることを期待していました。

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

が好き、それを使用してください：cocos2dのJavaScriptのポートに

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