Question

我正在尝试制作类似Tetris的游戏，该游戏的作品全部由共享属性的较小作品组成。

目前，我有：

    export class SquareTetromino {
      [x: string]: any;
      constructor(x, y, w, h) {
      ...
      }

      show(p5) {
         p5.push();
         p5.translate(this.posX, this.posY);
         p5.fill("#D8B6FF")
         p5.rect(0,0,this.w, this.h);
         p5.pop();

      }
     ...
    }

和：

    export class BlockTetromino {
      [x: string]: any;
      constructor(x, y, w, h) {
      ...
      }

      test(p5) {
          this.testArray.push(new SquareTetromino(this.posX,this.posY,this.w,this.h));
          this.testArray.push(new SquareTetromino(this.posX - 50,this.posY,this.w,this.h));
          this.testArray.push(new SquareTetromino(this.posX - 50,this.posY + 50,this.w,this.h));
          this.testArray.push(new SquareTetromino(this.posX,this.posY + 50,this.w,this.h));
      }

      show(p5) {
          p5.push();
          this.testArray.forEach((block) => {
            block.show(p5)
          })
          p5.pop();

      }
    }

在我的主要组件中：

  s.setup = () => {

  ...

            bodies.push(new BlockTetromino(200,-50,50,50))
            bodies[0].test(s);
  ...
          }

  s.draw = () => {
         ...


          for (let i = 0; i < bodies.length; i++) {
            bodies[i].show(s)
          }

我希望能够拥有一个绘制一个小方块的Block类，然后在一个绘制4个小方块的Square类中调用该Block。然后，通过实例化Square，我将有4个块链接在一起作为一个对象。

我认为我在某个地方缺少for循环。

Answer 1

我试了一下，想到了这个。这有点初级，但它认为可以作为一个起点。

class BuildingBlock{
	constructor(x, y, size, color){
		this.x = x;
		this.y = y;
		this.size = size;
		this.color = color || 'red';
		this.display();
	}

	display(){
		fill(this.color);
		rect(this.x, this.y, this.size, this.size);
	}
}

class Polyomino{
	constructor(x, y, shape, blockSize){
		this.x = x;
		this.y = y;
		this.shape = shape;
		this.blockSize = blockSize;
	}

	display(){
		for(let i = 0; i < this.shape.length; i++)
			for(let j = 0; j < this.shape[i].length; j++)
				if(this.shape[i][j] === 1)
					new BuildingBlock(this.x + (j*this.blockSize), this.y + (i*this.blockSize), this.blockSize);
	}
}

function setup(){
	createCanvas(400, 400);
	background(125);

	let pmShape = [
		[1, 1, 0, 1],
		[0, 1, 0, 1],
		[0, 1, 0, 1],
		[1, 1, 1, 1],
	]
	let  p = new Polyomino(20, 20, pmShape, 30);
	p.display();

        let tmShape = [
            [1, 1, 0],
            [0, 1, 1]
        ];
        let tetromino = new Polyomino(200, 20, tmShape, 50);
        tetromino.display();
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
</head>
<body>
	
</body>
</html>

polyomino类应该能够处理四联蛋白的子集；只需将形状定义为矩阵即可。

使用p5.js，是否可以绘制一个在其内部绘制子类的类？例如，由1x1块组成的4x4块

1 个答案: