如何使具有不同单词的多个数组在游戏屏幕上移动？答案

【问题标题】：How can I make multiple arrays with different words move across the game screen?如何使具有不同单词的多个数组在游戏屏幕上移动？
【发布时间】：2020-04-22 13:34:16
【问题描述】：

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

如何编辑/修改我的代码，以便我可以在屏幕上滚动一系列词汇来代替 [object Object]

以下是我的代码的相关行：

//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;
    }


}

Screenshot of my problem

【问题讨论】：

您也应该将棒名称传递给 Stick 构造函数，因此您可以将其拉出到其他地方来绘制/显示它
我将如何将棒名称传递给构造函数以便将其显示到画布上？
查看下面的答案

标签： javascript arrays loops canvas

【解决方案1】：

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

使用您的 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;
  }


}

【讨论】：