diff --git a/src/assets.ts b/src/assets.ts index 0a4f886..fbddd16 100644 --- a/src/assets.ts +++ b/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, diff --git a/src/assets/Cielo.png b/src/assets/Cielo.png new file mode 100644 index 0000000..0078f04 Binary files /dev/null and b/src/assets/Cielo.png differ diff --git a/src/assets/Parque publico con rio.png b/src/assets/Parque publico con rio.png new file mode 100644 index 0000000..3a906a7 Binary files /dev/null and b/src/assets/Parque publico con rio.png differ diff --git a/src/assets/Parque publico.png b/src/assets/Parque publico.png new file mode 100644 index 0000000..ea00b91 Binary files /dev/null and b/src/assets/Parque publico.png differ diff --git a/src/assets/Rio.png b/src/assets/Rio.png new file mode 100644 index 0000000..f80676c Binary files /dev/null and b/src/assets/Rio.png differ diff --git a/src/jugando.ts b/src/jugando.ts index 8a06d4e..34f5705 100644 --- a/src/jugando.ts +++ b/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, 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, 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);