Question

对于更大的项目，我需要您的帮助。以下代码应显示游戏的基本运行状况栏。第一个代码正在运行，但是它的“函数语法”有效，对于我的整个项目，我需要像第二个代码一样的“类语法”中的代码。但是我做错了什么，我看不到我的错误。

感谢您的帮助。

第一个代码：

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

Answer 1

drawHealthBar不应是SnakeGame的一部分。相反，HealthBar应该具有draw的{{1}}方法。

您的代码无效，原因是：

1）context不存在，context.drawHealthbar存在于SnakeGame中，而不存在于上下文中。

2）.drawHealthbar中的this是SnakeGame，而不是HealthBar。

将函数语法更改为类语法

1 个答案: