Usar assets nuevos (faltan assets todavía)

src/assets.ts

@@ -1,10 +1,11 @@
 import botonJugarImg from "./assets/boton_jugar.png"
-import larretaImg from "./assets/larreta.png"
-import veredaImg from "./assets/piso.png"
-import fondoImg from "./assets/fondo.png"
-import jugadorxImg from "./assets/eli.png"
-import semillaImg from "./assets/semilla.png"
-import arbolImg from "./assets/arbol.png"
+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 semillaImg from "./assets/Semilla.png"
+import arbol1Img from "./assets/Árbol 1.png"
+import arbol2Img from "./assets/Árbol 2.png"
 
 function loadImage(url: string): Promise<HTMLImageElement> {
 	return new Promise((resolve, reject) => {
@@ -18,11 +19,12 @@ function loadImage(url: string): Promise<HTMLImageElement> {
 export const assetUrls = {
 	botonJugar: botonJugarImg,
 	larreta: larretaImg,
-	vereda: veredaImg,
 	fondo: fondoImg,
+	edificios: edificiosImg,
 	jugadorx: jugadorxImg,
 	semilla: semillaImg,
-	arbol: arbolImg,
+	arbol1: arbol1Img,
+	arbol2: arbol2Img,
 }
 export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement }
 

src/jugando.ts

@@ -1,5 +1,6 @@
 import { Juego } from './main'
-import { boxCollision, drawText } from './utils'
+import { Sprite } from './sprite'
+import { Box, boxCollision, drawText, randomFromArray } from './utils'
 
 const ENEMIES_NUM = 20
 const SEED_COOLDOWN = 300
@@ -16,7 +17,7 @@ export type State = {
     side: "left" | "right"
     enemies: { x: number }[]
     seeds: { x: number; velocity: { x: number } }[]
-    trees: { x: number }[]
+    trees: { x: number, sprite: Sprite }[]
     time: number,
     seedCooldown: number,
 }
@@ -82,7 +83,10 @@ export function update(juego: Juego<State>, dt: number) {
             })) {
                 juego.state.seeds = juego.state.seeds.filter(s => s.x !== seed.x)
                 juego.state.enemies = juego.state.enemies.filter(e => e.x !== enemy.x)
-                juego.state.trees.push({ x: enemy.x })
+                juego.state.trees.push({
+                    x: enemy.x,
+                    sprite: randomFromArray([juego.sprites.arbol1, juego.sprites.arbol2]),
+                })
             }
         }
         if (Math.abs(seed.velocity.x) < 100)
@@ -113,19 +117,6 @@ export function update(juego: Juego<State>, dt: number) {
     juego.state.view.x = -juego.state.pos.x + juego.canvas.width / 2 - juego.sprites.jugadorx.getWidth(juego) / 2
 }
 
