如何解决我有一个飞扬的鸟类游戏的开始 - 画布无法渲染/显示
我开始玩飞扬的鸟类游戏 - 画布无法渲染/显示。应该显示的是蓝天(上下文定义如下)和下降的鸟。相反,它只显示黑屏。
代码如下:(全部在一个文件中)并且bird.png在根文件夹中。
-data
更令人困惑的是,它与另一个文件(下面的代码)完全相同(或者说我的“beyondcompare”工具),该文件完美运行并将所需的画布、蓝天和鸟类呈现到屏幕上。
我将 context.filltext 更改为使用 ` 而不是 " 或 '(用于显示文本标签),但这也不起作用。这有关系吗?
下面的代码(有效)
<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>
请注意,我使用工具对它们进行了比较,除了一些间距外,没有显示任何差异,我认为这无关紧要。
谁能指出错误并告诉我我做错了什么。
解决方法
有些地方空间很重要。
例如你有:
birdY - =birdDY -=0.5; //Gravity
您应该在浏览器的开发工具控制台中看到类似这样的错误:
test12.html:4 Uncaught SyntaxError: Unexpected token '='
如果没有,请检查是否将错误记录到控制台。
检查您的代码和您复制的代码,确保语法中没有其他错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。