在画布上显示来自数组的随机文本的问题

时间:2018-09-20 02:57:00

标签: javascript canvas

新手在这里。按照教程进行,并使用香草javascript制作了Flappy Bird克隆。现在,我对画布和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语句的条件。

如果有人能指出我正确的方向,那就太好了。

1 个答案:

答案 0 :(得分:0)

您必须使用所需分数上的随机字符串更新画布。

点击此处,我​​已经对此进行了演示。

D:\home\site\wwwroot\iisnode
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();
                });
            });