你可以在 javascript 的模板中声明 <canvas> 方法吗？

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

现在只是说

playerOne.persona();

但这只是完全失败并且不起作用，我不知道为什么。

我可能走错了路，我认为问题在于我试图从对象/模板中操作 canvas.context（我的脚本中的调用区域）。

也许这根本与我无关，我只是没有在模板的上下文中正确声明我的角色功能。

canvas API 的文档非常薄弱，任何正确方向的提示都将不胜感激。

Answer 1

首先，您需要“区域”变量是全局变量，因此在全局范围内声明它以便能够从任何地方访问它。

但我建议你使用一个框架来让动画变得更简单，比如CakeJS 或RaphaelJS。

Answer 2

在这方面又花了几分钟，得到了以下内容，这基本上是我从一开始就试图实现的目标。我的方向略有不同，但我仍然希望任何人都可以提供任何反馈。

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