Agregar tiempo

This commit is contained in:
Nulo 2021-06-30 21:18:13 +00:00
parent ce7e0a5641
commit 97d97508e7
2 changed files with 47 additions and 10 deletions

View file

@ -1,5 +1,5 @@
import { Juego } from './main' import { Juego } from './main'
import { boxCollision } from './utils' import { boxCollision, drawText } from './utils'
const ENEMIES_NUM = 20 const ENEMIES_NUM = 20
const SEED_COOLDOWN = 300 const SEED_COOLDOWN = 300
@ -7,6 +7,7 @@ const MAP_MIN = 1000
const MAP_MAX = 5000 const MAP_MAX = 5000
const MAP_SIZE = MAP_MAX - MAP_MIN const MAP_SIZE = MAP_MAX - MAP_MIN
const TREES_TO_WIN = 70 const TREES_TO_WIN = 70
const TIME = 2 * 60 * 1000
export type State = { export type State = {
current: "jugando" current: "jugando"
@ -16,6 +17,7 @@ export type State = {
enemies: { x: number }[] enemies: { x: number }[]
seeds: { x: number; velocity: { x: number } }[] seeds: { x: number; velocity: { x: number } }[]
trees: { x: number }[] trees: { x: number }[]
time: number,
seedCooldown: number, seedCooldown: number,
} }
@ -28,11 +30,18 @@ export function createJugandoState(): State {
enemies: [], enemies: [],
seeds: [], seeds: [],
trees: [], trees: [],
time: TIME,
seedCooldown: 0, seedCooldown: 0,
} }
} }
export function update(juego: Juego<State>, dt: number) { 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 playerSpeed = juego.canvas.width * 0.15
const enemySpeed = juego.canvas.width * 0.05 const enemySpeed = juego.canvas.width * 0.05
if (juego.keyboard.keys.d || juego.keyboard.keys.ArrowRight) { if (juego.keyboard.keys.d || juego.keyboard.keys.ArrowRight) {
@ -179,15 +188,20 @@ export function draw(juego: Juego<State>, timestamp: number) {
drawJugadorx(juego) drawJugadorx(juego)
drawSeeds(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)
} }

View file

@ -1,9 +1,12 @@
import { Juego } from "./main";
export type Pos = { export type Pos = {
x: number, y: number, x: number, y: number,
}; };
export type Box = Pos & { export type Box = Pos & {
width: number, height: number, width: number, height: number,
} }
export function posInBox(box: Box, pos: Pos) { export function posInBox(box: Box, pos: Pos) {
return pos.x > box.x && pos.x < box.x + box.width return pos.x > box.x && pos.x < box.x + box.width
&& pos.y > box.y && pos.y < box.y + box.height && 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 }
}