我有一个 flappy bird 游戏的开始 - canvas 失败 render/display

Question

我有一个 flappy bird 游戏的开始 - canvas 失败 render/display。应该显示的是蓝天（下文定义的上下文）和一只坠落的鸟。相反，它只显示黑屏。

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

更令人困惑的是，它与另一个文件（下面的代码）完全相同（或者我的“beyondcompare”工具这么说），它完美地工作并呈现所需的 canvas、蓝天和鸟屏幕。

我将 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,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>

请注意，我已经使用工具对它们进行了比较，除了一些间距外没有其他差异，我认为这无关紧要。

谁能指出错误并告诉我哪里做错了。

Answer 1

有些地方空格很重要。

例如你有：

 birdY - =birdDY -=0.5; //Gravity

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

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

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

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

我有一个 flappy bird 游戏的开始 - canvas 失败 render/display

I have the beginnings of a flappy bird game - the canvas fails to render/display

html

javascript

flappy-bird-clone