From e003bbae224e13caf223e7cfa1f7ee5887b257c5 Mon Sep 17 00:00:00 2001 From: Nulo Date: Mon, 5 Jul 2021 16:13:36 +0000 Subject: [PATCH] Usar assets para cuando perdes y ganas --- src/assets.ts | 4 ++++ src/jugando.ts | 29 +++++++++++++++++++++++++---- src/lose.ts | 44 -------------------------------------------- src/main.ts | 29 +++++++++-------------------- src/win.ts | 17 ----------------- 5 files changed, 38 insertions(+), 85 deletions(-) delete mode 100644 src/lose.ts delete mode 100644 src/win.ts diff --git a/src/assets.ts b/src/assets.ts index 3e051d0..d2d27db 100644 --- a/src/assets.ts +++ b/src/assets.ts @@ -6,6 +6,8 @@ import logoSalvaLaCostaneraCostado from "./assets/Salva2.png"; import instrucciones1 from "./assets/Instrucciones 1.png"; import instrucciones2 from "./assets/Instrucciones 2.png"; import instrucciones3 from "./assets/Instrucciones 3.png"; +import placaPerdiste from "./assets/Perdiste.png"; +import placaFelicitaciones from "./assets/Felicitaciones.png"; import flecha from "./assets/flecha.png"; import larreta from "./assets/Larreta.png"; import millonarioMalo from "./assets/Millonario Malo.png"; @@ -43,6 +45,8 @@ export const assetUrls = { instrucciones1, instrucciones2, instrucciones3, + placaPerdiste, + placaFelicitaciones, flecha, larreta, millonarioMalo, diff --git a/src/jugando.ts b/src/jugando.ts index 1dee490..11b6e96 100644 --- a/src/jugando.ts +++ b/src/jugando.ts @@ -1,4 +1,3 @@ -import { createState } from "./lose"; import { Juego, State as AllState } from "./main"; import { Sprite } from "./sprite"; import { @@ -24,6 +23,7 @@ type Citizen = { x: number; sprite: Sprite }; export type State = { current: "jugando"; + has: "lost" | "won" | null; pos: { x: number }; view: { x: number }; side: "left" | "right"; @@ -50,6 +50,7 @@ export function createJugandoState(juego: Juego): State { } return { current: "jugando", + has: null, pos: { x: MAP_MIN + 100 }, view: { x: 0 }, side: "right", @@ -91,9 +92,11 @@ function touchControls(juego: Juego): { } export function update(juego: Juego, dt: number) { + if (juego.state.has) return; + juego.state.time -= dt; if (juego.state.time < 0) { - (juego as Juego).state = createState(juego); + juego.state.has = "lost"; return; } @@ -167,7 +170,7 @@ export function update(juego: Juego, dt: number) { } if (juego.state.signatures >= SIGNATURES_TO_WIN) { - (juego as Juego).state = { current: "win" }; + juego.state.has = "won"; return; } @@ -369,7 +372,7 @@ export function draw(juego: Juego, timestamp: number) { drawJugadorx(juego); drawSeeds(juego); - if (isMobile(juego)) { + if (isMobile(juego) && !juego.state.has) { const { left, right } = touchControls(juego); juego.ctx.fillStyle = "rgba(0, 0, 0, 0.3)"; @@ -424,4 +427,22 @@ export function draw(juego: Juego, timestamp: number) { { align: "center", maxWidth: juego.canvas.width } ); } + + if (juego.state.has) { + if (juego.state.has === "lost") { + const width = juego.sprites.placaPerdiste.getWidth(juego); + juego.sprites.placaPerdiste.draw( + juego, + juego.canvas.width / 2 - width / 2, + juego.canvas.height * 0.1 + ); + } else if (juego.state.has === "won") { + const width = juego.sprites.placaFelicitaciones.getWidth(juego); + juego.sprites.placaFelicitaciones.draw( + juego, + juego.canvas.width / 2 - width / 2, + juego.canvas.height * 0.1 + ); + } + } } diff --git a/src/lose.ts b/src/lose.ts deleted file mode 100644 index cee1bf5..0000000 --- a/src/lose.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Juego, State as AllState } from "./main"; -import { drawText } from "./utils"; -import * as welcome from "./welcome"; - -export type State = { - current: "lose"; - timeout: number; -}; - -const TIMEOUT = 10 * 1000; - -export function createState(juego: Juego): State { - return { - current: "lose", - timeout: TIMEOUT, - }; -} - -export function update(juego: Juego, dt: number) { - juego.state.timeout -= dt; - if (juego.state.timeout < 0) { - (juego as Juego).state = welcome.createState(); - return; - } -} - -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" } - ); - - const width = juego.sprites.baldosa.getWidth(juego); - juego.sprites.baldosa.draw(juego, juego.canvas.width / 2 - width / 2, 100); - - juego.ctx.fillRect( - 0, - juego.canvas.height - 30, - juego.canvas.width * (juego.state.timeout / TIMEOUT), - 30 - ); -} diff --git a/src/main.ts b/src/main.ts index aef78a6..a53df14 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,18 +3,11 @@ import "./style.css"; import * as logo from "./logo"; 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 { drawText } from "./utils"; -export type State = - | logo.State - | welcome.State - | jugando.State - | win.State - | lose.State; +export type State = logo.State | welcome.State | jugando.State; export type Juego = { canvas: HTMLCanvasElement; @@ -30,6 +23,8 @@ export type Juego = { | "instrucciones1" | "instrucciones2" | "instrucciones3" + | "placaPerdiste" + | "placaFelicitaciones" | "flecha" | "jugadorx" | "jugadorxPresentando" @@ -65,12 +60,6 @@ function update(juego: Juego, dt: number) { case "jugando": jugando.update(juego, dt); break; - case "win": - win.update(juego, dt); - break; - case "lose": - lose.update(juego, dt); - break; } } @@ -103,12 +92,6 @@ function draw(juego: Juego, timestamp: number) { case "jugando": jugando.draw(juego, timestamp); break; - case "win": - win.draw(juego, timestamp); - break; - case "lose": - lose.draw(juego, timestamp); - break; } } @@ -159,6 +142,12 @@ async function initJuego() { instrucciones3: loadSprite(assets.instrucciones3, { width: (juego) => juego.canvas.width * 0.6, }), + placaPerdiste: loadSprite(assets.placaPerdiste, { + height: (juego) => juego.canvas.height * 0.8, + }), + placaFelicitaciones: loadSprite(assets.placaFelicitaciones, { + height: (juego) => juego.canvas.height * 0.8, + }), flecha: loadSprite(assets.flecha, { height: (juego) => juego.canvas.height / 6, }), diff --git a/src/win.ts b/src/win.ts deleted file mode 100644 index 5530d65..0000000 --- a/src/win.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Juego } from "./main"; -import { drawText } from "./utils"; - -export type State = { - current: "win"; -}; - -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" } - ); -}