Используя p5.js, возможно ли нарисовать класс, который рисует подклассы внутри себя?Например, блок 4x4, состоящий из блоков 1x1 - PullRequest
Новая
       4

Используя p5.js, возможно ли нарисовать класс, который рисует подклассы внутри себя?Например, блок 4x4, состоящий из блоков 1x1

0 голосов
/ 06 февраля 2019

Я пытаюсь сделать игру, похожую на тетрис, где все части игры состоят из более мелких частей, которые имеют общие свойства.

В настоящее время у меня есть: 

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

Я бы хотелиметь возможность иметь блок класса, который рисует маленький блок, а затем вызывать этот блок в классе Square, который рисует 4 маленьких блока.Затем, создав экземпляр Square, я объединю 4 блока в один объект.

Я думаю, что где-то пропущен цикл for.

1 Ответ

0 голосов
/ 07 февраля 2019

Я попробовал и придумал это.Это несколько зачаточно, но оно может помочь в качестве отправной точки. 

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 должен уметь обрабатывать подмножество тетромино;просто определите формы как матрицы.

...