Question

我不完全确定我以最好的方式提出问题但是这里......

我一直在使用HTML5 canvas 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

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

但我建议您使用框架来简化动画，例如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();
}

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

3 个答案: