我正在制作一个基于网络的游戏，使用 HTML5 画布和 JavaScript 教用户一些基本的威尔士语。目前，我的游戏有一个数字 1-10 的图像列表，以及一个数字 1-10 的威尔士语单词列表。当用户开始游戏时，图像列表中的随机图像和单词列表中的随机单词会显示在画布上。还显示了一个勾号和一个叉号，并且要求用户通过单击勾号或叉号来指示所显示的单词是否与所显示的数字正确。
我有一个 JavaScript 变量“currentScore”，它显示在画布顶部的“得分栏”中，每次用户正确选择图像和显示的单词是否代表相同的号码。但是，我无法弄清楚如何做到这一点。
目前，我有以下代码，它在画布上显示分数，但在错误的位置 - 它位于分数栏下方。它还以某种“气泡”字体显示它，而不是我想要使用的字体 Calibri。
此外，当用户多次单击勾号或叉号时，会在用户的分数中添加另一个点，尽管 currentScore 的值已更新，并写入画布（在同一个错误的位置），但它不会清除之前写在那里的乐谱，所以我最终在画布上写了几个乐谱，这使得实际乐谱不清楚，因为很难阅读。
这是我的功能的代码：
/*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);
有人可以向我指出我做错了什么，以及如何让当前分数显示在我的分数栏中，并在每次用户通过单击勾选或正确选项注册分数时更新那里十字？
我的分数条的代码是：
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);
}
谢谢。