Javascript 我有一个flappy bird游戏的开始-画布无法渲染/显示_Javascript_Html_Flappy Bird Clone

Javascript 我有一个flappy bird游戏的开始-画布无法渲染/显示

javascript html

Javascript 我有一个flappy bird游戏的开始-画布无法渲染/显示,javascript,html,flappy-bird-clone,Javascript,Html,Flappy Bird Clone,我有一个flappy bird游戏的开始-画布无法渲染/显示。应该显示的是一片蓝天（上下文定义如下）和一只坠落的小鸟。相反，它只是显示一个黑屏代码如下：（全部在一个文件中），bird.png位于根文件夹中 <body style="height: 100vh; background: #111; text-align: center;"> <canvas id="c" width="400" height=&

我有一个flappy bird游戏的开始-画布无法渲染/显示。应该显示的是一片蓝天（上下文定义如下）和一只坠落的小鸟。相反，它只是显示一个黑屏

代码如下：（全部在一个文件中），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,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>


//设置上下文
context=c.getContext（“2d”）；
//造鸟
const bird=新图像（）；
bird.src=“bird.png”；
//创建变量
var canvasSize=400；
var birdSize=30；
var-birdX=0；
var-birdY=200；
var-birdDY=0；
var得分=0；
var得分=0；
var区间=30//游戏进行的速度
设置间隔（（）=>{
context.fillStyle=“天蓝色”；
context.fillRect（0,0，canvasSize，canvasSize）；//绘制天空
birdY-=birdDY-=0.5；//重力
context.drawImage（bird，birdX，birdY，birdSize，birdSize）；//绘制bird（将birdSize乘以一个数字以调整大小）
context.fillStyle=“black”；
context.fillText（'Flappy Birds'，170,10）；//x和y
context.fillText（'Score:${Score++}'，350380）；//绘制分数
}，间隔时间）

更令人困惑的是，它与另一个文件（下面的代码）完全相同（或者我的“beyondcompare”工具是这么说的），它可以完美地将所需的画布、蓝天和小鸟渲染到屏幕上

我将context.filltext改为使用`而不是`or'（用于显示文本标签），但这也不起作用。这有关系吗

下面的代码（有效）


//设置上下文
context=c.getContext（“2d”）；
//造鸟
const bird=新图像（）；
bird.src=“bird.png”；
//创建变量
var canvasSize=400；
var birdSize=30；
var-birdX=0；
var-birdY=200；
var-birdDY=0；
var得分=0；
var得分=0；
var interval=30；//玩游戏的速度
设置间隔（（）=>{
context.fillStyle=“天蓝色”；
context.fillRect（0,0，canvasSize，canvasSize）；//绘制天空
birdY-=birdDY-=0.5；//重力
context.drawImage（bird，birdX，birdY，birdSize，birdSize）；//绘制bird（将birdSize乘以一个数字以调整大小）
context.fillStyle=“黑色”；
context.fillText（`Flappy Birds`，170，10）；//x和y
context.fillText（`Score:${Score++}`，350380）；//绘制分数
}，间隔时间）

请注意，我使用工具比较了它们，除了一些间距之外，没有显示任何差异，我认为这无关紧要

谁能指出错误并告诉我我做错了什么。

有些地方空间很重要

例如，您有：

 birdY - =birdDY -=0.5; //Gravity

您应该在浏览器的开发工具控制台中看到类似这样的错误：

test12.html:4 Uncaught SyntaxError: Unexpected token '='

如果没有，请检查控制台是否记录了错误

仔细检查您的代码和您复制的代码，确保语法中没有其他错误。

应该是什么？我已经使用了空格，没有区别。在其他地方有错误。我没有复制/粘贴代码，但键入了有效的代码-但是我们怎么知道呢！！@A Haworth-还有som这行有问题-context.fillText（'Score:${Score++}，250380）；//Draw Score--看起来一模一样-有什么想法吗？@A Haworth-如果你感兴趣，这里有一个相关的问题：）它似乎与我们已经发现的问题相同，是一个虚假的空间。强烈建议在浏览器中使用开发工具并查找错误，

test12.html:4 Uncaught SyntaxError: Unexpected token '='