Mostrar jugadorx y larreta

index.html

@@ -11,9 +11,10 @@
     <div style="display: none">
       <!-- Cargar imágenes -->
       <img id="img-boton-jugar" src="/src/assets/boton_jugar.png">
-      <img id="img-larreta" src="/src/assets/larreta.png">
       <img id="img-vereda" src="/src/assets/piso.png">
       <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">
     </div>
     <canvas id="juego" width="1280" height="720"></canvas>
     <script type="module" src="/src/main.js"></script>

src/jugando.js

@@ -1,17 +1,23 @@
 import { posInBox } from './utils.js'
+import { loadSprite } from './sprite.js'
 
 const larretaImg = document.getElementById("img-larreta")
 const inmobiliariaImg = document.getElementById("img-inmobiliaria")
 const veredaImg = document.getElementById("img-vereda")
 const fondoImg = document.getElementById("img-fondo")
+const jugadorxImg = document.getElementById("img-jugadorx")
+
+const jugadorxSprite = loadSprite(jugadorxImg, 133, 266)
+const larretaSprite = loadSprite(larretaImg, 800, 1069)
 
 export function createJugandoState() {
   return {
     current: 'jugando',
-    pos: { x: 0 },
+    pos: { x: 3000 },
+    view: { x: 0 },
     velocity: { x: 0 },
     // { x }
-    enemies: [{ x: 0 }],
+    enemies: [{ x: 2700 }],
   }
 }
 
@@ -23,17 +29,57 @@ export function updateJugando(juego, dt) {
   if (juego.keyboard.keys.a) {
     juego.state.velocity.x -= 200
   }
+
   juego.state.pos.x += (dt / 1000) * juego.state.velocity.x
+  if (juego.state.pos.x < 2000) juego.state.pos.x = 2000
+  if (juego.state.pos.x > 4000) juego.state.pos.x = 4000
+
+  juego.state.view.x = -juego.state.pos.x + juego.canvas.width / 2 - jugadorxDimensions(juego).width / 2
 }
 
 function drawBackground(juego, y, height, img) {
   const aspect = img.width / img.height
   const width = height * aspect
-  const realY = typeof y === 'function'
-    ? y(height)
-    : y
+  const realY = typeof y === 'function' ? y(height) : y
   for (let i = 0; i < 10; i++) {
-    juego.ctx.drawImage(img, i * (width - 1) - juego.state.pos.x, realY, width, height)
+    juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, realY, width, height)
+  }
+  return realY
+}
+
+function jugadorxDimensions(juego) {
+  const height = juego.canvas.height / 4
+  const width = jugadorxSprite.getWidth(height)
+  return { height, width }
+}
+
+function drawJugadorx(juego, floorY) {
+  const { height } = jugadorxDimensions(juego)
+  jugadorxSprite.draw(
+    juego,
+    juego.state.pos.x + juego.state.view.x,
+    floorY - height,
+    height,
+    0
+  )
+}
+
+function larretaDimensions(juego) {
+  const height = juego.canvas.height / 4
+  const width = larretaSprite.getWidth(height)
+  return { height, width }
+}
+
+function drawEnemies(juego, floorY) {
+  const { height } = larretaDimensions(juego)
+  for (const enemy of juego.state.enemies) {
+    larretaSprite.draw(
+      juego,
+      enemy.x + juego.state.view.x,
+      floorY - height,
+      height,
+      0
+    )
   }
 }
 
@@ -42,9 +88,9 @@ export function drawJugando(juego) {
   const {x} = juego.state.pos
 
   drawBackground(juego, 0, (height / 3) * 2, fondoImg)
-  drawBackground(juego, h => height - h, height / 3, veredaImg)
+  const floorY = drawBackground(juego, h => height - h, height / 3, veredaImg)
 
-  for (const enemy of juego.state.enemies) {
-    //juego.ctx.drawImage(larretaImg, enemy.x, btn.y, btn.width, btn.height)
-  }
+  drawEnemies(juego, floorY)
+
+  drawJugadorx(juego, floorY)
 }

src/main.js

@@ -14,16 +14,16 @@ function update(juego, dt) {
   }
 }
 
-function draw(juego) {
+function draw(juego, timestamp) {
   const {width, height} = juego.canvas
 
   juego.ctx.clearRect(0, 0, width, height)
   switch (juego.state.current) {
     case "welcome":
-      drawWelcome(juego)
+      drawWelcome(juego, timestamp)
       break
     case "jugando":
-      drawJugando(juego)
+      drawJugando(juego, timestamp)
       break
   }
 }
@@ -73,7 +73,7 @@ function initJuego() {
     const progress = timestamp - lastRender
 
     update(juego, progress)
-    draw(juego)
+    draw(juego, timestamp)
 
     lastRender = timestamp
     window.requestAnimationFrame(loop)

src/sprite.js

@@ -0,0 +1,34 @@
+// Sprites are image assets that have a grid of tiles to animate
+// width/height are the size of each tile
+// drawHeight is a function that takes juego
+export function loadSprite(img, width, height, drawHeight) {
+
+  const aspect = width / height
+  const rowSize = Math.floor(img.width / width)
+  if (img.width / width !== rowSize) {
+    console.warn(`The sprite grid for ${img.src} has extra space after rows, are you sure the width/height of each tile is right?`)
+  }
+
+  function getWidth(drawHeight) {
+    return drawHeight * aspect
+  }
+
+  function draw(juego, x, y, drawHeight, num) {
+    const drawWidth = getWidth(drawHeight)
+    const tileX = num % rowSize
+    const tileY = Math.floor(num / rowSize)
+    juego.ctx.drawImage(
+      img,
+      tileX * width,
+      tileY * height,
+      width,
+      height,
+      x,
+      y,
+      drawWidth,
+      drawHeight,
+    )
+  }
+
+  return { getWidth, draw, width, height }
+}

src/utils.js

@@ -2,3 +2,4 @@ export function posInBox(box, pos) {
   return pos.x > box.x && pos.x < box.x + box.width
     && pos.y > box.y && pos.y < box.y + box.height
 }
+