我有一个飞扬的鸟类游戏的开始 - 画布无法渲染/显示

编程问答 2022-05-25

问题描述

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

代码如下：（全部在一个文件中）并且bird.png在根文件夹中。

-data

更令人困惑的是，它与另一个文件（下面的代码）完全相同（或者说我的“beyondcompare”工具），该文件完美运行并将所需的画布、蓝天和鸟类呈现到屏幕上。

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

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

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

解决方法

有些地方空间很重要。

例如你有：

 birdY - =birdDY -=0.5; //Gravity

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

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

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

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

flappy-bird-clonehtmljavascript