изменить синтаксис функции в синтаксис класса - PullRequest
Новая
       25

изменить синтаксис функции в синтаксис класса

0 голосов
/ 22 июня 2019

для более крупного проекта, мне нужна ваша помощь в простой вещи. Следующий код должен показать базовую панель здоровья для игры. Первый код работает, но это «синтаксис функции», и для всего моего проекта мне нужен код в «синтаксисе класса», как и мой второй код. Но я сделал что-то не так и не вижу своей ошибки.

Спасибо за вашу помощь.

Первый код: 

var display = document.getElementById('gameCanvas').getContext('2d');

drawHealthbar(display,10,10,500,50,100,100);

function drawHealthbar(canvas,x,y,width,height,health,max_health){

    if(health >= max_health){health = max_health;}
    if(health <= 0){health = 0;}
    canvas.fillStyle = '#000000';
    canvas.fillRect(x,y,width,height);
    var colorNumber = Math.round((1-(health/max_health))*0xff)*0x10000+Math.round((health/max_health)*0xff)*0x100;
    var colorString = colorNumber.toString(16);
    if (colorNumber >= 0x100000){
        canvas.fillStyle = '#'+colorString;
    }else if (colorNumber << 0x100000 && colorNumber >= 0x10000){
        canvas.fillStyle = '#0'+colorString;
    }else if (colorNumber << 0x10000){
        canvas.fillStyle = '#00'+colorString;
    }
    canvas.fillRect(x+1,y+1,(health/max_health)*(width-2),height-2);
}

Второй код: 

let canvas = document.querySelector('canvas');


canvas.width = window.innerWidth;

canvas.height = window.innerHeight;


let gridWidth = 30;


while(canvas.height % gridWidth !== 0) {
    canvas.height--;
}

while(canvas.width % gridWidth !== 0) {
    canvas.width--;
}

canvas.width -= gridWidth;
canvas.height -= gridWidth;


class SnakeGame {
    constructor(canvas, width, height, health, max_health) {

        this.canvas = canvas;

        this.context = canvas.getContext('2d');

        this.width = width;
        this.height = height;

        this.health = health;
        this.max_health = max_health;

        this.healthbar = Healthbar (width, height);

    }
    update(){
        this.healthbar.update(this.width, this.height);
    }

    draw(){
        //this.drawHealthbar.draw(this.context);
        context.beginPath();
        context.lineWidth = "6";
        context.strokeStyle = "red";
        context.rect(0, 0, 30, 30);
        context.stroke();
    }

    drawHealthbar(){
        if(this.health >= this.max_health){this.health = this.max_health;}
        if(this.health <= 0){this.health = 0;}
        this.context.fillStyle = '#000000';
        this.context.fillRect(this.x, this.y,this.width, this.height);
        var colorNumber = Math.round((1-(this.health/this.max_health))*0xff)*0x10000+Math.round((this.health/this.max_health)*0xff)*0x100;
        var colorString = colorNumber.toString(16);
        if (colorNumber >= 0x100000){
            this.context.fillStyle = '#'+colorString;
        }else if (colorNumber << 0x100000 && colorNumber >= 0x10000){
            this.context.fillStyle = '#0'+colorString;
        }else if (colorNumber << 0x10000){
            this.context.fillStyle = '#00'+colorString;
        }
        this.context.fillRect(this.x+1,this.y+1,(this.health/this.max_health)*(this.width-2),this.height-2)}
}

class Healthbar{

    constructor(canvas, x,y,width,height,health,max_health){

        this.x = x;

        this.y = y;

        this.width = width;
        this.height = height;
        this.health = health;
        this.max_health = max_health;
    }
    update (width, height){};

    draw(context){
        context.drawHealthbar(canvas,10,10,500,50,100,100);
    }
}

1 Ответ

1 голос
/ 22 июня 2019

drawHealthBar не должно быть частью SnakeGame.Вместо этого HealthBar должен иметь метод draw, который использует context для рисования.

Ваш код не работает, потому что:

1) context.drawHealthbar не существует, .drawHealthbar существует в SnakeGame, а не в Context.

2) this внутри drawHealthbar() - это SnakeGame, а не HealthBar.

...