Question

I’m making a web based game to teach users some basic Welsh using the HTML5 canvas and JavaScript. Currently, my game has a list of images for the numbers 1-10, and a list of the Welsh words for the numbers 1-10. When the user starts the game, a random image from the images list, and a random word from the words list are displayed on the canvas. A tick and a cross are also displayed, and the user is required to indicate whether the word displayed is the correct one for the number displayed by clicking either the tick or the cross.

I have a JavaScript variable ‘currentScore’ which is displayed at the top of the canvas in a ‘score bar’, which I want to update every time the user makes a correct selection as to whether or not the image and the word displayed represent the same number. However, I can’t work out how to do this.

At the moment, I have the following code, which is displaying the score on the canvas, but in the wrong place- it’s below the score bar. It is also displaying it in some sort of ‘bubble’ font, as opposed to Calibri, which is the font I want to use.

Also, when the user clicks the tick or the cross more than once, and another point is added to the user’s score, although the value of currentScore is updated, and written to the canvas (in the same wrong place), it doesn’t clear the score that was previously written there, so I end up with several scores written on top of each other on the canvas, which makes the actual score unclear as it is hard to read.

This is the code for my function:

/*Add an event listener to the page to listen for a click on the tick or the cross, if the user clicks
            the right one to indicate whether the image and word relate to the same number or not, increase the
            user's score*/
        myGameCanvas.addEventListener('click', function(e){
            console.log('click: ' + e.pageX + '/' + e.pageY);
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            /*If the tick is clicked, check whether or not the image and word represent the same number, if they do,
                increase the score, if not, leave the score as it is*/
            if((mouseX > 250 && mouseX < 300) && (mouseY > 200 && mouseY < 250) && (drawnImage == drawnWord)){ 
                currentScore = currentScore + 5;
                var scorePositionX = currentScorePositionX;
                var scorePositionY = currentScorePositionY;
                context.clearRect(scorePositionX, scorePositionY, 30, 30); /*Clear the old score from the canvas */
                context.strokeText(currentScore, 650, 50); /*Now write the new score to the canvas */
                console.log('Current Score = ' + currentScore);
            } else if((mouseX > 250 && mouseX < 300) && (mouseY > 200 && mouseY < 250) && (drawnImage != drawnWord)){
                currentScore = currentScore; 
                console.log('Current Score = ' + currentScore);

            /*If the cross is clicked, check whether or not the image and word represent the same number, if they 
                don't, increase the score, otherwise, leave the score as it is*/
            } else if((mouseX > 350 && mouseX < 400) && (mouseY > 200 && mouseY < 250) && (drawnImage != drawnWord)){
                currentScore = currentScore + 5;
                context.clearRect(currentScorePositionX, currentScorePositionY, 20, 20); /*Clear the old score from the canvas */
                context.strokeText(currentScore, 500, 50); /*Now write the new score to the canvas */
                console.log('Current Score = ' + currentScore);
            } else if ((mouseX > 350 && mouseX < 400) && (mouseY > 200 && mouseY < 250) && (drawnImage == drawnWord)){
                currentScore = currentScore; 
                console.log('Current Score = '+ currentScore); 
            } else {
                console.log('The click was not on either the tick or the cross.');
            }
        }, false);

Could someone point out to me what I’m doing wrong, and how I can get the current score to be displayed in my score bar, and updated there every time the user registers a score by clicking on the correct option of either the tick or the cross?

The code for my score bar is:

function drawGameElements(){

            /* Draw a line for the 'score bar'. */
            context.moveTo(0, 25);
            context.lineTo(700, 25);
            context.stroke();

            /* Draw current level/ total levels on the left, and current score on the right. */
            context.font = "11pt Calibri"; /* Text font & size */
            context.strokeStyle = "black"; /* Font colour */
            context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
            context.strokeText(currentScore, currentScorePositionX, currentScorePositionY);
        }

Thanks.

Answer 1

1. The score bar is drawn as being 700 pixels long, but when the score bar is cleared, clearRect is using a length of either 20 or 30 pixels to clear it.
   Should this be clearing the entire score bar?

   • Also, when performing the strokeText for the current score, the x/y values are different each time it is called (500 or 650).
   • we don’t have the code where you set (or change) the currentScorePositionX and Y vars, so it may be worth checking those values also – are they consistent, are they set properly, etc

2. I’m not sure what is happening with the font problem. Again, we don’t have all the code, so we’ve got to make some assumptions.
   I assume that the context is stored in a global var.
   this other thread on stackoverflow had problems with the canvas ignoring the font:
   HTML 5 canvas font being ignored
   they found that they were calling getContext which was resetting the canvas state. That may be worth looking into for your code also.

Hope that this helps