Как сделать так, чтобы по экрану игры перемещалось несколько массивов с разными словами?

Question

Итак, я делаю версию Flappy Bird, где птице нужно ловить определенные слова. С этой целью я пытаюсь сделать случайные слова из массива прокрутки по экрану справа налево. Пока у меня есть только [объект объекта] прокрутки по экрану, как это видно на прикрепленном рисунке. Обратите внимание, что я использую Canvas (ctx).

Как я могу отредактировать / изменить свой код, чтобы на экране вместо объекта [object Object]

* можно было прокручивать массив слов словаря 1004 * Вот соответствующие строки моего кода:

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


}

Снимок экрана моей проблемы

Answer 1

Добавьте дополнительный параметр, который представляет ваше имя в конструкторе Stick.

Используя ваше для l oop, передайте имена конструктору.

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


}