I have the beginnings of a flappy bird game - the canvas fails to render/display
Question
I have the beginnings of a flappy bird game - the canvas fails to render/display. 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.
<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.
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?
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.
1 answers
solution1
1 ACCPTED 2021-02-15 17:09:40
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.