как решить проблему с помощью платы p5 - PullRequest
Новая
       52

как решить проблему с помощью платы p5

3 голосов
/ 11 ноября 2019

Я хочу сделать доску наподобие монопольной в p5. У меня есть некоторые проблемы с шириной и высотой моего холста, потому что он не похож на то, что я хочу. Это выглядит так:

https://imgur.com/D2HOPpF

и я хочу что-то вроде этого:

https://imgur.com/soaBADK

Вот код: 

function setup() {
  createCanvas(1000, 800);
  background(255);
  for (var i = 0; i < 11; i++) {

    var posX = map(i, 0, 11, 0, width);
    var posY = map(i, 0, 11, 0, height);
    var posX2 = map(i, 0, 11, 0, width);
    var posY2 = map(i, 0, 11, height, 0);

    var tileRowUp = new Tile(posX, 0, 80, 80);
    
    tileRowUp.show();
    
    var tileColLeft = new Tile(0, posY, 80, 80);
    
    tileColLeft.show();

    
    var tileRowdown = new Tile(posX2, height - 80, 80, 80);
    
    tileRowdown.show();
    
    var tileColRight = new Tile(width - 80, posY2, 80, 80);
    
    tileColRight.show();


  }
  //var mysteriousCard1 = new Tile(170, 190, 100, 100);
  //mysteriousCard1.show();  
  //  var mysteriousCard2 = new Tile(470, 490, 100, 100);
 // mysteriousCard2.show(); 

}

class Tile {


  constructor(x, y, lar, alt, img) {

    this.x = x;
    this.y = y;
    this.lar = lar;
    this.alt = alt;
    this.img = img;

  }

  show(){
  //noStroke();
    rect(this.x, this.y, this.lar, this.alt);

  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>

Не могу найти, как это решить. Может, у кого-нибудь есть идеи?

1 Ответ

3 голосов
/ 11 ноября 2019

Вы фиксируете ширину и высоту каждой плитки как 80, 80. Если вы хотите, чтобы он был исправлен, вам придется изменить ширину и высоту холста на 80*11, 80*11, то есть 880, 880.

Принимая во внимание, что если вы не хотите фиксировать размер холста и ограничить егобыть квадратомВам нужно нарисовать каждую плитку шириной width/11, height/11. Таким образом, ваш код станет 

function setup() {
  createCanvas(1000, 800);
  background(255);
  const n = 11;

  // compute height and width
  var h = height / n;
  var w = width / n;
  for (var i = 0; i < n; i++) {

    var posX = map(i, 0, n, 0, width);
    var posY = map(i, 0, n, 0, height);
    var posX2 = map(i, 0, n, 0, width);
    var posY2 = map(i, 0, n, height, 0);

    var tileRowUp = new Tile(posX, 0, w, h);
    tileRowUp.show();

    var tileColLeft = new Tile(0, posY, w, h);
    tileColLeft.show();

    var tileRowdown = new Tile(posX2, height - h, w, h);
    tileRowdown.show();

    var tileColRight = new Tile(width - w, posY2, w, h);
    tileColRight.show();
  }

}

Теперь, если вы хотите использовать квадратные плитки, вам нужно иметь width = height.

. Вы можете запустить приведенный выше код здесь в p5. js web editor.

Примечание. Когда вы обрабатываете игровую логику, если вы делаете это с помощью класса Tile, вам нужно быть осторожным, так как у вас есть несколько объектов Tile, нарисованных поверх каждогодругое.

...