私はHTML5キャンバスとJavaScriptを使用してユーザーにいくつかの基本的なウェールズを教えるためのWebベースのゲームを作成しています。現在、私のゲームには、1〜10の数字の画像のリストと、1〜10の数字のウェールズ語のリストがあります。ユーザがゲームを開始すると、画像リストからのランダムな画像と、単語リストからのランダムな単語がキャンバス上に表示される。目盛と十字マークも表示され、ユーザは、表示された単語が、目盛りまたは十字のいずれかをクリックすることによって表示された数字に対して正しいものかどうかを示す必要があります。HTML5キャンバスに表示されるjavascript変数の値を更新します。
私はJavaScript変数 'currentScore'をキャンバスの上部に 'スコアバー'で表示しています。これは、ユーザーが画像と画像の間に正しい選択をするたびに更新したい表示される単語は同じ番号を表します。しかし、私はこれを行う方法を解決することはできません。
現時点では、私はキャンバスにスコアを表示していますが、間違った場所にスコアバーを表示しています。それは、私が使用したいフォントであるCalibriとは対照的に、ある種の「バブル」フォントでも表示しています。
また、ユーザーがtickまたは十字を複数回クリックして別のポイントがユーザーのスコアに追加された場合、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);
}
感謝。
@alexに役立つことを願って - うん！ * highfive * –
ああ、申し訳ありませんが、あなたの質問が回答されたことを示す方法があるかどうかはわかりませんでした。ありがとう。 – Someone2088
私の親友オビ=ワン氏の言葉を引用すると、SOの "フォーラムではない...それは宇宙ステーションだ" – btown