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

Question

我开始玩飞扬的小鸟游戏 - canvas 无法渲染/显示。 应该显示的是蓝天（上下文定义如下）和一只坠落的鸟。 相反，它只显示黑屏。

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

更令人困惑的是，它与另一个文件（下面的代码）完全相同（或者说我的“超越比较”工具），它完美地工作并将所需的 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 '='

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

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