I have the beginnings of a flappy bird game - and the score is not incrementing.
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 for the relevant bit is below) which works perfectly and renders the required canvas, blue sky and bird to the screen and increments the score.
I have this code, in another file, which does work (increments the score)
context.fillText(`Score: ${score++}`,350, 380); // Draw score
Note, I have compared them using a tool, and it shows no differences except for some spacing and the use of ` instead of ' which doesn't make a difference elsewhere, so I assumed it would not here either.
Could anyone point out the error and tell me what I have done wrong. I would like the score to increment on playing the program.
