Canvas Array用于保存多个Draw Image

Question

我正在开发一个太空入侵者主题画布游戏，我遇到了需要多次绘制相同图片（例如外星人）的问题。现在从我对JavaScript的基本知识和我当前版本的玩具开始，我假设我需要一个数组才能通过drawimage方法获得多个图片的实例，以便能够拥有许多图片而不是一个不断移动的图片。我的想法是，通过数组我也可以为正在绘制的图像分配ID，以便以后进行碰撞编程。

我的问题是，构建这样的数组的正确方法是能够在一行中完成大约10张图片，并且在X角度上有大约20px的差异，并为它们分配ID。

我在通过Google搜索执行此类操作的指导方面几乎找不到任何内容，因此您能够将我链接到的任何示例或材料都将非常感激。

Answer 1

修改

修改

<!-- language: javascript -->
var environment = function (opt) {
var self = this, shapes = [], shapeImage;
var options = opt || {}, canvasId = options.canvasId || {}, rowNum = options.rowNum || 5, colNum = options.colNum || 5, shapeImageUrl = options.imageURL || '';
var loopInterval, context;

var update = function () {
for (var x = 0; x < shapes.lenght; x++) {
    if (shapes[x].x + 1 < colNum) {
     shapes[x].x++;

     if (shapes[x].x == rowNum - 1) {
      shapes[x].y++;
     }
   }
  }
};

var draw = function () {
 for(var x = 0; x < shapes.length; x++){
  if(shapes[x].X == 0 && shapes[x].Y > 0)
    context.clearRect((colNum - 1) * shapes[x].Width ,(shapes[x].Y -1) *     shapes[x].Height, shapes[x].Width, shapes[x].Height);   

  else
    context.clearRect((shapes[x].X - 1) * shapes[x].Width, (shapes[x].Y) * shapes[x].Height, shapes[x].Width, shapes[x].Height);

  context.drawImage(shapeImage, shapes[x].X * shapes[x].Width, shapes[x].Y * shapes[x].Height);

  }
};
 var initCanvas = function() {
 if (canvasId) {
   var canvas = getElementById(canvasId);
   context = canvas.getContext('2d');
  }
 };

 var initShapes = function (rows, cols) {
  var num = 1;
  for (var i = 0; i < cols; i++) {
   for (var j = 0; j < rows; j++) {
     shapes.push(new shape(num, i, j));

   }
  }
};
var tick = function () {
 update();
 draw();
};

return function () {
  self.shape = function () {

   return function (id, x, y) {
    this.X = x;
    this.Y = y;
    this.Id = id;
   };
   };
  this.shape.prototype.Width = 30;
  this.shape.prototype.Height = 30;

  this.start = function () {
   initCanvas();
   initShapes(rowNum, colNum);

   shapeImage = new Image();
   shapeImage.url = shapeImageUrl;
   shapeImage.onload = function() {
    loopInterval = setInterval(tick(), 1000 / 60);

    };
  };
 };
};