Agregar Larreta

src/assets.ts

@@ -1,5 +1,6 @@
 import botonJugarImg from "./assets/boton_jugar.png";
-import larretaImg from "./assets/Millonario Malo.png";
+import larretaImg from "./assets/Larreta.png";
+import millonarioMaloPng from "./assets/Millonario Malo.png";
 import fondoImg from "./assets/CieloRioCalle.png";
 import edificiosImg from "./assets/Edificios.png";
 import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png";
@@ -20,6 +21,7 @@ function loadImage(url: string): Promise<HTMLImageElement> {
 export const assetUrls = {
   botonJugar: botonJugarImg,
   larreta: larretaImg,
+  millonarioMalo: millonarioMaloPng,
   fondo: fondoImg,
   edificios: edificiosImg,
   jugadorx: jugadorxImg,

src/jugando.ts

@@ -15,7 +15,7 @@ export type State = {
   pos: { x: number };
   view: { x: number };
   side: "left" | "right";
-  enemies: { x: number }[];
+  enemies: { x: number; sprite: Sprite }[];
   seeds: { x: number; velocity: { x: number } }[];
   trees: { x: number; sprite: Sprite }[];
   time: number;
@@ -111,7 +111,13 @@ export function update(juego: Juego<State>, dt: number) {
     const x = Math.random() * MAP_SIZE + MAP_MIN;
     // Don't spawn enemies too close
     if (Math.abs(juego.state.pos.x - x) < 300) continue;
-    juego.state.enemies.push({ x });
+    juego.state.enemies.push({
+      x,
+      sprite: randomFromArray([
+        juego.sprites.larreta,
+        juego.sprites.millonarioMalo,
+      ]),
+    });
   }
 
   for (const enemy of juego.state.enemies) {
@@ -148,14 +154,10 @@ function drawTrees(juego: Juego<State>) {
   }
 }
 function drawEnemies(juego: Juego<State>) {
-  const height = juego.sprites.larreta.getHeight(juego);
   const floorY = getFloorY(juego);
   for (const enemy of juego.state.enemies) {
-    juego.sprites.larreta.draw(
-      juego,
-      enemy.x + juego.state.view.x,
-      floorY - height
-    );
+    const height = enemy.sprite.getHeight(juego);
+    enemy.sprite.draw(juego, enemy.x + juego.state.view.x, floorY - height);
   }
 }
 

src/main.ts

@@ -18,6 +18,7 @@ export type Juego<T extends State> = {
       | "jugadorx"
       | "baldosa"
       | "larreta"
+      | "millonarioMalo"
       | "semilla"
       | "arbol1"
       | "arbol2"]: Sprite;
@@ -98,6 +99,12 @@ async function initJuego() {
     ),
     larreta: loadSprite(
       assets.larreta,
+      83,
+      131,
+      (juego) => juego.canvas.height / 4
+    ),
+    millonarioMalo: loadSprite(
+      assets.millonarioMalo,
       50,
       71,
       (juego) => juego.canvas.height / 4