salva-la-costanera/src/main.ts

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'

export type State = welcome.State | jugando.State | win.State | lose.State

export type Juego<T extends State> = {
    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<any>, 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
    }
}

function draw(juego: Juego<any>, timestamp: number) {
    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
    }
}

function resizeCanvas(canvas: HTMLCanvasElement) {
    canvas.width = canvas.clientWidth
    canvas.height = canvas.clientHeight
}

async function initJuego() {
    const canvas = document.querySelector<HTMLCanvasElement>("#juego")!
    const ctx = canvas.getContext("2d", {
        alpha: false,
        desynchronized: true,
    })!

    window.addEventListener("resize", () => resizeCanvas(canvas), false)
    resizeCanvas(canvas)

    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),
    }

    let juego: Juego<welcome.State> = {
        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
    })

    let lastRender = 0
    const loop: FrameRequestCallback = timestamp => {
        const progress = timestamp - lastRender

        update(juego, progress)
        draw(juego, timestamp)

        lastRender = timestamp
        window.requestAnimationFrame(loop)
    }

    window.requestAnimationFrame(loop)
}
initJuego()