Arboles

index.html

@@ -16,6 +16,7 @@
       <img id="img-larreta" src="/src/assets/larreta.png">
       <img id="img-jugadorx" src="/src/assets/eli.png">
       <img id="img-semilla" src="/src/assets/semilla.png">
+      <img id="img-arbol" src="/src/assets/arbol.png">
     </div>
     <canvas id="juego" width="1280" height="720"></canvas>
     <script type="module" src="/src/main.ts"></script>

src/jugando.ts

@@ -8,10 +8,12 @@ const veredaImg = document.getElementById("img-vereda") as HTMLImageElement
 const fondoImg = document.getElementById("img-fondo") as HTMLImageElement
 const jugadorxImg = document.getElementById("img-jugadorx") as HTMLImageElement
 const semillaImg = document.getElementById("img-semilla") as HTMLImageElement
+const arbolImg = document.getElementById("img-arbol") as HTMLImageElement
 
 const jugadorxSprite = loadSprite(jugadorxImg, 133, 266, juego => juego.canvas.height / 4)
 const larretaSprite = loadSprite(larretaImg, 800, 1069, juego => juego.canvas.height / 4)
 const semillaSprite = loadSprite(semillaImg, 480, 640, juego => juego.canvas.height / 8)
+const arbolSprite = loadSprite(arbolImg, 80, 150, juego => juego.canvas.height / 4)
 
 const ENEMIES_NUM = 20
 const ENEMY_SPEED = 40
@@ -29,6 +31,7 @@ export type State = {
     side: "left" | "right"
     enemies: { x: number }[]
     seeds: { x: number; velocity: { x: number } }[]
+    trees: { x: number }[]
     seedCooldown: number,
 }
 
@@ -40,6 +43,7 @@ export function createJugandoState(): State {
         side: "right",
         enemies: [],
         seeds: [],
+        trees: [],
         seedCooldown: 0,
     }
 }
@@ -82,6 +86,7 @@ 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 })
             }
         }
         if (Math.abs(seed.velocity.x) < 100)
@@ -131,6 +136,17 @@ function drawJugadorx(juego: Juego<State>) {
     )
 }
 
+function drawTrees(juego: Juego<State>) {
+    const height = arbolSprite.getHeight(juego)
+    const floorY = getFloorY(juego)
+    for (const tree of juego.state.trees) {
+        arbolSprite.draw(
+            juego,
+            tree.x + juego.state.view.x,
+            floorY - height,
+        )
+    }
+}
 function drawEnemies(juego: Juego<State>) {
     const height = larretaSprite.getHeight(juego)
     const floorY = getFloorY(juego)
@@ -165,6 +181,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
     drawBackground(juego, 0, (height / 3) * 2, fondoImg)
     drawBackground(juego, getFloorY(juego), height / 3, veredaImg)
 
+    drawTrees(juego)
     drawEnemies(juego)
 
     drawJugadorx(juego)