Mostrar jugadorx y larreta

This commit is contained in:
Nulo 2021-06-28 16:40:54 +00:00
parent a7ceb02333
commit 2da10855b4
7 changed files with 97 additions and 15 deletions

View file

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

BIN
src/assets/eli.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 666 KiB

After

Width:  |  Height:  |  Size: 731 KiB

View file

@ -1,17 +1,23 @@
import { posInBox } from './utils.js' import { posInBox } from './utils.js'
import { loadSprite } from './sprite.js'
const larretaImg = document.getElementById("img-larreta") const larretaImg = document.getElementById("img-larreta")
const inmobiliariaImg = document.getElementById("img-inmobiliaria") const inmobiliariaImg = document.getElementById("img-inmobiliaria")
const veredaImg = document.getElementById("img-vereda") const veredaImg = document.getElementById("img-vereda")
const fondoImg = document.getElementById("img-fondo") 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() { export function createJugandoState() {
return { return {
current: 'jugando', current: 'jugando',
pos: { x: 0 }, pos: { x: 3000 },
view: { x: 0 },
velocity: { x: 0 }, velocity: { x: 0 },
// { x } // { x }
enemies: [{ x: 0 }], enemies: [{ x: 2700 }],
} }
} }
@ -23,17 +29,57 @@ export function updateJugando(juego, dt) {
if (juego.keyboard.keys.a) { if (juego.keyboard.keys.a) {
juego.state.velocity.x -= 200 juego.state.velocity.x -= 200
} }
juego.state.pos.x += (dt / 1000) * juego.state.velocity.x 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) { function drawBackground(juego, y, height, img) {
const aspect = img.width / img.height const aspect = img.width / img.height
const width = height * aspect const width = height * aspect
const realY = typeof y === 'function' const realY = typeof y === 'function' ? y(height) : y
? y(height)
: y
for (let i = 0; i < 10; i++) { 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 const {x} = juego.state.pos
drawBackground(juego, 0, (height / 3) * 2, fondoImg) 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) { drawEnemies(juego, floorY)
//juego.ctx.drawImage(larretaImg, enemy.x, btn.y, btn.width, btn.height)
} drawJugadorx(juego, floorY)
} }

View file

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

34
src/sprite.js Normal file
View file

@ -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 }
}

View file

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