为什么我的分数函数没有出现在我的 canvas 和 ctx.fillText 中？

Question

我正在使用 canvas 开发贪吃蛇游戏，但无法在右上角显示玩家得分。这应该在 drawScore 函数中处理，但文本不会出现。我在控制台中没有收到任何错误，也没有发现代码本身有任何问题。

如有任何建议，我们将不胜感激！

class SnakePart {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
}

const body = document.body;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

let speed = 7; // base speed variable of snake

const snakeParts = [];
let tailLength = 2;

let tileCount = 20;//number of tiles on screen
let headX = 10;//snake width
let headY = 10;//snake height
let tileSize = canvas.width / tileCount - 2;//size of tiles where apple spawns
let xv = 0;// x axis velocity
let yv = 0;//y axis velocity
let ax = 5;//apple position x axis
let ay = 5;//apple position y axis
let score = 0;
    
//draws game loop
function drawGame(){
    //game loop
    clearScreen();
    changeSnakePosition();
    checkAppleCollision();
    drawApple();
    drawSnake();
    drawScore();
    setTimeout(drawGame, 1000/speed);
}

function drawScore(){
    ctx.fillStyle = 'white';
    ctx.font = '12px Helvetica';
    ctx.fillText = ("Score: " + score, canvas.width-50, 10);
}

function clearScreen(){
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canvas.width,canvas.height);
}

function drawSnake(){
    ctx.fillStyle = 'orange';
    ctx.fillRect(headX * tileCount, headY * tileCount, tileSize,tileSize);
    ctx.fillStyle = 'green'
    for(let i = 0; i<snakeParts.length; i++){
        let part = snakeParts[i];
        ctx.fillRect(part.x *tileCount,part.y*tileCount,tileSize,tileSize)
    }
    snakeParts.push(new SnakePart(headX,headY)); //put a segment at the end of the snake next to the head
    while(snakeParts.length > tailLength){
        snakeParts.shift(); //remove the furthest item from the snake parts if we have more than our tailSize.
    }
}

body.addEventListener('keydown', keyDown);
    
function keyDown(event){
    switch(event.keyCode) {
        case 37:
            if(xv == 1)
            return;
            yv = 0;
            xv = -1
            break;
        case 38:
            if(yv == 1)
            return;
            yv= -1;
            xv = 0;
            break;
        case 39:
            if(xv == -1)
            return;
            yv = 0;
            xv = 1
            break;
        case 40:
            if(yv == -1)
            return;
            yv = 1;
            xv = 0;  
    }
}

function changeSnakePosition(){
    headX = headX + xv;
    headY = headY + yv;
}

function drawApple(){
    ctx.fillStyle = 'red';
    ctx.fillRect(ax*tileCount,ay*tileCount,tileSize,tileSize)
}

function checkAppleCollision(){
    if(ax === headX && ay == headY){
        ax = Math.floor(Math.random()*tileCount);
        ay = Math.floor(Math.random()*tileCount);
        tailLength++;
        score++;
        speed++;
    }
}

drawGame();

<canvas id="canvas"></canvas>

Answer 1

问题出在这一行：

ctx.fillText = ("Score: " + score, canvas.width-50, 10);

应该是：

ctx.fillText("Score: " + score, canvas.width-50, 10);

这是一个精简的例子：

const body = document.body;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

let score = 0;
    
function drawGame() {
    clearScreen();
    drawScore();
}

function drawScore() {
    ctx.fillStyle = 'white';
    ctx.font = '12px Helvetica';
    ctx.fillText("Score: " + score, canvas.width-50, 10);
}

function clearScreen() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canvas.width,canvas.height);
}

drawGame();

<canvas id="canvas"></canvas>

为什么我的分数函数没有出现在我的 canvas 和 ctx.fillText 中？

Why isn't my score function showing up in my canvas with ctx.fillText?

javascript

html5-canvas