我開始玩飛揚的小鳥游戲 - 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