Nulo/salva-la-costanera
Nulo/salva-la-costanera
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Pantalla completa y pedir rotar el dispositivo

Browse source
This commit is contained in:
Nulo 2021-07-01 23:02:02 +00:00
parent c7b766dec6
commit bb43836a32
4 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -8,6 +8,7 @@
<title>Salvá la costanera</title>
</head>
<body>
<button id="full-screen">Pantalla completa</button>
<canvas id="juego" width="1280" height="720"></canvas>
<script type="module" src="/src/main.ts"></script>
</body>

28
src/main.ts
View file

@ -6,6 +6,7 @@ import * as win from "./win";
import * as lose from "./lose";
import { Assets, loadAssets } from "./assets";
import { loadSprite, Sprite } from "./sprite";
import { drawText, isMobile } from "./utils";
export type State = welcome.State | jugando.State | win.State | lose.State;
@ -30,7 +31,12 @@ export type Juego<T extends State> = {
state: T;
};
function needsRotation(juego: Juego<any>): boolean {
return juego.canvas.width < juego.canvas.height;
}
function update(juego: Juego<any>, dt: number) {
if (needsRotation(juego)) return;
switch (juego.state.current) {
case "welcome":
welcome.update(juego, dt);
@ -55,6 +61,17 @@ function draw(juego: Juego<any>, timestamp: number) {
juego.ctx.fillStyle = "white";
juego.ctx.fillRect(0, 0, width, height);
juego.ctx.fillStyle = "black";
if (needsRotation(juego)) {
drawText(
juego,
"¡Por favor rotá el dispositivo!",
{ x: juego.canvas.width / 2, y: juego.canvas.height / 2 },
{ align: "center", maxWidth: juego.canvas.width }
);
return;
}
switch (juego.state.current) {
case "welcome":
welcome.draw(juego, timestamp);
@ -204,4 +221,15 @@ async function initJuego() {
window.requestAnimationFrame(loop);
}
document.getElementById("full-screen")!.addEventListener("click", async () => {
if (isMobile()) {
document.documentElement.requestFullscreen &&
(await document.documentElement.requestFullscreen({
navigationUI: "hide",
}));
await screen.orientation.lock("landscape");
}
});
initJuego();

6
src/style.css
View file

@ -16,3 +16,9 @@ body {
width: 100%;
height: 100%;
}
#full-screen {
position: fixed;
bottom: 0;
right: 0;
}

4
src/utils.ts
View file

@ -36,18 +36,20 @@ export function drawText(
size = 2,
align = "left",
baseline = "top",
maxWidth,
}: {
align?: CanvasTextAlign;
baseline?: CanvasTextBaseline;
bold?: boolean;
// in rem
size?: number;
maxWidth?: 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);
juego.ctx.fillText(text, pos.x, pos.y, maxWidth);
const measure = juego.ctx.measureText(text);
return {