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 botonJugarImg from "./assets/boton_jugar.png"
import larretaImg from "./assets/larreta.png" import larretaImg from "./assets/Millonario Malo.png"
import veredaImg from "./assets/piso.png" import fondoImg from "./assets/CieloRioCalle.png"
import fondoImg from "./assets/fondo.png" import edificiosImg from "./assets/Edificios.png"
import jugadorxImg from "./assets/eli.png" import jugadorxImg from "./assets/ProtagonistaCorriendo_1.png"
import semillaImg from "./assets/semilla.png" import semillaImg from "./assets/Semilla.png"
import arbolImg from "./assets/arbol.png" import arbol1Img from "./assets/Árbol 1.png"
import arbol2Img from "./assets/Árbol 2.png"
function loadImage(url: string): Promise<HTMLImageElement> { function loadImage(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -18,11 +19,12 @@ function loadImage(url: string): Promise<HTMLImageElement> {
export const assetUrls = { export const assetUrls = {
botonJugar: botonJugarImg, botonJugar: botonJugarImg,
larreta: larretaImg, larreta: larretaImg,
vereda: veredaImg,
fondo: fondoImg, fondo: fondoImg,
edificios: edificiosImg,
jugadorx: jugadorxImg, jugadorx: jugadorxImg,
semilla: semillaImg, semilla: semillaImg,
arbol: arbolImg, arbol1: arbol1Img,
arbol2: arbol2Img,
} }
export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement } 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 { Juego } from './main'
import { boxCollision, drawText } from './utils' import { Sprite } from './sprite'
import { Box, boxCollision, drawText, randomFromArray } from './utils'
const ENEMIES_NUM = 20 const ENEMIES_NUM = 20
const SEED_COOLDOWN = 300 const SEED_COOLDOWN = 300
@ -16,7 +17,7 @@ export type State = {
side: "left" | "right" side: "left" | "right"
enemies: { x: number }[] enemies: { x: number }[]
seeds: { x: number; velocity: { x: number } }[] seeds: { x: number; velocity: { x: number } }[]
trees: { x: number }[] trees: { x: number, sprite: Sprite }[]
time: number, time: number,
seedCooldown: 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.seeds = juego.state.seeds.filter(s => s.x !== seed.x)
juego.state.enemies = juego.state.enemies.filter(e => e.x !== enemy.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) 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 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>) { function drawJugadorx(juego: Juego<State>) {
const floorY = getFloorY(juego) const floorY = getFloorY(juego)
juego.sprites.jugadorx.draw( juego.sprites.jugadorx.draw(
@ -138,10 +129,10 @@ function drawJugadorx(juego: Juego<State>) {
} }
function drawTrees(juego: Juego<State>) { function drawTrees(juego: Juego<State>) {
const height = juego.sprites.arbol.getHeight(juego)
const floorY = getFloorY(juego) const floorY = getFloorY(juego)
for (const tree of juego.state.trees) { for (const tree of juego.state.trees) {
juego.sprites.arbol.draw( const height = tree.sprite.getHeight(juego)
tree.sprite.draw(
juego, juego,
tree.x + juego.state.view.x, tree.x + juego.state.view.x,
floorY - height, floorY - height,
@ -173,14 +164,36 @@ function drawSeeds(juego: Juego<State>) {
} }
function getFloorY(juego: Juego<State>): number { 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) { export function draw(juego: Juego<State>, timestamp: number) {
const { height } = juego.canvas drawBackground(juego, 0, juego.canvas.height, juego.assets.fondo)
drawBackground(
drawBackground(juego, 0, (height / 3) * 2, juego.assets.fondo) juego, 0, getFloorY(juego), juego.assets.edificios,
drawBackground(juego, getFloorY(juego), height / 3, juego.assets.vereda) { x: 0, y: 0, width: 89, height: 48 })
drawTrees(juego) drawTrees(juego)
drawEnemies(juego) drawEnemies(juego)
@ -188,17 +201,18 @@ export function draw(juego: Juego<State>, timestamp: number) {
drawJugadorx(juego) drawJugadorx(juego)
drawSeeds(juego) drawSeeds(juego)
juego.ctx.fillStyle = "white"
drawText(juego, 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', { x: 0, y: 100 }, {}) drawText(juego, 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', { x: 0, y: 100 }, {})
const arbolesBox = drawText( const arbolesBox = drawText(
juego, `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`, juego, `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`,
{ x: juego.canvas.width - 10, y: 10 }, { x: juego.canvas.width - 10, y: 10 },
{ bold: true, align: 'right'}) { bold: true, align: 'right' })
const tiempoBox = drawText( const tiempoBox = drawText(
juego, `Tiempo restante`, juego, `Tiempo restante`,
{ x: 10, y: 10 }, { x: 10, y: 10 },
{ bold: false, align: 'left'}) { bold: false, align: 'left' })
juego.ctx.fillRect( juego.ctx.fillRect(
10, tiempoBox.y + tiempoBox.height, 10, tiempoBox.y + tiempoBox.height,

View file

@ -13,7 +13,7 @@ export type Juego<T extends State> = {
canvas: HTMLCanvasElement canvas: HTMLCanvasElement
ctx: CanvasRenderingContext2D ctx: CanvasRenderingContext2D
assets: Assets 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 } mouse: { x: number; y: number, down: boolean }
keyboard: { keys: { [key: string]: boolean } } keyboard: { keys: { [key: string]: boolean } }
state: T state: T
@ -71,10 +71,11 @@ async function initJuego() {
const assets = await loadAssets() const assets = await loadAssets()
const sprites = { const sprites = {
jugadorx: loadSprite(assets.jugadorx, 133, 266, juego => juego.canvas.height / 4), jugadorx: loadSprite(assets.jugadorx, 65, 94, juego => juego.canvas.height / 4),
larreta: loadSprite(assets.larreta, 800, 1069, juego => juego.canvas.height / 4), larreta: loadSprite(assets.larreta, 50, 71, juego => juego.canvas.height / 4),
semilla: loadSprite(assets.semilla, 480, 640, juego => juego.canvas.height / 8), semilla: loadSprite(assets.semilla, 72, 73, juego => juego.canvas.height / 8),
arbol: loadSprite(assets.arbol, 80, 150, juego => juego.canvas.height / 4), 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> = { let juego: Juego<welcome.State> = {
@ -89,6 +90,7 @@ async function initJuego() {
}, },
}; };
(window as any).juego = juego (window as any).juego = juego
juego.ctx.imageSmoothingEnabled = false
canvas.addEventListener("mousemove", e => { canvas.addEventListener("mousemove", e => {
juego.mouse.x = e.clientX 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) const measure = juego.ctx.measureText(text)
return { ...pos, width: measure.width, height: measure.actualBoundingBoxDescent } return { ...pos, width: measure.width, height: measure.actualBoundingBoxDescent }
} }
export function randomFromArray<T>(array: T[]): T {
return array[Math.floor(Math.random() * array.length)]
}