Semillas

index.html

@@ -15,6 +15,7 @@
       <img id="img-fondo" src="/src/assets/fondo.png">
       <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">
     </div>
     <canvas id="juego" width="1280" height="720"></canvas>
     <script type="module" src="/src/main.ts"></script>

src/jugando.ts

@@ -1,21 +1,27 @@
 import { loadSprite } from './sprite'
 import { Juego } from './main'
+import { boxCollision } from './utils'
 
 const larretaImg = document.getElementById("img-larreta") as HTMLImageElement
 const inmobiliariaImg = document.getElementById("img-inmobiliaria") as HTMLImageElement
 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 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)
 
 export type State = {
     current: "jugando"
     pos: { x: number }
     view: { x: number }
     velocity: { x: number }
+    side: "left" | "right"
     enemies: { x: number }[]
+    seeds: { x: number; velocity: { x: number } }[]
+    seedCooldown: number,
 }
 
 export function createJugandoState(): State {
@@ -24,16 +30,21 @@ export function createJugandoState(): State {
         pos: { x: 3000 },
         view: { x: 0 },
         velocity: { x: 0 },
+        side: "right",
         enemies: [{ x: 2700 }],
+        seeds: [],
+        seedCooldown: 0,
     }
 }
 
 export function update(juego: Juego<State>, dt: number) {
     juego.state.velocity.x = 0
-    if (juego.keyboard.keys.d) {
+    if (juego.keyboard.keys.d || juego.keyboard.keys.ArrowRight) {
+        juego.state.side = "right"
         juego.state.velocity.x += 200
     }
-    if (juego.keyboard.keys.a) {
+    if (juego.keyboard.keys.a || juego.keyboard.keys.ArrowLeft) {
+        juego.state.side = "left"
         juego.state.velocity.x -= 200
     }
 
@@ -41,53 +52,98 @@ export function update(juego: Juego<State>, dt: number) {
     if (juego.state.pos.x < 2000) juego.state.pos.x = 2000
     if (juego.state.pos.x > 4000) juego.state.pos.x = 4000
 
+    juego.state.seedCooldown -= dt
+    if (juego.keyboard.keys[' '] && juego.state.seedCooldown < 0) {
+        juego.state.seeds.push({
+            x: juego.state.pos.x,
+            velocity: { x: juego.state.side === "left" ? -2000 : 2000 },
+        })
+        juego.state.seedCooldown = 300
+    }
+    for (const seed of juego.state.seeds) {
+        seed.x += (dt / 1000) * seed.velocity.x
+        seed.velocity.x *= 0.9
+        for (const enemy of juego.state.enemies) {
+            if (boxCollision({
+                x: seed.x,
+                y: getFloorY(juego) - semillaSprite.getHeight(juego),
+                width: semillaSprite.getWidth(juego),
+                height: semillaSprite.getHeight(juego),
+            }, {
+                x: enemy.x,
+                y: getFloorY(juego) - larretaSprite.getHeight(juego),
+                width: larretaSprite.getWidth(juego),
+                height: larretaSprite.getHeight(juego),
+            })) {
+                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.view.x = -juego.state.pos.x + juego.canvas.width / 2 - jugadorxSprite.getWidth(juego) / 2
 }
 
 function drawBackground(
     juego: Juego<State>,
-    y: number | ((height: number) => number),
+    y: number,
     height: number,
     img: HTMLImageElement,
 ) {
     const aspect = img.width / img.height
     const width = height * aspect
-    const realY = typeof y === 'function' ? y(height) : y
     for (let i = 0; i < 10; i++) {
-        juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, realY, width, height)
+        juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, y, width, height)
     }
-    return realY
 }
 
-function drawJugadorx(juego: Juego<State>, floorY: number) {
-    const height = jugadorxSprite.getHeight(juego)
+function drawJugadorx(juego: Juego<State>) {
+    const floorY = getFloorY(juego)
     jugadorxSprite.draw(
         juego,
         juego.state.pos.x + juego.state.view.x,
-        floorY - height,
-        0
+        floorY - jugadorxSprite.getHeight(juego),
+        0,
+        juego.state.side === "left",
     )
 }
 
-function drawEnemies(juego: Juego<State>, floorY: number) {
+function drawEnemies(juego: Juego<State>) {
     const height = larretaSprite.getHeight(juego)
+    const floorY = getFloorY(juego)
     for (const enemy of juego.state.enemies) {
         larretaSprite.draw(
             juego,
             enemy.x + juego.state.view.x,
             floorY - height,
-            0
         )
     }
 }
 
+function drawSeeds(juego: Juego<State>) {
+    const height = semillaSprite.getHeight(juego)
+    const floorY = getFloorY(juego)
+    for (const seed of juego.state.seeds) {
+        semillaSprite.draw(
+            juego,
+            seed.x + juego.state.view.x,
+            floorY - height,
+        )
+    }
+}
+
+function getFloorY(juego: Juego<State>): number {
+    return (juego.canvas.height / 3) * 2
+}
+
 export function draw(juego: Juego<State>, timestamp: number) {
     const { height } = juego.canvas
 
     drawBackground(juego, 0, (height / 3) * 2, fondoImg)
-    const floorY = drawBackground(juego, h => height - h, height / 3, veredaImg)
+    drawBackground(juego, getFloorY(juego), height / 3, veredaImg)
 
-    drawEnemies(juego, floorY)
+    drawEnemies(juego)
 
-    drawJugadorx(juego, floorY)
+    drawJugadorx(juego)
+    drawSeeds(juego)
 }

src/sprite.ts

@@ -19,22 +19,39 @@ export function loadSprite(
         return getHeight(juego) * aspect
     }
 
-    function draw(juego: Juego<any>, x: number, y: number, spriteIndex: number) {
+    function draw(juego: Juego<any>, x: number, y: number, spriteIndex = 0, flipped = false) {
         const drawHeight = getHeight(juego)
         const drawWidth = getWidth(juego)
         const tileX = spriteIndex % rowSize
         const tileY = Math.floor(spriteIndex / rowSize)
-        juego.ctx.drawImage(
-            img,
-            tileX * width,
-            tileY * height,
-            width,
-            height,
-            x,
-            y,
-            drawWidth,
-            drawHeight,
-        )
+        if (flipped) {
+            juego.ctx.save()
+            juego.ctx.scale(-1, 1)
+            juego.ctx.drawImage(
+                img,
+                tileX * width,
+                tileY * height,
+                width,
+                height,
+                -x - drawWidth,
+                y,
+                drawWidth,
+                drawHeight,
+            )
+            juego.ctx.restore()
+        } else {
+            juego.ctx.drawImage(
+                img,
+                tileX * width,
+                tileY * height,
+                width,
+                height,
+                x,
+                y,
+                drawWidth,
+                drawHeight,
+            )
+        }
     }
 
     return { getWidth, getHeight, draw, width, height }

src/utils.ts

@@ -8,4 +8,13 @@ export function posInBox(box: Box, pos: Pos) {
     return pos.x > box.x && pos.x < box.x + box.width
         && pos.y > box.y && pos.y < box.y + box.height
 }
+export function boxCollision(box1: Box, box2: Box) {
+    // http://stackoverflow.com/questions/2440377/ddg#7301852
+    return !(
+        ((box1.y + box1.height) < (box2.y)) ||
+        (box1.y > (box2.y + box2.height)) ||
+        ((box1.x + box1.width) < box2.x) ||
+        (box1.x > (box2.x + box2.width))
+    )
+}