flutter - 创建类似于突破游戏的方 block 网格

Question

我正在尝试创建Breakout游戏的简单克隆。

如何在某些(x，y)位置渲染网格中的所有块？

该应用程序显示块，但所有块都在同一位置。

class Block {
  Random random = Random();
  Rect rect;
  Paint paint;
  Size size;

  Block({this.size}) {
    rect = Rect.fromLTWH(
        16,
        16,
        50,
        25);
    paint = Paint()..color = Colors.white;
  }

  void render(Canvas canvas){
      canvas.drawRect(rect, paint);
  }

  void update(double td){

  }
}

class TestGame extends Game {

  Size screenSize;

  TestGame(this.screenSize);

  @override
  void render(Canvas canvas) {
    for(var i=0; i < 5; i++){
      Block(size: screenSize).render(canvas);
    }
  }

  @override
  void update(double t) {} 
}

Answer 1

现在，由于您不更改Rect的坐标，因此所有块都在同一位置呈现。

您的Block类需要获取要放置图块的位置的坐标，如下所示:

static final int width = 50;
static final int height = 25; 

Block(**int x, int y**) {
  rect = Rect.fromLTWH(**x**, **y**, Block.width, Block.height);
  paint = Paint()..color = Colors.white;
}

然后在生成它们时，需要在render函数的循环中为它们提供不同的坐标，如下所示:

  @override
  void render(Canvas canvas) {
    for(int i = 0; i < 6; i++) {
      for(int j = 0; < 5; j++) {
        // This could be moved out to the constructor and put in a list so that
        // you wont have to make a new object in every render
        Block((i+1)*Block.width, (j+2)*Block.height);
      }
    }
  }

(坐标的i + 1和j + 2使其看起来像图像中的图像，如果删除+1和+2，则将在左上角开始渲染)

现在看起来就像是一大块白色，但是如果您在每个图块之间留出一定的空间，为它们提供不同的颜色或边缘，您将看到所有图块。

最简单的查看方法是: paint.style = PaintingStyle.stroke;