Проблема с отображением произвольного текста из массива на холсте

Question

Новичок здесь.Последовал учебник и сделал клон Flappy Bird в ванильном javascript.Теперь я гораздо лучше понимаю холст и логику игр javascript, и мне было очень интересно настраивать код.

В настоящее время я пытаюсь отобразить одну из трех случайных строк из массивакаждые 3 очка набираются.

Это мой код:

 var motivation = ["Radical!", "Tubular!", "Cowabunga, dude!"];



  var motivationRandom = motivation[Math.floor(Math.random() * 
 motivation.length)];

  if (score % 3 === 0 && score !==0){
      ctx.fillstyle = "#000";
      ctx.font = "50px Impact";
      ctx.fillText(motivationRandom, 50, cvs.height-50);
    }

Когда счет кратен 3, текст будет быстро переключаться между одной из трех строк в массиве, пока не будет набрана другая точка иусловия оператора if больше не выполняются.

Было бы замечательно, если бы кто-то мог указать мне правильное направление.

Answer 1

Вы должны обновить холст, добавив в него произвольную строку на желаемом счете.

Я сделал демонстрацию этого при нажатии кнопки здесь.

var score=1;
var motivation = ["Radical!", "Tubular!", "Cowabunga, dude!"];

function updateCanvas(){
var cvs = document.getElementById("myCanvas");
var ctx = cvs.getContext("2d");

ctx.font = "15px Georgia";
 var motivationRandom = motivation[Math.floor(Math.random() * 
 motivation.length)];
//console.log(motivationRandom,score);
  if (score % 3 === 0 && score !==0){
  ctx.clearRect(0, 0, cvs.width, cvs.height);   
     ctx.fillstyle = "#000";
      ctx.font = "50px Impact";
    ctx.fillText(motivationRandom, 10, cvs.height-50);
    }
   } 
     $(document).ready(function(){
                $('#AddButton').click( function() {
                    score++ ;
                  updateCanvas();
                });
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="Button" id='AddButton' value="+" />
<canvas id="myCanvas" width="500" height="100" style="border:1px solid #d3d3d3;">