Mostrar baldosa en pantalla de perdida

src/assets.ts

@@ -3,6 +3,7 @@ import larretaImg from "./assets/Millonario Malo.png"
 import fondoImg from "./assets/CieloRioCalle.png"
 import edificiosImg from "./assets/Edificios.png"
 import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png"
+import baldosaImg from "./assets/Baldosa.png"
 import semillaImg from "./assets/Semilla.png"
 import arbol1Img from "./assets/Árbol 1.png"
 import arbol2Img from "./assets/Árbol 2.png"
@@ -22,6 +23,7 @@ export const assetUrls = {
 	fondo: fondoImg,
 	edificios: edificiosImg,
 	jugadorx: jugadorxImg,
+	baldosa: baldosaImg,
 	semilla: semillaImg,
 	arbol1: arbol1Img,
 	arbol2: arbol2Img,

src/lose.ts

@@ -12,4 +12,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
 	drawText(juego, '¡Te convirtieron en baldosa!',
 		{ x: juego.canvas.width / 2, y: 100 },
 		{ bold: true, size: 3, align: 'center' })
+
+	const width = juego.sprites.baldosa.getWidth(juego)
+	juego.sprites.baldosa.draw(juego, juego.canvas.width / 2 - width / 2, 100)
 }

src/main.ts

@@ -13,7 +13,7 @@ export type Juego<T extends State> = {
     canvas: HTMLCanvasElement
     ctx: CanvasRenderingContext2D
     assets: Assets
-    sprites: { [key in "jugadorx" | "larreta" | "semilla" | "arbol1" | "arbol2"]: Sprite }
+    sprites: { [key in "jugadorx" | "baldosa" | "larreta" | "semilla" | "arbol1" | "arbol2"]: Sprite }
     mouse: { x: number; y: number, down: boolean }
     keyboard: { keys: { [key: string]: boolean } }
     state: T
@@ -77,6 +77,7 @@ async function initJuego() {
 
     const sprites = {
         jugadorx: loadSprite(assets.jugadorx, 65, 94, juego => juego.canvas.height / 4),
+        baldosa: loadSprite(assets.baldosa, 72, 72, juego => juego.canvas.height * 0.8),
         larreta: loadSprite(assets.larreta, 50, 71, juego => juego.canvas.height / 4),
         semilla: loadSprite(assets.semilla, 72, 73, juego => juego.canvas.height / 8),
         arbol1: loadSprite(assets.arbol1, 72, 68, juego => juego.canvas.height / 3),