更新顯示在HTML5畫布上的JavaScript變量的值

Question

我正在製作基於Web的遊戲，以便使用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); 
     } 

感謝。

Answer 1

1. 評分欄繪製爲700像素長，但當清除評分欄時，clearRect使用20或30像素的長度清除它。 這是否應該清除整個評分欄？

   • 此外，當執行當前樂譜的strokeText時，x/y值每次調用時都會有所不同（500或650）。
   • 我們沒有在其中設置（或改變）currentScorePositionX和Y瓦爾的代碼，因此它可能需要檢查這些值也 - 他們是一致的，是他們設置不當等

2. 我不確定字體問題發生了什麼。再一次，我們沒有全部代碼，所以我們必須做出一些假設。 我假設上下文存儲在一個全局變量中。 stackoverflow上的這個其他線程有問題，忽略字體的畫布： HTML 5 canvas font being ignored
   他們發現他們調用了getContext，它重置了畫布狀態。這可能也值得考慮你的代碼。

希望這有助於