Agregar tiempo

src/jugando.ts

@@ -1,5 +1,5 @@
 import { Juego } from './main'
-import { boxCollision } from './utils'
+import { boxCollision, drawText } from './utils'
 
 const ENEMIES_NUM = 20
 const SEED_COOLDOWN = 300
@@ -7,6 +7,7 @@ const MAP_MIN = 1000
 const MAP_MAX = 5000
 const MAP_SIZE = MAP_MAX - MAP_MIN
 const TREES_TO_WIN = 70
+const TIME = 2 * 60 * 1000
 
 export type State = {
     current: "jugando"
@@ -16,6 +17,7 @@ export type State = {
     enemies: { x: number }[]
     seeds: { x: number; velocity: { x: number } }[]
     trees: { x: number }[]
+    time: number,
     seedCooldown: number,
 }
 
@@ -28,11 +30,18 @@ export function createJugandoState(): State {
         enemies: [],
         seeds: [],
         trees: [],
+        time: TIME,
         seedCooldown: 0,
     }
 }
 
 export function update(juego: Juego<State>, dt: number) {
+    juego.state.time -= dt
+    if (juego.state.time < 0) {
+        // TODO: convertir en baldoza
+        return
+    }
+
     const playerSpeed = juego.canvas.width * 0.15
     const enemySpeed = juego.canvas.width * 0.05
     if (juego.keyboard.keys.d || juego.keyboard.keys.ArrowRight) {
@@ -179,15 +188,20 @@ export function draw(juego: Juego<State>, timestamp: number) {
     drawJugadorx(juego)
     drawSeeds(juego)
 
-    juego.ctx.font = `bold 1rem sans-serif`
+    drawText(juego, 'Usá las flechitas para moverte, y espacio para "disparar" semillas.', { x: 0, y: 100 }, {})
-    juego.ctx.fillText('Usá las flechitas para moverte, y espacio para "disparar" semillas.', 100, 100)
 
-    const fontSize = '3rem'
+    const arbolesBox = drawText(
-    juego.ctx.font = `bold ${fontSize} sans-serif`
+        juego, `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`,
-    const treesText = `Arboles: ${juego.state.trees.length}/${TREES_TO_WIN}`
+        { x: juego.canvas.width - 10, y: 10 },
-    const treesTextMeasure = juego.ctx.measureText(treesText)
+        { bold: true, align: 'right'})
 
-    juego.ctx.fillText(treesText,
+    const tiempoBox = drawText(
-        juego.canvas.width - treesTextMeasure.width - 10,
+        juego, `Tiempo restante`,
-        10 + treesTextMeasure.actualBoundingBoxAscent)
+        { 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)
 }

src/utils.ts

@@ -1,9 +1,12 @@
+import { Juego } from "./main";
+
 export type Pos = {
     x: number, y: number,
 };
 export type Box = Pos & {
     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
@@ -18,3 +21,23 @@ export function boxCollision(box1: Box, box2: Box) {
     )
 }
 
+export function drawText(juego: Juego<any>, text: string, pos: Pos, {
+    bold = false,
+    size = 2,
+    align = "left",
+    baseline = "top",
+}: {
+    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)
+
+    const measure = juego.ctx.measureText(text)
+    return { ...pos, width: measure.width, height: measure.actualBoundingBoxDescent }
+}