Question

我正在用javascript和HTML5制作游戏。在我之前的游戏中，当我需要5个方块移动时，我会这样做。

var square0 = {
  x: 0,
  y: 0,
  side: 10,
  velX: 5,
  velY: 5
}
var square1 = {
  x: 0,
  y: 0,
  side: 10,
  velX: 5,
  velY: 5
}
.
.
.
var squares = [square0, square1, ... ];

然后把它全部放在for循环中用它来做事。但是我学到了很难的方法，如果你想要很多物体，这就变得非常无效。如果我想使用100个方格，我该怎么做？有任何想法吗？请不要使用任何JQuery。

Answer 1

计算机很擅长重复。因此，在这种情况下，您可以创建一个for循环来生成正方形数组。要么全部相同，要么每次都可以使用Math.random()来更改某些参数！

Answer 2

如果你只想快速生成一堆对象并将它们放在一个数组中，你可以创建一个生成它们的函数，然后在for循环中调用该函数。

function createSquare(x, y, side, velX, velY) {
  return {
    x: x,
    y: y,
    side: side,
    velX: velX,
    velY: velY
  };
}

var squares = [];
for (var i = 0; i < 100; i++) {
  // You could generate different values here as needed
  var square = createSquare(0, 0, 10, 5, 5);
  squares.push(square);
}

对于构造函数来说，这听起来也是一个绝佳的机会。

function Square(x, y, side, velX, velY) {
  this.x = x;
  this.y = y;
  this.side = side;
  this.velX = velX;
  this.velY = velY;
}

var squares = [];
for (var i = 0; i < 100; i++) {
  squares.push(new Square(0, 0, 10, 5, 5));
}

Answer 3

谢谢你们！我认为这最适合我的目的，感谢djechlin。

var squares = [];


for (var i = 0; i < 100; i++) squares.push({ x: 20 * i  , y:100, side:10, velX: 5, velY: 5});

for (var i = 0; i < squares.length; i++){
  ctx.fillRect(squares[i].x, squares[i].y, squares[i].side, squares[i].side);
}

Answer 4

您可以使用可以覆盖的选项为square创建构造函数。如果你愿意，你可以修改你的方块。检查下面的例子

var squares = [];

//constructor 
function Square(setting) {
  var defaultSetting = {
    x: 0,
    y: 0,
    side: 10,
    velX: 5,
    velY: 5
  }
  var options = setting || defaultSetting;

  this.x = options.x;
  this.y = options.y;
  this.side = options.side;
  this.velX = options.velX;
  this.velY = options.velY;

  //this function even can push your new square to squares array immediately (in constructor functions).
  squares.push(this);
}


new Square({
  x: 10,
  y: 0,
  side: 7,
  velX: 5,
  velY: 5
}); //create new exemplar 

for (var i = 0; i < 100; i++) {
  new Square({
    x: 10,
    y: 0,
    side: 7,
    velX: 5,
    velY: 5
  });
  //generate 100 exemplars
}

显示很多对象 - javascript

4 个答案: