prod
Nulo 1 year ago
parent 46661fc3e7
commit 9c03414bd2
  1. 1
      index.html
  2. BIN
      src/assets/semilla.png
  3. 86
      src/jugando.ts
  4. 41
      src/sprite.ts
  5. 9
      src/utils.ts

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

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

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

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

Loading…
Cancel
Save