我开始玩飞扬的小鸟游戏 - canvas 无法渲染/显示

Question

I have the beginnings of a flappy bird game - the canvas fails to render/display.我开始玩飞扬的小鸟游戏 - canvas 无法渲染/显示。 What should be displayed is a blue sky (context defined below) and a falling bird.应该显示的是蓝天（上下文定义如下）和一只坠落的鸟。 Instead it just shows a black screen.相反，它只显示黑屏。

The code is below: (all in one file) and the bird.png is in the root folder.代码如下：（全部在一个文件中），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>

What is further confounding, is that it is identical (or so says my "beyondcompare" tool, to another file (code below) which works perfectly and renders the required canvas, blue sky and bird to the screen.更令人困惑的是，它与另一个文件（下面的代码）完全相同（或者说我的“超越比较”工具），它完美地工作并将所需的 canvas、蓝天和鸟呈现到屏幕上。

I changed the context.filltext to use ` instead of " or ' (for the display of the text labels) but that didn't work either. Does this matter?我将 context.filltext 更改为使用 ` 而不是 " 或 ' （用于显示文本标签），但这也不起作用。这有关系吗？

Code below (which works)下面的代码（有效）

 <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>

Note, I have compared them using a tool, and it shows no differences except for some spacing, which I assume doesn't matter.请注意，我已经使用工具对它们进行了比较，除了一些间距之外，它没有显示任何差异，我认为这无关紧要。

Could anyone point out the error and tell me what I have done wrong.谁能指出错误并告诉我我做错了什么。

Answer 1

There are places where spaces matter.有些地方空间很重要。

For example you have:例如，您有：

 birdY - =birdDY -=0.5; //Gravity

You should have seen an error something like this in your browser's dev tools console:您应该在浏览器的开发工具控制台中看到类似这样的错误：

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

If you didn't, check that errors are being logged to the console.如果没有，请检查是否将错误记录到控制台。

Go through your code and the code you have copied making sure there are no other errors in the syntax. Go 通过您的代码和您复制的代码确保语法中没有其他错误。

我开始玩飞扬的小鸟游戏 - canvas 无法渲染/显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-15 17:09:40

我开始玩飞扬的小鸟游戏 - canvas 无法渲染/显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-15 17:09:40

解决方案1
1 已采纳 2021-02-15 17:09:40