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