clase-10

clase-10

---

20 de mayo del 2024

Busqué en p5 libraries p5play https://p5play.org/ una biblioteca llamada p5play. En p5play encontre juegos hechos con p5 y explorando encontre https://p5play.org/lang/es/learn/index.html que tiene tutoriales donde aprender como programar un juego.

Cargar archivo HTML con p5.js

Primero coloque archivo HTML de p5.play en p5 index y asi poder trabajar con los comandos de p5play.

establecer el color del fondo.

Pasos del código

new Canvas(800, 800); -> tamaño del lienzo. world.gravity.y = 10; -> es el código que se aplica para generar gravedad al juego y que asi este se aplique al sprite del jugador.

//Base del codigo sacada de https://p5play.org/lang/es/learn/sprite.html?page=0
sprite = new Sprite();
sprite.width = 50;
sprite.height = 50;
sprite.color = "black";
sprite.stroke = "white";
sprite.strokeWeight = 2;

![Captura de pantalla 2024-05-20 170745](https://github.com/Simonpso/dis9034-2024-1/assets/163044785/6eb59a46-fdcf-46f7-afff-183a115c1e54)

Piso generado para que interactue con el sprite y asi este no se desvanezca.

```javascript
//Base del codigo sacada de https://p5play.org/lang/es/learn/sprite.html?page=1
floor = new Sprite(); //definir el piso como un nuevo sprite
floor.y = 600; //definir a que altura del lienzo se encuentra el piso en el eje y
floor.w = 900; //definir las medidas del piso en el eje x
floor.h = 200; // definir el grosor del piso
floor.collider = 'static';

Funcion que determina el movimiento hacia la izquierda y a la derecha del sprite.

//Base del codigo sacada de <https://p5play.org/lang/es/learn/sprite.html?page=3>
function keyPressed() {
  if (kb.pressing('left')) {
    sprite.vel.x = -5;
  } else if (kb.pressing('right')) {
    sprite.vel.x = 5;
  } else {
    sprite.vel.x = 0;
  }
}