2021-06-30 23:16:45 +00:00
|
|
|
import "./style.css";
|
2021-06-28 18:01:45 +00:00
|
|
|
|
2021-06-30 23:16:45 +00:00
|
|
|
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";
|
2021-06-28 18:01:45 +00:00
|
|
|
|
2021-06-30 23:16:45 +00:00
|
|
|
export type State = welcome.State | jugando.State | win.State | lose.State;
|
2021-06-30 16:34:26 +00:00
|
|
|
|
|
|
|
export type Juego<T extends State> = {
|
2021-06-30 23:16:45 +00:00
|
|
|
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;
|
|
|
|
};
|
2021-06-30 16:34:26 +00:00
|
|
|
|
2021-06-28 18:01:45 +00:00
|
|
|
function update(juego: Juego<any>, dt: number) {
|
2021-06-30 23:16:45 +00:00
|
|
|
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;
|
|
|
|
}
|
2021-06-28 18:01:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function draw(juego: Juego<any>, timestamp: number) {
|
2021-06-30 23:16:45 +00:00
|
|
|
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;
|
|
|
|
}
|
2021-06-28 18:01:45 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function resizeCanvas(canvas: HTMLCanvasElement) {
|
2021-06-30 23:16:45 +00:00
|
|
|
canvas.width = canvas.clientWidth;
|
|
|
|
canvas.height = canvas.clientHeight;
|
2021-06-28 18:01:45 +00:00
|
|
|
}
|
|
|
|
|
2021-06-28 20:28:26 +00:00
|
|
|
async function initJuego() {
|
2021-06-30 23:16:45 +00:00
|
|
|
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);
|
2021-06-28 18:01:45 +00:00
|
|
|
}
|
2021-06-30 23:16:45 +00:00
|
|
|
initJuego();
|