1

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.

4

1 に答える 1

0

  1. スコアバーは700ピクセルの長さで描画されますが、スコアバーがクリアされると、clearRectは20または30ピクセルの長さを使用してスコアバーをクリアします。これはスコアバー全体をクリアする必要がありますか？

    • また、現在のスコアに対してstrokeTextを実行する場合、x / y値は呼び出されるたびに異なります（500または650）。
    • currentScorePositionX変数とY変数を設定（または変更）するコードがないため、これらの値も確認する価値があるかもしれません-それらは一貫しているか、適切に設定されているかなどです。

  2. フォントの問題で何が起こっているのかわかりません。繰り返しますが、すべてのコードを持っているわけではないので、いくつかの仮定を立てる必要があります。コンテキストはグローバル変数に格納されていると思います。stackoverflowのこの他のスレッドでは、キャンバスがフォントを無視するという問題がありました。HTML5 キャンバスフォントが無視される
    と、キャンバスの状態をリセットするgetContextを呼び出していることがわかりました。それはあなたのコードも調べる価値があるかもしれません。

これがお役に立てば幸いです

于 2012-05-12T12:43:39.233 に答える