context.fillText 分数无法在屏幕上增加或正确显示

问题描述

我开始玩飞扬的鸟类游戏 - 分数没有增加。

代码如下：（全部在一个文件中）并且bird.png在根文件夹中。

<body style="height: 100vh; background: #111; text-align: center;">
    <canvas id="c" width="400" height="400"></canvas>
    

   <script>
//set up context
       context=c.getContext("2d");
//create bird
       const bird=new Image();
       bird.src="bird.png";
       //create variables
       var canvasSize=400;
       var birdSize=30;
       var birdX=0;
       var birdY=200;
       var birdDY=0;
       var score=0;
       var bestscore=0;
       var interval=30; //the speed at which the game is played
       
       
       setInterval(()=> {
           context.fillStyle="skyblue";
           context.fillRect(0,canvasSize,canvasSize); //Draw sky
           birdY - =birdDY -=0.5; //Gravity
           context.drawImage(bird,birdX,birdY,birdSize,birdSize);// Draw bird (multiply the birdSize by a number to adjust size)
           context.fillStyle="black";
           context.fillText('Flappy Birds',170,10); //x and y
           context.fillText('score: ${score++}',350,380);//Draw score       
       },interval)
       
    </script>
    
</body>

更令人困惑的是，它与另一个文件（相关位的代码如下）完全相同（或者说我的“beyondcompare”工具），该文件完美运行并将所需的画布、蓝天和鸟渲染到屏幕并增加分数。

我在另一个文件中有这个代码，它确实有效（增加分数）

context.fillText(`score: ${score++}`,380); // Draw score

请注意，我已经使用工具对它们进行了比较，除了一些间距和使用 ` 而不是 ' 这在其他地方没有任何区别之外，它没有显示出任何区别，所以我认为它在这里也不会。

谁能指出错误并告诉我我做错了什么。我希望分数在播放程序时增加。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flappy-bird-clone html javascript