You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

181 lines
3.8 KiB

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();