diff --git a/index.html b/index.html index 5d7db64..7de4122 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ + diff --git a/src/assets/arbol.png b/src/assets/arbol.png new file mode 100644 index 0000000..de45587 Binary files /dev/null and b/src/assets/arbol.png differ diff --git a/src/jugando.ts b/src/jugando.ts index fd6cee8..3898716 100644 --- a/src/jugando.ts +++ b/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, 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) { ) } +function drawTrees(juego: Juego) { + 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) { const height = larretaSprite.getHeight(juego) const floorY = getFloorY(juego) @@ -165,6 +181,7 @@ export function draw(juego: Juego, timestamp: number) { drawBackground(juego, 0, (height / 3) * 2, fondoImg) drawBackground(juego, getFloorY(juego), height / 3, veredaImg) + drawTrees(juego) drawEnemies(juego) drawJugadorx(juego)