Ir convirtiendo a parque publico mientras pasa el juego

src/assets.ts

@@ -1,7 +1,11 @@
 import botonJugarImg from "./assets/boton_jugar.png";
 import larretaImg from "./assets/Larreta.png";
 import millonarioMaloPng from "./assets/Millonario Malo.png";
-import fondoImg from "./assets/CieloRioCalle.png";
+import cieloRioCalleImg from "./assets/CieloRioCalle.png";
+import cieloImg from "./assets/Cielo.png";
+import rioImg from "./assets/Rio.png";
+import parquePublicoRioImg from "./assets/Parque publico con rio.png";
+import parquePublicoImg from "./assets/Parque publico.png";
 import edificiosImg from "./assets/Edificios.png";
 import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png";
 import baldosaImg from "./assets/Baldosa.png";
@@ -22,7 +26,11 @@ export const assetUrls = {
   botonJugar: botonJugarImg,
   larreta: larretaImg,
   millonarioMalo: millonarioMaloPng,
-  fondo: fondoImg,
+  cieloRioCalle: cieloRioCalleImg,
+  cielo: cieloImg,
+  rio: rioImg,
+  parquePublicoRio: parquePublicoRioImg,
+  parquePublico: parquePublicoImg,
   edificios: edificiosImg,
   jugadorx: jugadorxImg,
   baldosa: baldosaImg,

src/jugando.ts

@@ -182,10 +182,14 @@ function drawBackground(
   y: number,
   height: number,
   img: HTMLImageElement,
-  sourceBox?: Box
+  sourceBox?: Box,
+  opacity?: number
 ) {
   const aspect = img.width / img.height;
   const width = height * aspect;
+  if (opacity !== undefined) {
+    juego.ctx.globalAlpha = opacity;
+  }
   for (let i = 0; i < 10; i++) {
     if (sourceBox) {
       juego.ctx.drawImage(
@@ -194,7 +198,7 @@ function drawBackground(
         sourceBox.y,
         sourceBox.width,
         sourceBox.height,
-        i * (width - 1) + juego.state.view.x,
+        i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x,
         y,
         width,
         height
@@ -202,17 +206,20 @@ function drawBackground(
     } else {
       juego.ctx.drawImage(
         img,
-        i * (width - 1) + juego.state.view.x,
+        i * (width - (opacity === undefined ? 1 : 0)) + juego.state.view.x,
         y,
         width,
         height
       );
     }
   }
+  if (opacity !== undefined) {
+    juego.ctx.globalAlpha = 1;
+  }
 }
 
 export function draw(juego: Juego<State>, timestamp: number) {
-  drawBackground(juego, 0, juego.canvas.height, juego.assets.fondo);
+  drawBackground(juego, 0, juego.canvas.height, juego.assets.cieloRioCalle);
   drawBackground(juego, 0, getFloorY(juego), juego.assets.edificios, {
     x: 0,
     y: 0,
@@ -220,6 +227,23 @@ export function draw(juego: Juego<State>, timestamp: number) {
     height: 48,
   });
 
+  drawBackground(
+    juego,
+    0,
+    juego.canvas.height,
+    juego.assets.cielo,
+    undefined,
+    juego.state.trees.length / TREES_TO_WIN
+  );
+  drawBackground(
+    juego,
+    0,
+    juego.canvas.height,
+    juego.assets.parquePublicoRio,
+    undefined,
+    juego.state.trees.length / TREES_TO_WIN
+  );
+
   drawTrees(juego);
   drawEnemies(juego);