如何让多个不同单词的数组在游戏屏幕上移动？

Posted 2021-03-19

所以我正在制作一个Flappy Bird的版本，在这个版本中，小鸟必须抓住某些词汇。为此，我试图让一个数组中的随机单词从右到左在屏幕上滚动。到目前为止，我只有[对象对象]在屏幕上滚动，如附图所示。请注意，我使用的是Canvas（ctx）。

我怎样才能编辑我的代码，使我能让词汇数组在屏幕上滚动，而不是[对象对象]。

以下是我的相关代码。

//Stick

var Stick = function(x, y,) {
    this.x = x;
    this.y = y; 
};

Stick.prototype.draw = function() {
    //??   
};

// random sticks distribution

var sticks = ["test", "boy", "house"];
for (var i = 0; i < 20; i++) {  
    sticks.push(new Stick(i * 161 + 200, Math.floor(Math.random() * (400 - 10 + 1)) + 10));
}

function draw() {


for (var i = 0; i < sticks.length; i++) {
        ctx.fillText(sticks[i], sticks[i].x, sticks[i].y)
        //beaver.checkForStickGrab(sticks[i]);
        sticks[i].x -= 1;
    }


}

我的问题截图

答案

在Stick构造函数中添加一个额外的param，代表你的名字。

使用你的for循环将名字传递给构造函数。

ctx.fillText 我想应该接受名字作为第一个参数，这将是你在黑板上的文字。

//Stick

var Stick = function(x, y, name) {
  this.x = x;
  this.y = y;
  this.name = name;
};

Stick.prototype.draw = function() {
  //??   
};

// random sticks distribution

var stickNames = ["test", "boy", "house"];
var sticks = [];
for (var i = 0; i < 20; i++) {
  sticks.push(new Stick(i * 161 + 200, Math.floor(Math.random() * (400 - 10 + 1)) + 10, stickNames[i]));
}

function draw() {

  for (var i = 0; i < sticks.length; i++) {
    ctx.fillText(sticks[i].name, sticks[i].x, sticks[i].y)
    //beaver.checkForStickGrab(sticks[i]);
    sticks[i].x -= 1;
  }


}