微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。