Usar assets nuevos (faltan assets todavía)

This commit is contained in:
Nulo 2021-06-30 22:58:55 +00:00
parent 583468bf7f
commit 475946568c
19 changed files with 60 additions and 38 deletions

View file

@ -1,10 +1,11 @@
import botonJugarImg from "./assets/boton_jugar.png"
import larretaImg from "./assets/larreta.png"
import veredaImg from "./assets/piso.png"
import fondoImg from "./assets/fondo.png"
import jugadorxImg from "./assets/eli.png"
import semillaImg from "./assets/semilla.png"
import arbolImg from "./assets/arbol.png"
import larretaImg from "./assets/Millonario Malo.png"
import fondoImg from "./assets/CieloRioCalle.png"
import edificiosImg from "./assets/Edificios.png"
import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png"
import semillaImg from "./assets/Semilla.png"
import arbol1Img from "./assets/Árbol 1.png"
import arbol2Img from "./assets/Árbol 2.png"
function loadImage(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
@ -18,11 +19,12 @@ function loadImage(url: string): Promise<HTMLImageElement> {
export const assetUrls = {
botonJugar: botonJugarImg,
larreta: larretaImg,
vereda: veredaImg,
fondo: fondoImg,
edificios: edificiosImg,
jugadorx: jugadorxImg,
semilla: semillaImg,
arbol: arbolImg,
arbol1: arbol1Img,
arbol2: arbol2Img,
}
export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement }

BIN
src/assets/Baldosa.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 819 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/Edificios.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 519 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/Semilla.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 784 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 731 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

BIN
src/assets/Árbol 1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/Árbol 2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B

View file

@ -1,5 +1,6 @@
import { Juego } from './main'
import { boxCollision, drawText } from './utils'
import { Sprite } from './sprite'
import { Box, boxCollision, drawText, randomFromArray } from './utils'
const ENEMIES_NUM = 20
const SEED_COOLDOWN = 300
@ -16,7 +17,7 @@ export type State = {
side: "left" | "right"
enemies: { x: number }[]
seeds: { x: number; velocity: { x: number } }[]
trees: { x: number }[]
trees: { x: number, sprite: Sprite }[]
time: number,
seedCooldown: number,
}
@ -82,7 +83,10 @@ export function update(juego: Juego<State>, 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 })
juego.state.trees.push({
x: enemy.x,
sprite: randomFromArray([juego.sprites.arbol1, juego.sprites.arbol2]),
})
}
}
if (Math.abs(seed.velocity.x) < 100)
@ -113,19 +117,6 @@ export function update(juego: Juego<State>, dt: number) {
juego.state.view.x = -juego.state.pos.x + juego.canvas.width / 2 - juego.sprites.jugadorx.getWidth(juego) / 2
}
function drawBackground(
juego: Juego<State>,
y: number,
height: number,
img: HTMLImageElement,
) {
const aspect = img.width / img.height
const width = height * aspect
for (let i = 0; i < 10; i++) {
juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, y, width, height)
}
}
function drawJugadorx(juego: Juego<State>) {
const floorY = getFloorY(juego)
juego.sprites.jugadorx.draw(
@ -138,10 +129,10 @@ function drawJugadorx(juego: Juego<State>) {
}
function drawTrees(juego: Juego<State>) {
const height = juego.sprites.arbol.getHeight(juego)
const floorY = getFloorY(juego)
for (const tree of juego.state.trees) {
juego.sprites.arbol.draw(
const height = tree.sprite.getHeight(juego)
tree.sprite.draw(
juego,
tree.x + juego.state.view.x,
floorY - height,
@ -173,14 +164,36 @@ function drawSeeds(juego: Juego<State>) {
}
function getFloorY(juego: Juego<State>): number {
return (juego.canvas.height / 3) * 2
return juego.canvas.height * 65 / 96
}
function drawBackground(
juego: Juego<State>,
y: number,
height: number,
img: HTMLImageElement,
sourceBox?: Box,
) {
const aspect = img.width / img.height
const width = height * aspect
for (let i = 0; i < 10; i++) {
if (sourceBox) {
juego.ctx.drawImage(
img,
sourceBox.x, sourceBox.y, sourceBox.width, sourceBox.height,
i * (width - 1) + juego.state.view.x, y, width, height,
)
} else {
juego.ctx.drawImage(img, i * (width - 1) + juego.state.view.x, y, width, height)
}
}
}
export function draw(juego: Juego<State>, timestamp: number) {
const { height } = juego.canvas
drawBackground(juego, 0, (height / 3) * 2, juego.assets.fondo)
drawBackground(juego, getFloorY(juego), height / 3, juego.assets.vereda)
drawBackground(juego, 0, juego.canvas.height, juego.assets.fondo)
drawBackground(
juego, 0, getFloorY(juego), juego.assets.edificios,
{ x: 0, y: 0, width: 89, height: 48 })
drawTrees(juego)
drawEnemies(juego)
@ -188,6 +201,7 @@ export function draw(juego: Juego<State>, timestamp: number) {
drawJugadorx(juego)
drawSeeds(juego)
juego.ctx.fillStyle = "white"
drawText(juego, 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', { x: 0, y: 100 }, {})
const arbolesBox = drawText(

View file

@ -13,7 +13,7 @@ export type Juego<T extends State> = {
canvas: HTMLCanvasElement
ctx: CanvasRenderingContext2D
assets: Assets
sprites: { [key in "jugadorx" | "larreta" | "semilla" | "arbol"]: Sprite }
sprites: { [key in "jugadorx" | "larreta" | "semilla" | "arbol1" | "arbol2"]: Sprite }
mouse: { x: number; y: number, down: boolean }
keyboard: { keys: { [key: string]: boolean } }
state: T
@ -71,10 +71,11 @@ async function initJuego() {
const assets = await loadAssets()
const sprites = {
jugadorx: loadSprite(assets.jugadorx, 133, 266, juego => juego.canvas.height / 4),
larreta: loadSprite(assets.larreta, 800, 1069, juego => juego.canvas.height / 4),
semilla: loadSprite(assets.semilla, 480, 640, juego => juego.canvas.height / 8),
arbol: loadSprite(assets.arbol, 80, 150, juego => juego.canvas.height / 4),
jugadorx: loadSprite(assets.jugadorx, 65, 94, juego => juego.canvas.height / 4),
larreta: loadSprite(assets.larreta, 50, 71, juego => juego.canvas.height / 4),
semilla: loadSprite(assets.semilla, 72, 73, juego => juego.canvas.height / 8),
arbol1: loadSprite(assets.arbol1, 72, 68, juego => juego.canvas.height / 3),
arbol2: loadSprite(assets.arbol2, 72, 56, juego => juego.canvas.height / 4),
}
let juego: Juego<welcome.State> = {
@ -89,6 +90,7 @@ async function initJuego() {
},
};
(window as any).juego = juego
juego.ctx.imageSmoothingEnabled = false
canvas.addEventListener("mousemove", e => {
juego.mouse.x = e.clientX

View file

@ -41,3 +41,7 @@ export function drawText(juego: Juego<any>, text: string, pos: Pos, {
const measure = juego.ctx.measureText(text)
return { ...pos, width: measure.width, height: measure.actualBoundingBoxDescent }
}
export function randomFromArray<T>(array: T[]): T {
return array[Math.floor(Math.random() * array.length)]
}