Можете ли вы объявить <canvas>методы в шаблоне в JavaScript?

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 (зона вызова в моем скрипте) изнутри объекта / шаблона.

Возможно, это не имеет к этому никакого отношения, и я просто не заявляю, что моя персона функционирует должным образом в контексте шаблона.

Документация по API Canvas очень тонкая на земле, и любой намек в правильном направлении будет очень признателен.

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

Просто комментируя, что ваш метод 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();
}

Answer 3

Во-первых, вам нужно, чтобы переменная "zone" была глобальной, поэтому объявите ее в глобальной области видимости, чтобы иметь доступ к ней из любого места.

Но я предлагаю вам использовать каркас, чтобы сделать анимацию действительно проще, например CakeJS или RaphaelJS .