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> <title>Salvá la costanera</title>
</head> </head>
<body> <body>
<button id="full-screen">Pantalla completa</button>
<canvas id="juego" width="1280" height="720"></canvas> <canvas id="juego" width="1280" height="720"></canvas>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

28
src/main.ts
View file

@ -6,6 +6,7 @@ import * as win from "./win";
import * as lose from "./lose"; import * as lose from "./lose";
import { Assets, loadAssets } from "./assets"; import { Assets, loadAssets } from "./assets";
import { loadSprite, Sprite } from "./sprite"; import { loadSprite, Sprite } from "./sprite";
import { drawText, isMobile } from "./utils";
export type State = welcome.State | jugando.State | win.State | lose.State; export type State = welcome.State | jugando.State | win.State | lose.State;
@ -30,7 +31,12 @@ export type Juego<T extends State> = {
state: T; state: T;
}; };
function needsRotation(juego: Juego<any>): boolean {
return juego.canvas.width < juego.canvas.height;
}
function update(juego: Juego<any>, dt: number) { function update(juego: Juego<any>, dt: number) {
if (needsRotation(juego)) return;
switch (juego.state.current) { switch (juego.state.current) {
case "welcome": case "welcome":
welcome.update(juego, dt); welcome.update(juego, dt);
@ -55,6 +61,17 @@ function draw(juego: Juego<any>, timestamp: number) {
juego.ctx.fillStyle = "white"; juego.ctx.fillStyle = "white";
juego.ctx.fillRect(0, 0, width, height); juego.ctx.fillRect(0, 0, width, height);
juego.ctx.fillStyle = "black"; 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) { switch (juego.state.current) {
case "welcome": case "welcome":
welcome.draw(juego, timestamp); welcome.draw(juego, timestamp);
@ -204,4 +221,15 @@ async function initJuego() {
window.requestAnimationFrame(loop); 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(); initJuego();

6
src/style.css
View file

@ -16,3 +16,9 @@ body {
width: 100%; width: 100%;
height: 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, size = 2,
align = "left", align = "left",
baseline = "top", baseline = "top",
maxWidth,
}: { }: {
align?: CanvasTextAlign; align?: CanvasTextAlign;
baseline?: CanvasTextBaseline; baseline?: CanvasTextBaseline;
bold?: boolean; bold?: boolean;
// in rem // in rem
size?: number; size?: number;
maxWidth?: number;
} }
): Box { ): Box {
juego.ctx.font = `${bold ? "bold " : ""}${size}rem sans-serif`; juego.ctx.font = `${bold ? "bold " : ""}${size}rem sans-serif`;
juego.ctx.textAlign = align; juego.ctx.textAlign = align;
juego.ctx.textBaseline = baseline; 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); const measure = juego.ctx.measureText(text);
return { return {