-function drawBackground(
-    juego: Juego<State>,
-    y: number,
-    height: number,
-    img: HTMLImageElement,
-) {
-    const aspect = img.width / img.height
-    const width = height * aspect
-    for (let i = 0; i < 10; i++) {
-        juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, y, width, height)
-    }
-}
-
 function drawJugadorx(juego: Juego<State>) {
     const floorY = getFloorY(juego)
     juego.sprites.jugadorx.draw(
@@ -138,10 +129,10 @@ function drawJugadorx(juego: Juego<State>) {
 }
 
 function drawTrees(juego: Juego<State>) {
-    const height = juego.sprites.arbol.getHeight(juego)
     const floorY = getFloorY(juego)
     for (const tree of juego.state.trees) {
-        juego.sprites.arbol.draw(
+        const height = tree.sprite.getHeight(juego)
+        tree.sprite.draw(
             juego,
             tree.x + juego.state.view.x,
             floorY - height,
@@ -173,14 +164,36 @@ function drawSeeds(juego: Juego<State>) {
 }
 
 function getFloorY(juego: Juego<State>): number {
-    return (juego.canvas.height / 3) * 2
+    return juego.canvas.height * 65 / 96
+}
+
+function drawBackground(
+    juego: Juego<State>,
+    y: number,
+    height: number,
+    img: HTMLImageElement,
+    sourceBox?: Box,
+) {
+    const aspect = img.width / img.height
+    const width = height * aspect
+    for (let i = 0; i < 10; i++) {
+        if (sourceBox) {
+            juego.ctx.drawImage(
+                img,
+                sourceBox.x, sourceBox.y, sourceBox.width, sourceBox.height,
+                i * (width - 1) + juego.state.view.x, y, width, height,
+            )
+        } else {
+            juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, y, width, height)
+        }
+    }
 }
 
 export function draw(juego: Juego<State>, timestamp: number) {
-    const { height } = juego.canvas
-
-    drawBackground(juego, 0, (height / 3) * 2, juego.assets.fondo)
-    drawBackground(juego, getFloorY(juego), height / 3, juego.assets.vereda)
+    drawBackground(juego, 0, juego.canvas.height, juego.assets.fondo)
+    drawBackground(
+        juego, 0, getFloorY(juego), juego.assets.edificios, 
+        { x: 0, y: 0, width: 89, height: 48 })
 
     drawTrees(juego)
     drawEnemies(juego)
@@ -188,17 +201,18 @@ export function draw(juego: Juego<State>, timestamp: number) {
     drawJugadorx(juego)
     drawSeeds(juego)
 
+    juego.ctx.fillStyle = "white"
     drawText(juego, 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', { x: 0, y: 100 }, {})
 
     const arbolesBox = drawText(
         juego, `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`,
         { x: juego.canvas.width - 10, y: 10 },
-        { bold: true, align: 'right'})
+        { bold: true, align: 'right' })
 
     const tiempoBox = drawText(
         juego, `Tiempo restante`,
         { x: 10, y: 10 },
-        { bold: false, align: 'left'})
+        { bold: false, align: 'left' })
 
     juego.ctx.fillRect(
         10, tiempoBox.y + tiempoBox.height,

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" | "arbol"]: Sprite }
+    sprites: { [key in "jugadorx" | "larreta" | "semilla" | "arbol1" | "arbol2"]: Sprite }
     mouse: { x: number; y: number, down: boolean }
     keyboard: { keys: { [key: string]: boolean } }
     state: T
@@ -71,10 +71,11 @@ async function initJuego() {
     const assets = await loadAssets()
 
     const sprites = {
-        jugadorx: loadSprite(assets.jugadorx, 133, 266, juego => juego.canvas.height / 4),
-        larreta: loadSprite(assets.larreta, 800, 1069, juego => juego.canvas.height / 4),
-        semilla: loadSprite(assets.semilla, 480, 640, juego => juego.canvas.height / 8),
-        arbol: loadSprite(assets.arbol, 80, 150, juego => juego.canvas.height / 4),
+        jugadorx: loadSprite(assets.jugadorx, 65, 94, juego => juego.canvas.height / 4),
+        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),
+        arbol2: loadSprite(assets.arbol2, 72, 56, juego => juego.canvas.height / 4),
     }
 
     let juego: Juego<welcome.State> = {
@@ -89,6 +90,7 @@ async function initJuego() {
         },
     };
     (window as any).juego = juego
+    juego.ctx.imageSmoothingEnabled = false
 
     canvas.addEventListener("mousemove", e => {
         juego.mouse.x = e.clientX

src/utils.ts

@@ -41,3 +41,7 @@ export function drawText(juego: Juego<any>, text: string, pos: Pos, {
     const measure = juego.ctx.measureText(text)
     return { ...pos, width: measure.width, height: measure.actualBoundingBoxDescent }
 }
+
+export function randomFromArray<T>(array: T[]): T {
+    return array[Math.floor(Math.random() * array.length)]
+}