From d7a2b88146fc03b41467d27ecb9e76a1cf9ce678 Mon Sep 17 00:00:00 2001 From: Nulo Date: Fri, 2 Jul 2021 18:17:35 +0000 Subject: [PATCH] Firmas --- src/assets.ts | 6 ++ src/assets/Firma 1.png | Bin 0 -> 1058 bytes src/assets/Firma 2.png | Bin 0 -> 1022 bytes src/assets/Firma 3.png | Bin 0 -> 930 bytes src/jugando.ts | 122 ++++++++++++++++++++++++++--------------- src/main.ts | 23 +++++++- src/welcome.ts | 2 +- 7 files changed, 108 insertions(+), 45 deletions(-) create mode 100644 src/assets/Firma 1.png create mode 100644 src/assets/Firma 2.png create mode 100644 src/assets/Firma 3.png diff --git a/src/assets.ts b/src/assets.ts index c6e52f7..c154bd7 100644 --- a/src/assets.ts +++ b/src/assets.ts @@ -13,6 +13,9 @@ 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 ciudadanx1Img from "./assets/Firma 1.png"; +import ciudadanx2Img from "./assets/Firma 2.png"; +import ciudadanx3Img from "./assets/Firma 3.png"; function loadImage(url: string): Promise { return new Promise((resolve, reject) => { @@ -39,6 +42,9 @@ export const assetUrls = { semilla: semillaImg, arbol1: arbol1Img, arbol2: arbol2Img, + ciudadanx1: ciudadanx1Img, + ciudadanx2: ciudadanx2Img, + ciudadanx3: ciudadanx3Img, }; export type Assets = { [key in keyof typeof assetUrls]: HTMLImageElement }; diff --git a/src/assets/Firma 1.png b/src/assets/Firma 1.png new file mode 100644 index 0000000000000000000000000000000000000000..58dd32ea13061e650cfea9c9ef67b80b75774864 GIT binary patch literal 1058 zcmV+-1l{|IP)lm#&7qJw9B0T2f<*$6U=HFJNMm7>E@?D5u83fYlb{#$ z5Wj$8lQK;TtAsO=oPmJaIVtY;UUp|@=XGzD`89VpJ2TJx_jzXK*|`Ng9*-xDkZ=K| zRIj6jO?nOG6Q z8l0;Ev#=6Q%{xxOm}3G|>vOphS**3yDL{6W8XcxuUNBl>PoB4{-dLrPYeVz-R$*Z> zCmcv|f2Z4Kc3WDIvn94ufDYtf+NgbM=7fn5t#At9c_1#FfM`gu##S#?0d$8iE1b0V z3DXdgfDX;)8zVlLZWLsW(>mN7;04$9Z0mcJTaKlbY@oPxjW@r5btW(_U>z}Oj$@D~f zUNlk=y0=V#<=D&$NBmel~B2SNu2gtr=5 zJtzoc8Xkqo9E$rpr1`1T)>H&3Oy+vNv7{;$53*X(#>T=(gsL%Dq{Rp~CzQDoB8(Hj7c*nAbtW!;kjln8+?;vqB+t4Op7_#tTX;P& z5f3lEJ8OF>JP}9IBAhJ8HbhvTtYoIBRNqKM)7a(S?C59ZlWiH4Z;Gus(Nk}vZFREq z$79k1V4)hOY4d~@iHUIecBXa$$a!Ugd>y+V-8X9AXnAXm+|xA{gY}ntCw}g7uiahG z3E$vBuyIc9cDar2iBIHhhm)<{Td5zLB5bE0(*2o+Q_l~R0W(h|A%M!*@%x0w@1~R}>KnG`Y}NLJ1Nn=u<>I z122GyrKAJo#*@OV+1t#VGnZvd_G_@$>pAnE%k1p&0@T#h)WnELzmZZ}4YJr1mnxWT1DnkKWO~@t8u0ar`pKk;rYzw8mP`UXhOF#xZUJRj{_= z$=aPa&>sk^i{aMdZov_%$@|>JdS&yxotZSp`)Rz~6j374T#)Dw3f>gW1)5D=B!XSB zsgv`8vxpM!YLAD&xhAeX&RrU?k;QJN~{V+4NP(8DsZ9 zkB1F?op9<@D8^&qBEt9N0RY1;|2uc0ux&*IxsoMO7KBoFsr+>k%2^zi9;j=EeS7M< zk^t*xM*}3t#*8-f;MM7KTY04syOjyO}eWt+mNpGMa;wA_ATaYsE14ThO0SVSZOf|tu zBa`<-;oK-tcvX2W=X@$Q&9l&Zs^HDDD0j6n_ML)u0Hcfo5N9OV#3~|42Qb=H0^*GX zi}ntd;Js)%01uP@8Sb4a(RKff*)V!HaGLoGaU_-&hgK8NTdL4g#B zmC9CF#^32nfa%n~PN>#L3g~i%#}1wx1L?d7Wd~JK7h3 z-H$I6{H9aqSox7WXy1r0L7W^X4#@UQAN??z^_fn-IwF-m1L$Pf=XfsZ6iqKGs%HR8 sY|wsg3p|lZxDz63YHDg~YHFr|e_{nHZGU=C1^@s607*qoM6N<$f;ArAbpQYW literal 0 HcmV?d00001 diff --git a/src/assets/Firma 3.png b/src/assets/Firma 3.png new file mode 100644 index 0000000000000000000000000000000000000000..4c38775b5d9fab95a0ebfb7b9aea143a82c64e15 GIT binary patch literal 930 zcmV;T16}-yP)xW6c&)WWNDDv4t#-# zd;nNkgFu2#X-6|8mt5~`-{ZGCC-QG;RTi9{lvVA%rBxp`&drq0WZ zH!k#Tu$;^8L}&`gy-pP*5^=}E@T}5t698-kShG>3@f4hmn|$6N+PDx=X%qkl-ARYZ z_T}Pt{pWMhBOHQpT7)+dX@`AdB_i90%XB=A?U<;1JOCBWPA;S7Ma1Cz6od2A!ZKGv zyhWn@;uWdP1y*TCHr3E=SSZ0ib@nOvN%{4RKUvHi{udf>4>&e9AgQ&b#~J%}%1lWsky`rV- zBMY)wv3)PekUofybGJ6NC1Ks&a_nWo-z_wC%eM(o9mjeToH|>pS`?z^1zQ7*xZ`^B@b!|G7$^_>U+n_usnW7YMrDT z9k%oPa$qTLb88AfV^&g7G$x!Kt0bhw-F^GjNu9z-EXTz>1<{NGknc{}$hZ;!P{ssN zKo(hd@_|wWA9cxRKh!DJWdsrmKe7~v@HHPZ(SaRcc(+4V89+aw^UZpu;;Tp$5eiX6 zC`1vV5JiMS6cGxxd+bF@`FGlqX0-P{^Tl)jUNh-)_iJZv4wP3BXLrR_EliC>`Z*c# z(pJcnB7(i_0|4G^eDqR(j6??K2W?bBiiB|^ge1b4C_)Fy?MzdQbEo8c_tCdU^O8OQ zu>RBUf))7(ukRhRBU58VzGMriX@|i_d&Wmyu$>OYz%9S{sJr}!$F#%e4YWc^8xtQ6 zp6I?p782SWKqErF1DMz_zInD%tc8e3Boc{4B9RE4|3W+YDF*VwNdN!<07*qoM6N<$ Ef~Nhg7ytkO literal 0 HcmV?d00001 diff --git a/src/jugando.ts b/src/jugando.ts index e22750f..b5f88dd 100644 --- a/src/jugando.ts +++ b/src/jugando.ts @@ -13,12 +13,15 @@ import { const ENEMIES_NUM = 12; const SEED_COOLDOWN = 300; const MAP_MIN = 1000; -const MAP_MAX = 5000; +const MAP_MAX = 10000; const MAP_SIZE = MAP_MAX - MAP_MIN; -const TREES_TO_WIN = 30; +const SIGNATURES_TO_WIN = 20000; +const CITIZENS = SIGNATURES_TO_WIN / 1000; const TIME = 2 * 60 * 1000; const TIME_LOST_WHEN_HIT = 20 * 1000; +type Citizen = { x: number; sprite: Sprite }; + export type State = { current: "jugando"; pos: { x: number }; @@ -27,19 +30,35 @@ export type State = { enemies: { x: number; sprite: Sprite }[]; seeds: { x: number; velocity: { x: number } }[]; trees: { x: number; sprite: Sprite }[]; + citizens: Citizen[]; + signatures: number; time: number; seedCooldown: number; }; -export function createJugandoState(): State { +export function createJugandoState(juego: Juego): State { + let citizens = []; + for (let i = 0; i < CITIZENS; i++) { + citizens.push({ + x: MAP_MIN + (i + 1) * (MAP_SIZE / CITIZENS), + sprite: randomFromArray([ + juego.sprites.ciudadanx1, + juego.sprites.ciudadanx2, + juego.sprites.ciudadanx3, + ]), + }); + } + console.log(CITIZENS, citizens); return { current: "jugando", - pos: { x: MAP_MIN + MAP_SIZE / 2 }, + pos: { x: MAP_MIN + 100 }, view: { x: 0 }, side: "right", enemies: [], seeds: [], trees: [], + signatures: 0, + citizens, time: TIME, seedCooldown: 0, }; @@ -103,35 +122,33 @@ export function update(juego: Juego, dt: number) { if (juego.state.pos.x > MAP_MAX) juego.state.pos.x = MAP_MAX; juego.state.seedCooldown -= dt; - if ( - (juego.keyboard.keys[" "] || isTouching(juego, center)) && - 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 }, - }); + + const citizen = detectCitizen(juego); + + if (juego.keyboard.keys[" "] || isTouching(juego, center)) { + if (citizen) { + juego.state.signatures += 1000; + juego.state.citizens = juego.state.citizens.filter((c) => c != citizen); + } else { + if (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) - enemy.sprite.getHeight(juego), - width: enemy.sprite.getWidth(juego), - height: enemy.sprite.getHeight(juego), - } + getFlooredBox(juego, juego.sprites.semilla, seed.x), + getFlooredBox(juego, enemy.sprite, enemy.x) ) ) { juego.state.seeds = juego.state.seeds.filter((s) => s.x !== seed.x); @@ -150,7 +167,7 @@ export function update(juego: Juego, dt: number) { ); } - if (juego.state.trees.length >= TREES_TO_WIN) { + if (juego.state.signatures >= SIGNATURES_TO_WIN) { (juego as Juego).state = { current: "win" }; return; } @@ -178,18 +195,8 @@ export function update(juego: Juego, dt: number) { if ( boxCollision( - { - x: juego.state.pos.x, - y: getFloorY(juego) - juego.sprites.jugadorx.getHeight(juego), - width: juego.sprites.jugadorx.getWidth(juego), - height: juego.sprites.jugadorx.getHeight(juego), - }, - { - x: enemy.x, - y: getFloorY(juego) - enemy.sprite.getHeight(juego), - width: enemy.sprite.getWidth(juego), - height: enemy.sprite.getHeight(juego), - } + getFlooredBox(juego, juego.sprites.jugadorx, juego.state.pos.x), + getFlooredBox(juego, enemy.sprite, enemy.x) ) ) { juego.state.enemies = juego.state.enemies.filter((e) => e.x !== enemy.x); @@ -203,6 +210,27 @@ export function update(juego: Juego, dt: number) { juego.sprites.jugadorx.getWidth(juego) / 2; } +function getFlooredBox(juego: Juego, sprite: Sprite, x: number): Box { + const height = sprite.getHeight(juego); + return { + x, + y: getFloorY(juego) - height, + width: sprite.getWidth(juego), + height, + }; +} + +function detectCitizen(juego: Juego): Citizen | undefined { + const jugadorxBox = getFlooredBox( + juego, + juego.sprites.jugadorx, + juego.state.pos.x + ); + return juego.state.citizens.find((c) => + boxCollision(jugadorxBox, getFlooredBox(juego, c.sprite, c.x)) + ); +} + function drawJugadorx(juego: Juego) { const floorY = getFloorY(juego); juego.sprites.jugadorx.draw( @@ -228,6 +256,13 @@ function drawEnemies(juego: Juego) { enemy.sprite.draw(juego, enemy.x + juego.state.view.x, floorY - height); } } +function drawCitizens(juego: Juego) { + const floorY = getFloorY(juego); + for (const citizen of juego.state.citizens) { + const height = citizen.sprite.getHeight(juego); + citizen.sprite.draw(juego, citizen.x + juego.state.view.x, floorY - height); + } +} function drawSeeds(juego: Juego) { const height = juego.sprites.semilla.getHeight(juego); @@ -301,7 +336,7 @@ export function draw(juego: Juego, timestamp: number) { juego.canvas.height, juego.assets.cielo, undefined, - juego.state.trees.length / TREES_TO_WIN + juego.state.signatures / SIGNATURES_TO_WIN ); drawBackground( juego, @@ -309,10 +344,11 @@ export function draw(juego: Juego, timestamp: number) { juego.canvas.height, juego.assets.parquePublicoRio, undefined, - juego.state.trees.length / TREES_TO_WIN + juego.state.signatures / SIGNATURES_TO_WIN ); drawTrees(juego); + drawCitizens(juego); drawEnemies(juego); drawJugadorx(juego); @@ -344,9 +380,9 @@ export function draw(juego: Juego, timestamp: number) { } juego.ctx.fillStyle = "white"; - const arbolesBox = drawText( + const firmasBox = drawText( juego, - `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`, + `Firmas: ${juego.state.signatures}/${SIGNATURES_TO_WIN}`, { x: juego.canvas.width - 10, y: 10 }, { bold: true, align: "right" } ); @@ -361,7 +397,7 @@ export function draw(juego: Juego, timestamp: number) { juego.ctx.fillRect( 10, tiempoBox.y + tiempoBox.height, - (juego.canvas.width - arbolesBox.width - 20) * (juego.state.time / TIME), + (juego.canvas.width - firmasBox.width - 20) * (juego.state.time / TIME), 30 ); } diff --git a/src/main.ts b/src/main.ts index fcca70d..9293765 100644 --- a/src/main.ts +++ b/src/main.ts @@ -23,7 +23,10 @@ export type Juego = { | "millonarioMalo" | "semilla" | "arbol1" - | "arbol2"]: Sprite; + | "arbol2" + | "ciudadanx1" + | "ciudadanx2" + | "ciudadanx3"]: Sprite; }; mouse: { x: number; y: number; down: boolean }; touches: TouchList | null; @@ -158,6 +161,24 @@ async function initJuego() { 56, (juego) => juego.canvas.height / 4 ), + ciudadanx1: loadSprite( + assets.ciudadanx1, + 45, + 88, + (juego) => juego.canvas.height / 4 + ), + ciudadanx2: loadSprite( + assets.ciudadanx2, + 45, + 88, + (juego) => juego.canvas.height / 4 + ), + ciudadanx3: loadSprite( + assets.ciudadanx3, + 45, + 88, + (juego) => juego.canvas.height / 4 + ), }; let juego: Juego = { diff --git a/src/welcome.ts b/src/welcome.ts index 75015d3..e57d100 100644 --- a/src/welcome.ts +++ b/src/welcome.ts @@ -25,7 +25,7 @@ export function update(juego: Juego, dt: number) { (juego.mouse.down && posInBox(btn, juego.mouse)) || isTouching(juego, btn) ) { - (juego as Juego).state = createJugandoState(); + (juego as Juego).state = createJugandoState(juego); } }