From 080513daf6d627c9824d601fe2820e128bad8769 Mon Sep 17 00:00:00 2001 From: Nulo Date: Wed, 30 Jun 2021 23:16:45 +0000 Subject: [PATCH] Usar prettier --- .prettierignore | 6 + .prettierrc.json | 1 + package.json | 4 +- pnpm-lock.yaml | 8 + src/assets.ts | 62 ++++---- src/jugando.ts | 390 ++++++++++++++++++++++++++--------------------- src/lose.ts | 24 +-- src/main.ts | 260 ++++++++++++++++++------------- src/sprite.ts | 123 ++++++++------- src/style.css | 3 +- src/utils.ts | 67 ++++---- src/welcome.ts | 45 +++--- src/win.ts | 20 +-- tsconfig.json | 26 ++-- 14 files changed, 594 insertions(+), 445 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..1e78202 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local +pnpm-lock.yaml diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/package.json b/package.json index 587e40c..0be6b47 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,11 @@ "scripts": { "dev": "vite", "build": "vite build --base=./", - "serve": "vite preview" + "serve": "vite preview", + "format": "prettier --write ." }, "devDependencies": { + "prettier": "2.3.2", "typescript": "^4.3.4", "vite": "^2.3.8" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a37824..3804fd3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,10 +1,12 @@ lockfileVersion: 5.3 specifiers: + prettier: 2.3.2 typescript: ^4.3.4 vite: ^2.3.8 devDependencies: + prettier: 2.3.2 typescript: 4.3.4 vite: 2.3.8 @@ -63,6 +65,12 @@ packages: source-map-js: 0.6.2 dev: true + /prettier/2.3.2: + resolution: {integrity: sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==} + engines: {node: '>=10.13.0'} + hasBin: true + dev: true + /resolve/1.20.0: resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==} dependencies: diff --git a/src/assets.ts b/src/assets.ts index 5b14a1f..d591c6b 100644 --- a/src/assets.ts +++ b/src/assets.ts @@ -1,38 +1,42 @@ -import botonJugarImg from "./assets/boton_jugar.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 baldosaImg from "./assets/Baldosa.png" -import semillaImg from "./assets/Semilla.png" -import arbol1Img from "./assets/Árbol 1.png" -import arbol2Img from "./assets/Árbol 2.png" +import botonJugarImg from "./assets/boton_jugar.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 baldosaImg from "./assets/Baldosa.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 { - return new Promise((resolve, reject) => { - let img = new Image() - img.onload = () => resolve(img) - img.onerror = e => reject(e) - img.src = url - }) + return new Promise((resolve, reject) => { + let img = new Image(); + img.onload = () => resolve(img); + img.onerror = (e) => reject(e); + img.src = url; + }); } export const assetUrls = { - botonJugar: botonJugarImg, - larreta: larretaImg, - fondo: fondoImg, - edificios: edificiosImg, - jugadorx: jugadorxImg, - baldosa: baldosaImg, - semilla: semillaImg, - arbol1: arbol1Img, - arbol2: arbol2Img, -} -export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement } + botonJugar: botonJugarImg, + larreta: larretaImg, + fondo: fondoImg, + edificios: edificiosImg, + jugadorx: jugadorxImg, + baldosa: baldosaImg, + semilla: semillaImg, + arbol1: arbol1Img, + arbol2: arbol2Img, +}; +export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement }; -const assets = Object.fromEntries(Object.entries(assetUrls).map(([name, url]) => [name, loadImage(url)])) +const assets = Object.fromEntries( + Object.entries(assetUrls).map(([name, url]) => [name, loadImage(url)]) +); export async function loadAssets() { - const imgs = await Promise.all(Object.values(assets)) - return Object.fromEntries(imgs.map((img, i) => [Object.keys(assetUrls)[i], img])) as Assets + const imgs = await Promise.all(Object.values(assets)); + return Object.fromEntries( + imgs.map((img, i) => [Object.keys(assetUrls)[i], img]) + ) as Assets; } diff --git a/src/jugando.ts b/src/jugando.ts index b230cc5..b74e2d2 100644 --- a/src/jugando.ts +++ b/src/jugando.ts @@ -1,221 +1,255 @@ -import { Juego } from './main' -import { Sprite } from './sprite' -import { Box, boxCollision, drawText, randomFromArray } from './utils' +import { Juego } from "./main"; +import { Sprite } from "./sprite"; +import { Box, boxCollision, drawText, randomFromArray } from "./utils"; -const ENEMIES_NUM = 12 -const SEED_COOLDOWN = 300 -const MAP_MIN = 1000 -const MAP_MAX = 5000 -const MAP_SIZE = MAP_MAX - MAP_MIN -const TREES_TO_WIN = 30 -const TIME = 2 * 60 * 1000 +const ENEMIES_NUM = 12; +const SEED_COOLDOWN = 300; +const MAP_MIN = 1000; +const MAP_MAX = 5000; +const MAP_SIZE = MAP_MAX - MAP_MIN; +const TREES_TO_WIN = 30; +const TIME = 2 * 60 * 1000; export type State = { - current: "jugando" - pos: { x: number } - view: { x: number } - side: "left" | "right" - enemies: { x: number }[] - seeds: { x: number; velocity: { x: number } }[] - trees: { x: number, sprite: Sprite }[] - time: number, - seedCooldown: number, -} + current: "jugando"; + pos: { x: number }; + view: { x: number }; + side: "left" | "right"; + enemies: { x: number }[]; + seeds: { x: number; velocity: { x: number } }[]; + trees: { x: number; sprite: Sprite }[]; + time: number; + seedCooldown: number; +}; export function createJugandoState(): State { - return { - current: "jugando", - pos: { x: MAP_MIN + MAP_SIZE / 2 }, - view: { x: 0 }, - side: "right", - enemies: [], - seeds: [], - trees: [], - time: TIME, - seedCooldown: 0, - } + return { + current: "jugando", + pos: { x: MAP_MIN + MAP_SIZE / 2 }, + view: { x: 0 }, + side: "right", + enemies: [], + seeds: [], + trees: [], + time: TIME, + seedCooldown: 0, + }; } export function update(juego: Juego, dt: number) { - juego.state.time -= dt - if (juego.state.time < 0) { - (juego as Juego).state = { current: "lose" } - return - } + juego.state.time -= dt; + if (juego.state.time < 0) { + (juego as Juego).state = { current: "lose" }; + return; + } - const playerSpeed = juego.canvas.width * 0.15 - const enemySpeed = juego.canvas.width * 0.05 - if (juego.keyboard.keys.d || juego.keyboard.keys.ArrowRight) { - juego.state.side = "right" - juego.state.pos.x += (dt / 1000) * playerSpeed - } - if (juego.keyboard.keys.a || juego.keyboard.keys.ArrowLeft) { - juego.state.side = "left" - juego.state.pos.x -= (dt / 1000) * playerSpeed - } + const playerSpeed = juego.canvas.width * 0.15; + const enemySpeed = juego.canvas.width * 0.05; + if (juego.keyboard.keys.d || juego.keyboard.keys.ArrowRight) { + juego.state.side = "right"; + juego.state.pos.x += (dt / 1000) * playerSpeed; + } + if (juego.keyboard.keys.a || juego.keyboard.keys.ArrowLeft) { + juego.state.side = "left"; + juego.state.pos.x -= (dt / 1000) * playerSpeed; + } - if (juego.state.pos.x < MAP_MIN) juego.state.pos.x = MAP_MIN - if (juego.state.pos.x > MAP_MAX) juego.state.pos.x = MAP_MAX - - juego.state.seedCooldown -= dt - if (juego.keyboard.keys[' '] && juego.state.seedCooldown < 0) { - const seedSpeed = juego.canvas.width * 0.7 - juego.state.seeds.push({ - x: juego.state.pos.x, - velocity: { x: juego.state.side === "left" ? -seedSpeed : seedSpeed }, - }) - juego.state.seedCooldown = SEED_COOLDOWN - } - for (const seed of juego.state.seeds) { - seed.x += (dt / 1000) * seed.velocity.x - seed.velocity.x *= 0.97 - for (const enemy of juego.state.enemies) { - if (boxCollision({ - x: seed.x, - y: getFloorY(juego) - juego.sprites.semilla.getHeight(juego), - width: juego.sprites.semilla.getWidth(juego), - height: juego.sprites.semilla.getHeight(juego), - }, { - x: enemy.x, - y: getFloorY(juego) - juego.sprites.larreta.getHeight(juego), - width: juego.sprites.larreta.getWidth(juego), - height: juego.sprites.larreta.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.trees.push({ - x: enemy.x, - sprite: randomFromArray([juego.sprites.arbol1, juego.sprites.arbol2]), - }) - } - } - if (Math.abs(seed.velocity.x) < 100) - juego.state.seeds = juego.state.seeds.filter(s => s.velocity.x !== seed.velocity.x) - } - - if (juego.state.trees.length >= TREES_TO_WIN) { - (juego as Juego).state = { current: "win" } - return - } - - while (juego.state.enemies.length < ENEMIES_NUM) { - const x = Math.random() * MAP_SIZE + MAP_MIN - // Don't spawn enemies too close - if (Math.abs(juego.state.pos.x - x) < 300) continue - juego.state.enemies.push({ x }) - } + if (juego.state.pos.x < MAP_MIN) juego.state.pos.x = MAP_MIN; + if (juego.state.pos.x > MAP_MAX) juego.state.pos.x = MAP_MAX; + juego.state.seedCooldown -= dt; + if (juego.keyboard.keys[" "] && juego.state.seedCooldown < 0) { + const seedSpeed = juego.canvas.width * 0.7; + juego.state.seeds.push({ + x: juego.state.pos.x, + velocity: { x: juego.state.side === "left" ? -seedSpeed : seedSpeed }, + }); + juego.state.seedCooldown = SEED_COOLDOWN; + } + for (const seed of juego.state.seeds) { + seed.x += (dt / 1000) * seed.velocity.x; + seed.velocity.x *= 0.97; for (const enemy of juego.state.enemies) { - const distance = enemy.x - juego.state.pos.x - if (distance < 0) { - enemy.x += (dt / 1000) * enemySpeed - } else { - enemy.x -= (dt / 1000) * enemySpeed - } + if ( + boxCollision( + { + x: seed.x, + y: getFloorY(juego) - juego.sprites.semilla.getHeight(juego), + width: juego.sprites.semilla.getWidth(juego), + height: juego.sprites.semilla.getHeight(juego), + }, + { + x: enemy.x, + y: getFloorY(juego) - juego.sprites.larreta.getHeight(juego), + width: juego.sprites.larreta.getWidth(juego), + height: juego.sprites.larreta.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.trees.push({ + x: enemy.x, + sprite: randomFromArray([juego.sprites.arbol1, juego.sprites.arbol2]), + }); + } } + if (Math.abs(seed.velocity.x) < 100) + juego.state.seeds = juego.state.seeds.filter( + (s) => s.velocity.x !== seed.velocity.x + ); + } - juego.state.view.x = -juego.state.pos.x + juego.canvas.width / 2 - juego.sprites.jugadorx.getWidth(juego) / 2 + if (juego.state.trees.length >= TREES_TO_WIN) { + (juego as Juego).state = { current: "win" }; + return; + } + + while (juego.state.enemies.length < ENEMIES_NUM) { + const x = Math.random() * MAP_SIZE + MAP_MIN; + // Don't spawn enemies too close + if (Math.abs(juego.state.pos.x - x) < 300) continue; + juego.state.enemies.push({ x }); + } + + for (const enemy of juego.state.enemies) { + const distance = enemy.x - juego.state.pos.x; + if (distance < 0) { + enemy.x += (dt / 1000) * enemySpeed; + } else { + enemy.x -= (dt / 1000) * enemySpeed; + } + } + + juego.state.view.x = + -juego.state.pos.x + + juego.canvas.width / 2 - + juego.sprites.jugadorx.getWidth(juego) / 2; } function drawJugadorx(juego: Juego) { - const floorY = getFloorY(juego) - juego.sprites.jugadorx.draw( - juego, - juego.state.pos.x + juego.state.view.x, - floorY - juego.sprites.jugadorx.getHeight(juego), - 0, - juego.state.side === "left", - ) + const floorY = getFloorY(juego); + juego.sprites.jugadorx.draw( + juego, + juego.state.pos.x + juego.state.view.x, + floorY - juego.sprites.jugadorx.getHeight(juego), + 0, + juego.state.side === "left" + ); } function drawTrees(juego: Juego) { - const floorY = getFloorY(juego) - for (const tree of juego.state.trees) { - const height = tree.sprite.getHeight(juego) - tree.sprite.draw( - juego, - tree.x + juego.state.view.x, - floorY - height, - ) - } + const floorY = getFloorY(juego); + for (const tree of juego.state.trees) { + const height = tree.sprite.getHeight(juego); + tree.sprite.draw(juego, tree.x + juego.state.view.x, floorY - height); + } } function drawEnemies(juego: Juego) { - const height = juego.sprites.larreta.getHeight(juego) - const floorY = getFloorY(juego) - for (const enemy of juego.state.enemies) { - juego.sprites.larreta.draw( - juego, - enemy.x + juego.state.view.x, - floorY - height, - ) - } + const height = juego.sprites.larreta.getHeight(juego); + const floorY = getFloorY(juego); + for (const enemy of juego.state.enemies) { + juego.sprites.larreta.draw( + juego, + enemy.x + juego.state.view.x, + floorY - height + ); + } } function drawSeeds(juego: Juego) { - const height = juego.sprites.semilla.getHeight(juego) - const floorY = getFloorY(juego) - for (const seed of juego.state.seeds) { - juego.sprites.semilla.draw( - juego, - seed.x + juego.state.view.x, - floorY - height, - ) - } + const height = juego.sprites.semilla.getHeight(juego); + const floorY = getFloorY(juego); + for (const seed of juego.state.seeds) { + juego.sprites.semilla.draw( + juego, + seed.x + juego.state.view.x, + floorY - height + ); + } } function getFloorY(juego: Juego): number { - return juego.canvas.height * 65 / 96 + return (juego.canvas.height * 65) / 96; } function drawBackground( - juego: Juego, - y: number, - height: number, - img: HTMLImageElement, - sourceBox?: Box, + juego: Juego, + 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) - } + 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, timestamp: number) { - 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 }) + 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) + drawTrees(juego); + drawEnemies(juego); - drawJugadorx(juego) - drawSeeds(juego) + drawJugadorx(juego); + drawSeeds(juego); - juego.ctx.fillStyle = "white" - drawText(juego, 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', { x: 0, y: 100 }, {}) + juego.ctx.fillStyle = "white"; + drawText( + juego, + 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', + { x: 0, y: 100 }, + {} + ); - const arbolesBox = drawText( - juego, `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`, - { x: juego.canvas.width - 10, y: 10 }, - { bold: true, align: 'right' }) + const arbolesBox = drawText( + juego, + `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`, + { x: juego.canvas.width - 10, y: 10 }, + { bold: true, align: "right" } + ); - const tiempoBox = drawText( - juego, `Tiempo restante`, - { x: 10, y: 10 }, - { bold: false, align: 'left' }) + const tiempoBox = drawText( + juego, + `Tiempo restante`, + { x: 10, y: 10 }, + { bold: false, align: "left" } + ); - juego.ctx.fillRect( - 10, tiempoBox.y + tiempoBox.height, - (juego.canvas.width - arbolesBox.width - 20) * (juego.state.time / TIME), - 30) + juego.ctx.fillRect( + 10, + tiempoBox.y + tiempoBox.height, + (juego.canvas.width - arbolesBox.width - 20) * (juego.state.time / TIME), + 30 + ); } diff --git a/src/lose.ts b/src/lose.ts index f980ad3..6515f1b 100644 --- a/src/lose.ts +++ b/src/lose.ts @@ -1,18 +1,20 @@ -import { Juego } from './main' -import { drawText } from './utils' +import { Juego } from "./main"; +import { drawText } from "./utils"; export type State = { - current: "lose" -} + current: "lose"; +}; -export function update(juego: Juego, dt: number) { -} +export function update(juego: Juego, dt: number) {} export function draw(juego: Juego, timestamp: number) { - drawText(juego, '¡Te convirtieron en baldosa!', - { x: juego.canvas.width / 2, y: 100 }, - { bold: true, size: 3, align: 'center' }) + drawText( + juego, + "¡Te convirtieron en baldosa!", + { x: juego.canvas.width / 2, y: 100 }, + { bold: true, size: 3, align: "center" } + ); - const width = juego.sprites.baldosa.getWidth(juego) - juego.sprites.baldosa.draw(juego, juego.canvas.width / 2 - width / 2, 100) + const width = juego.sprites.baldosa.getWidth(juego); + juego.sprites.baldosa.draw(juego, juego.canvas.width / 2 - width / 2, 100); } diff --git a/src/main.ts b/src/main.ts index b9b5230..7fa4cde 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,131 +1,181 @@ -import './style.css' +import "./style.css"; -import * as welcome from "./welcome" -import * as jugando from "./jugando" -import * as win from "./win" -import * as lose from "./lose" -import { Assets, loadAssets } from './assets' -import { loadSprite, Sprite } from './sprite' +import * as welcome from "./welcome"; +import * as jugando from "./jugando"; +import * as win from "./win"; +import * as lose from "./lose"; +import { Assets, loadAssets } from "./assets"; +import { loadSprite, Sprite } from "./sprite"; -export type State = welcome.State | jugando.State | win.State | lose.State +export type State = welcome.State | jugando.State | win.State | lose.State; export type Juego = { - canvas: HTMLCanvasElement - ctx: CanvasRenderingContext2D - assets: Assets - sprites: { [key in "jugadorx" | "baldosa" | "larreta" | "semilla" | "arbol1" | "arbol2"]: Sprite } - mouse: { x: number; y: number, down: boolean } - keyboard: { keys: { [key: string]: boolean } } - state: T -} + canvas: HTMLCanvasElement; + ctx: CanvasRenderingContext2D; + assets: Assets; + sprites: { + [key in + | "jugadorx" + | "baldosa" + | "larreta" + | "semilla" + | "arbol1" + | "arbol2"]: Sprite; + }; + mouse: { x: number; y: number; down: boolean }; + keyboard: { keys: { [key: string]: boolean } }; + state: T; +}; function update(juego: Juego, dt: number) { - switch (juego.state.current) { - case "welcome": - welcome.update(juego, dt) - break - case "jugando": - jugando.update(juego, dt) - break - case "win": - win.update(juego, dt) - break - case "lose": - lose.update(juego, dt) - break - } + switch (juego.state.current) { + case "welcome": + welcome.update(juego, dt); + break; + case "jugando": + jugando.update(juego, dt); + break; + case "win": + win.update(juego, dt); + break; + case "lose": + lose.update(juego, dt); + break; + } } function draw(juego: Juego, timestamp: number) { - const { width, height } = juego.canvas + const { width, height } = juego.canvas; - juego.ctx.fillStyle = "white" - juego.ctx.fillRect(0, 0, width, height) - juego.ctx.fillStyle = "black" - switch (juego.state.current) { - case "welcome": - welcome.draw(juego, timestamp) - break - case "jugando": - jugando.draw(juego, timestamp) - break - case "win": - win.draw(juego, timestamp) - break - case "lose": - lose.draw(juego, timestamp) - break - } + juego.ctx.fillStyle = "white"; + juego.ctx.fillRect(0, 0, width, height); + juego.ctx.fillStyle = "black"; + switch (juego.state.current) { + case "welcome": + welcome.draw(juego, timestamp); + break; + case "jugando": + jugando.draw(juego, timestamp); + break; + case "win": + win.draw(juego, timestamp); + break; + case "lose": + lose.draw(juego, timestamp); + break; + } } function resizeCanvas(canvas: HTMLCanvasElement) { - canvas.width = canvas.clientWidth - canvas.height = canvas.clientHeight + canvas.width = canvas.clientWidth; + canvas.height = canvas.clientHeight; } async function initJuego() { - const canvas = document.querySelector("#juego")! - const ctx = canvas.getContext("2d", { - alpha: false, - desynchronized: true, - })! + const canvas = document.querySelector("#juego")!; + const ctx = canvas.getContext("2d", { + alpha: false, + desynchronized: true, + })!; - window.addEventListener("resize", () => resizeCanvas(canvas), false) - resizeCanvas(canvas) + window.addEventListener("resize", () => resizeCanvas(canvas), false); + resizeCanvas(canvas); - const assets = await loadAssets() + const assets = await loadAssets(); - const sprites = { - jugadorx: loadSprite(assets.jugadorx, 65, 94, juego => juego.canvas.height / 4), - baldosa: loadSprite(assets.baldosa, 72, 72, juego => juego.canvas.height * 0.8), - 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), - } + const sprites = { + jugadorx: loadSprite( + assets.jugadorx, + 65, + 94, + (juego) => juego.canvas.height / 4 + ), + baldosa: loadSprite( + assets.baldosa, + 72, + 72, + (juego) => juego.canvas.height * 0.8 + ), + 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 = { - canvas, - ctx, - assets, - sprites, - mouse: { x: 0, y: 0, down: false }, - keyboard: { keys: {} }, - state: { - current: "welcome", - }, - }; - (window as any).juego = juego - juego.ctx.imageSmoothingEnabled = false + let juego: Juego = { + canvas, + ctx, + assets, + sprites, + mouse: { x: 0, y: 0, down: false }, + keyboard: { keys: {} }, + state: { + current: "welcome", + }, + }; + (window as any).juego = juego; + juego.ctx.imageSmoothingEnabled = false; - canvas.addEventListener("mousemove", e => { - juego.mouse.x = e.clientX - juego.mouse.y = e.clientY - }, false) - canvas.addEventListener("mousedown", () => { - juego.mouse.down = true - }, false) - canvas.addEventListener("mouseup", () => { - juego.mouse.down = false - }, false) - window.addEventListener("keydown", e => { - juego.keyboard.keys[e.key] = true - }) - window.addEventListener("keyup", e => { - juego.keyboard.keys[e.key] = false - }) + canvas.addEventListener( + "mousemove", + (e) => { + juego.mouse.x = e.clientX; + juego.mouse.y = e.clientY; + }, + false + ); + canvas.addEventListener( + "mousedown", + () => { + juego.mouse.down = true; + }, + false + ); + canvas.addEventListener( + "mouseup", + () => { + juego.mouse.down = false; + }, + false + ); + window.addEventListener("keydown", (e) => { + juego.keyboard.keys[e.key] = true; + }); + window.addEventListener("keyup", (e) => { + juego.keyboard.keys[e.key] = false; + }); - let lastRender = 0 - const loop: FrameRequestCallback = timestamp => { - const progress = timestamp - lastRender + let lastRender = 0; + const loop: FrameRequestCallback = (timestamp) => { + const progress = timestamp - lastRender; - update(juego, progress) - draw(juego, timestamp) + update(juego, progress); + draw(juego, timestamp); - lastRender = timestamp - window.requestAnimationFrame(loop) - } + lastRender = timestamp; + window.requestAnimationFrame(loop); + }; - window.requestAnimationFrame(loop) + window.requestAnimationFrame(loop); } -initJuego() +initJuego(); diff --git a/src/sprite.ts b/src/sprite.ts index 3debc1e..dc58475 100644 --- a/src/sprite.ts +++ b/src/sprite.ts @@ -1,65 +1,80 @@ -import { Juego } from "./main" +import { Juego } from "./main"; export type Sprite = { - getWidth: (juego: Juego) => number; - getHeight: (juego: Juego) => number; - draw: (juego: Juego, x: number, y: number, spriteIndex?: number, flipped?: boolean) => void; - width: number; - height: number; -} + getWidth: (juego: Juego) => number; + getHeight: (juego: Juego) => number; + draw: ( + juego: Juego, + x: number, + y: number, + spriteIndex?: number, + flipped?: boolean + ) => void; + width: number; + height: number; +}; // Sprites are image assets that have a grid of tiles to animate export function loadSprite( - img: HTMLImageElement, - // The size of each tile - width: number, height: number, - // Calculates the size of the sprite when rendering - getHeight: (juego: Juego) => number, + img: HTMLImageElement, + // The size of each tile + width: number, + height: number, + // Calculates the size of the sprite when rendering + getHeight: (juego: Juego) => number ): Sprite { - 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?`) - } + 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(juego: Juego) { - return getHeight(juego) * aspect - } + function getWidth(juego: Juego) { + return getHeight(juego) * aspect; + } - function draw(juego: Juego, 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) - 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, - ) - } + function draw( + juego: Juego, + 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); + 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 } + return { getWidth, getHeight, draw, width, height }; } diff --git a/src/style.css b/src/style.css index 2be616c..646e38c 100644 --- a/src/style.css +++ b/src/style.css @@ -1,4 +1,5 @@ -html, body { +html, +body { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/src/utils.ts b/src/utils.ts index 6469368..ab89055 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,47 +1,62 @@ import { Juego } from "./main"; export type Pos = { - x: number, y: number, + x: number; + y: number; }; export type Box = Pos & { - width: number, height: number, -} + width: number; + height: number; +}; 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 + 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)) - ) + // 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 + ); } -export function drawText(juego: Juego, text: string, pos: Pos, { +export function drawText( + juego: Juego, + text: string, + pos: Pos, + { bold = false, size = 2, align = "left", baseline = "top", -}: { - align?: CanvasTextAlign, - baseline?: CanvasTextBaseline, - bold?: boolean, + }: { + align?: CanvasTextAlign; + baseline?: CanvasTextBaseline; + bold?: boolean; // in rem - size?: number, -}): Box { - juego.ctx.font = `${bold ? 'bold ' : ''}${size}rem sans-serif` - juego.ctx.textAlign = align - juego.ctx.textBaseline = baseline - juego.ctx.fillText(text, pos.x, pos.y) + size?: number; + } +): Box { + juego.ctx.font = `${bold ? "bold " : ""}${size}rem sans-serif`; + juego.ctx.textAlign = align; + juego.ctx.textBaseline = baseline; + juego.ctx.fillText(text, pos.x, pos.y); - const measure = juego.ctx.measureText(text) - return { ...pos, width: measure.width, height: measure.actualBoundingBoxDescent } + const measure = juego.ctx.measureText(text); + return { + ...pos, + width: measure.width, + height: measure.actualBoundingBoxDescent, + }; } export function randomFromArray(array: T[]): T { - return array[Math.floor(Math.random() * array.length)] + return array[Math.floor(Math.random() * array.length)]; } diff --git a/src/welcome.ts b/src/welcome.ts index 195df1c..3830d03 100644 --- a/src/welcome.ts +++ b/src/welcome.ts @@ -1,29 +1,38 @@ -import { posInBox } from './utils' -import { createJugandoState } from './jugando' -import { Juego } from './main' +import { posInBox } from "./utils"; +import { createJugandoState } from "./jugando"; +import { Juego } from "./main"; export type State = { - current: "welcome" -} + current: "welcome"; +}; function startButton(juego: Juego) { - const [width, height] = [juego.assets.botonJugar.width / 4, juego.assets.botonJugar.height / 4] - return { - x: juego.canvas.width - width - 30, - y: juego.canvas.height - height - 30, - width, - height, - } + const [width, height] = [ + juego.assets.botonJugar.width / 4, + juego.assets.botonJugar.height / 4, + ]; + return { + x: juego.canvas.width - width - 30, + y: juego.canvas.height - height - 30, + width, + height, + }; } export function update(juego: Juego, dt: number) { - const btn = startButton(juego) - if (juego.mouse.down && posInBox(btn, juego.mouse)) { - (juego as Juego).state = createJugandoState() - } + const btn = startButton(juego); + if (juego.mouse.down && posInBox(btn, juego.mouse)) { + (juego as Juego).state = createJugandoState(); + } } export function draw(juego: Juego, timestamp: number) { - const btn = startButton(juego) - juego.ctx.drawImage(juego.assets.botonJugar, btn.x, btn.y, btn.width, btn.height) + const btn = startButton(juego); + juego.ctx.drawImage( + juego.assets.botonJugar, + btn.x, + btn.y, + btn.width, + btn.height + ); } diff --git a/src/win.ts b/src/win.ts index c01ce1a..5530d65 100644 --- a/src/win.ts +++ b/src/win.ts @@ -1,15 +1,17 @@ -import { Juego } from './main' -import { drawText } from './utils' +import { Juego } from "./main"; +import { drawText } from "./utils"; export type State = { - current: "win" -} + current: "win"; +}; -export function update(juego: Juego, dt: number) { -} +export function update(juego: Juego, dt: number) {} export function draw(juego: Juego, timestamp: number) { - drawText(juego, '¡Salvaste la costanera!', - { x: juego.canvas.width / 2, y: 100 }, - { bold: true, size: 3, align: 'center' }) + drawText( + juego, + "¡Salvaste la costanera!", + { x: juego.canvas.width / 2, y: 100 }, + { bold: true, size: 3, align: "center" } + ); } diff --git a/tsconfig.json b/tsconfig.json index ad7827c..060692a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,15 +1,15 @@ { - "compilerOptions": { - "target": "ESNext", - "module": "ESNext", - "lib": ["ESNext", "DOM"], - "moduleResolution": "Node", - "strict": true, - "sourceMap": true, - "resolveJsonModule": true, - "esModuleInterop": true, - "noEmit": true, - "noImplicitReturns": true - }, - "include": ["./src"] + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "strict": true, + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "noEmit": true, + "noImplicitReturns": true + }, + "include": ["./src"] }