<canvas>メソッドをjavascriptのテンプレート内に宣言できますか？

Question

私は最善の方法で問題を提起したが、ここに完全にわからない...

私はHTML5のキャンバスのAPIで遊んでてきた、キャンバスに図形を描画して移動するために、それを得る限り持っている

矢印キーで回してください。

私はさまざまな変数と関数をテンプレートに移動しようとしました。その結果、複数の図形が生成されました（最終的には異なるキーで制御されます）。

これは私が持っているものです。

function player(x, y, z, colour, speed){ 
    this.lx = x; 
    this.ly = y; 
    this.speed = 10; 
    this.playerSize = z; 
    this.colour = colour; 
} 

playerOne = new player(100, 100, 10, "#F0F"); 

function persona(z, colour){ 
    zone.fillStyle = colour; 
    offset = 0 - (z/2); 
    zone.fillRect(offset, offset, z, z); 
} 

function move(x, y){ 
    playerOne.lx = playerOne.lx + x; 
    playerOne.ly = playerOne.ly + y; 

    zone.clearRect(0, 0, 500, 500); 

    zone.save(); 
     zone.translate(playerOne.lx, playerOne.ly); 
     persona(playerOne.playerSize, playerOne.colour); 
    zone.restore(); 
} 

window.onkeydown = function() { 

    var direction = this.event.keyCode; 

    var s = playerOne.speed; 

    // Arrow Keys 
    if(direction == 38 && playerOne.ly >= 10){ // Up 
     move(0,-s); 
    } 

    if(direction == 40 && playerOne.ly <= 490){ // Down 
     move(0,s); 
    } 

    if(direction == 37 && playerOne.lx >= 10){ // Left 
     move(-s,0); 
    } 

    if(direction == 39 && playerOne.lx <= 490){ // Right 
     move(s,0); 
    } 
}; 

window.onload = function() { 
    zone = document.getElementById('canvas').getContext('2d'); 
    zone.save(); 
     zone.translate(playerOne.lx, playerOne.ly); 
     persona(playerOne.playerSize, playerOne.colour); 
    zone.restore(); 
}; 

だから、私は何をしようとしたことは、このようなプレーヤテンプレートにペルソナ機能を移動しました：それは

を言った前

function player(x, y, z, colour, speed){ 
    this.lx = x; 
    this.ly = y; 
    this.speed = 10; 

    function persona(){ 
     zone.fillStyle = colour; 
     var offset = 0 - (z/2); 
     zone.fillRect(offset, offset, z, z); 
    } 

} 

そして、

persona(playerOne.playerSize, playerOne.colour); 

今のところ

しかし、これは完全に外れていて動作していないため、わかりません。

私はおそらく間違っていると思いますが、問題は私がオブジェクト/テンプレート内からcanvas.context（スクリプト内のゾーンを呼び出す）を操作しようとしていることだと思います。

多分それはまったく関係がありません。私はテンプレートの文脈で正しく私の人格機能を宣言していないかもしれません。

キャンバスAPIのドキュメントは非常に薄く、正しい方向のヒントは非常に高く評価されます。

Answer 1

これをもう少しハッキングして、基本的には私が最初から達成しようとしていた次のものを手に入れました。私はこれと少し異なる方向に行きましたが、私はまだ誰もが望むかもしれないフィードバックをお待ちしています。

function Player(x, y, z, colour, speed){ 
    this.lx = x; 
    this.ly = y; 
    this.speed = speed; 
    this.it = false; 
    this.playerSize = z; 
    this.colour = colour; 

    this.move = move; 
    this.draw = persona; 
} 

function move(dx, dy){ 
    this.lx = this.lx + (dx * this.speed); 
    this.ly = this.ly + (dy * this.speed); 
} 

function persona(){ 
    zone.fillStyle = this.colour; 
    var offset = 0 - (this.playerSize/2); 
    zone.fillRect(offset, offset, this.playerSize, this.playerSize); 
} 

playerOne = new Player(400,400, 10, "#F0F", 10); 
playerTwo = new Player(100,100, 10, "#0F0", 10); 

function drawPlayers(){ 
    zone.clearRect(0, 0, 500, 500); 

    zone.save(); 
     zone.translate(playerOne.lx, playerOne.ly); 
     playerOne.draw(); 
    zone.restore(); 

    zone.save(); 
     zone.translate(playerTwo.lx, playerTwo.ly); 
     playerTwo.draw(); 
    zone.restore(); 
} 

window.onkeydown = function() { 

    var direction = this.event.keyCode; 

    // Arrows 
    if(direction == 38 && playerOne.ly >= 10){  // Up 
     playerOne.move(0,-1); 
    } 
    if(direction == 40 && playerOne.ly <= 490){ // Down 
     playerOne.move(0,1); 
    } 
    if(direction == 37 && playerOne.lx >= 10){  // Left 
     playerOne.move(-1,0); 
    } 
    if(direction == 39 && playerOne.lx <= 490){ // Right 
     playerOne.move(1,0); 
    } 

    // WASD 
    if(direction == 87 && playerTwo.ly >= 10){  // Up 
     playerTwo.move(0,-1); 
    } 
    if(direction == 83 && playerTwo.ly <= 490){ // Down 
     playerTwo.move(0,1); 
    } 
    if(direction == 65 && playerTwo.lx >= 10){  // Left 
     playerTwo.move(-1,0); 
    } 
    if(direction == 68 && playerTwo.lx <= 490){ // Right 
     playerTwo.move(1,0); 
    } 

    drawPlayers(); 

}; 

window.onload = function() { 
    zone = document.getElementById('canvas').getContext('2d'); 
    drawPlayers(); 
}; 

Answer 2

まず、 "zone"変数をグローバルにする必要があるため、グローバルスコープで宣言してどこからでもアクセスできるようにします。

しかし、CakeJSやRaphaelJSのように、アニメーションを本当に簡単にするためにフレームワークを使用することをお勧めします。

Answer 3

Player.drawメソッドは、キャンバス上でのスプライトの配置を処理できる必要があるとだけコメントしています。このコードはソリューションと同じように動作しますが、うまくいけば、はっきりとよりコンパクトです。

function Player(x, y, z, colour, speed){ 
    this.lx = x; 
    this.ly = y; 
    this.speed = speed; 
    this.it = false; 
    this.playerSize = z; 
    this.colour = colour; 
} 
Player.prototype = { 
    move: function(dx, dy){ 
     this.lx = this.lx + (dx * this.speed); 
     this.ly = this.ly + (dy * this.speed); 
    }, 
    draw: function(){ 
     var size = this.playerSize, 
      offset = size/2; 
     zone.fillStyle = this.colour; 
     zone.fillRect(playerTwo.lx - offset, playerTwo.ly - offset, size, size); 
    } 
}; 

playerOne = new Player(400,400, 10, "#F0F", 10); 
playerTwo = new Player(100,100, 10, "#0F0", 10); 

function drawPlayers(){ 
    zone.clearRect(0, 0, 500, 500); 

    playerOne.draw(); 
    playerTwo.draw(); 
}