Блог

Я создаю игру в стиле платформы в p5.js. Для платформ я создал класс, чтобы я мог повторно использовать свой код и не повторяться.

 class Platform{  constructor(xCoord, yCoord, width, height){  this.x = xCoord;  this.y = yCoord;  this.w = width;  this.h = height;  }  display(){  rectMode(CENTER);  fill("#503707");  strokeWeight(1);  rect(this.x, this.y, this.w, this.h);  fill('#38761d');  triangle(this.x - 100, this.y - 20, this.x - 80, this.y - 20, this.x - 90, this.y);  triangle(this.x - 80, this.y - 20, this.x - 60, this.y - 20, this.x - 70, this.y);  triangle(this.x - 60, this.y - 20, this.x - 40, this.y - 20, this.x - 50, this.y);  triangle(this.x - 40, this.y - 20, this.x - 20, this.y - 20, this.x - 30, this.y);  triangle(this.x - 20, this.y - 20, this.x, this.y - 20, this.x - 10, this.y);  triangle(this.x, this.y - 20, this.x   20, this.y - 20, this.x   10, this.y);  triangle(this.x   20, this.y - 20, this.x   40, this.y - 20, this.x   30, this.y);  triangle(this.x   40, this.y - 20, this.x   60, this.y - 20, this.x   50, this.y);  triangle(this.x   60, this.y - 20, this.x   80, this.y - 20, this.x   70, this.y);  triangle(this.x   80, this.y - 20, this.x   100, this.y - 20, this.x   90, this.y);  }  move(){  this.x-=2;  } }  

Новинки выглядят так:

 let pl1 = new Platform(600,350,200,40); let pl2 = new Platform(850,250,200,40); let pl3 = new Platform(1100,200,200,40);  

У меня их гораздо больше. Вот как они нарисованы в моей игре:

 pl1.display();  pl1.move();  pl2.display();  pl2.move();  pl3.display();  pl3.move();  

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

 if(p1X gt;= pl1.x-pl1.w/2 amp;amp; p1X lt;= pl1.x pl1.w/2 amp;amp; p1Y   pHeight gt;= pl1.y amp;amp; p1Y   pHeight lt;= pl1.y   pl1.h amp;amp; jump == false){  p1Y = p1Y;   velocity = 0;  jumpCounter = 0;   }  

Когда я рисую свои платформы, я продолжаю повторять это утверждение if, так как у меня более 20 таких платформ, поэтому я хочу превратить это в цикл (используя массив?), Но я не могу понять, как это сделать. Однажды я сделал петлю for с помощью [i], но затем платформы были нарисованы, но часть столкновения больше не работала.

Кто-нибудь может мне помочь? 🙂 PS. Я новичок в этом деле, еще учусь в школе.

Учитывая существующий код инициализации платформы:

 let pl1 = new Platform(600, 350, 200, 40); let pl2 = new Platform(850, 250, 200, 40); let pl3 = new Platform(1100, 200, 200, 40);  

Вы можете просто поместить их в массив:

 let platforms = [pl1, pl2, pl3];  

Затем обновить и нарисовать:

 for (let pl of platforms) {  pl.move();  pl.display(); }  

И для того, чтобы проверить наличие столкновений с вашим игроком:

 // rather than re-checking this condition inside the loop, just check it once if (!jump) { // this is essentially the same as jump == false  for (let plat of platforms) {  // Note: this if statement only checks if the bottom left corner of the  // player is colliding with the platform.  if (p1X gt;= plat.x - plat.w / 2 amp;amp;  p1X lt;= plat.x   plat.w / 2 amp;amp;  p1Y   pHeight gt;= plat.y amp;amp;  p1Y   pHeight lt;= plat.y   plat.h) {   // this doesn't make sense, setting p1y to itself?  // p1Y = p1Y;  // did you mean:  // p1y = plat.y - pHeight; // make the player stand atop the platform.  velocity = 0;  jumpCounter = 0;  }  } }  

Если вы хотите, чтобы проверка столкновений работала правильно по краям платформы, вам понадобится логика столкновения, подобная этой:

 // Note I'm inferring from your code that your platforms' x and y coordinates // indicate the top middle of the platform, but p1X and p1Y indicate the top // left of your player. This is idiosyncratic, but so be it. function isPlayerColliding(plat) {  return (  // right edge of player is to the right of left edge of platform  p1X   pWidth gt;= x - plat.w / 2 amp;amp;  // left edge of player is to the left of right edge of platform  p1X lt;= plat.x   plat.w / 2 amp;amp;  // bottom edge of player is below top edge of platform  p1Y   pHeight gt;= plat.y amp;amp;  // top edge of player is above bottom edge of platform  p1Y lt;= plat.y   plat.h  ); }