← back to Games Agentabrams
flappy-sky: cap playfield to a centered portrait column (fixes unplayable desktop scale)
589241e91ed75ee00e289787e97c07e599a742e7 · 2026-07-25 10:00:38 -0700 · Steve Abrams
The game filled the whole window (W=innerWidth, H=innerHeight), so on a wide
desktop a phone-tuned portrait game stretched into an ultra-wide field with one
tiny bird — unplayable. Wrap the play elements in a centered #stage capped to a
~2:3 column (letterboxed on desktop, full-width on phones). Physics constants,
which are tuned for a ~480px portrait frame, now stay correct at any window size.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
M games/flappy-sky/FlappySky.aaM games/flappy-sky/index.html
Diff
commit 589241e91ed75ee00e289787e97c07e599a742e7
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Jul 25 10:00:38 2026 -0700
flappy-sky: cap playfield to a centered portrait column (fixes unplayable desktop scale)
The game filled the whole window (W=innerWidth, H=innerHeight), so on a wide
desktop a phone-tuned portrait game stretched into an ultra-wide field with one
tiny bird — unplayable. Wrap the play elements in a centered #stage capped to a
~2:3 column (letterboxed on desktop, full-width on phones). Physics constants,
which are tuned for a ~480px portrait frame, now stay correct at any window size.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
games/flappy-sky/FlappySky.aa | 23 ++++++++++++++++++++++-
games/flappy-sky/index.html | 23 ++++++++++++++++++++++-
2 files changed, 44 insertions(+), 2 deletions(-)
diff --git a/games/flappy-sky/FlappySky.aa b/games/flappy-sky/FlappySky.aa
index 3350124..9e3f044 100644
--- a/games/flappy-sky/FlappySky.aa
+++ b/games/flappy-sky/FlappySky.aa
@@ -20,8 +20,22 @@
touch-action: none;
}
+ /* Portrait play-column: flappy is tuned for a phone-shaped field, so cap the
+ stage to a ~2:3 column centered in the window (letterboxed on desktop,
+ full-width on phones). JS sets #stage width; everything else is inset:0
+ to it so the HUD + overlay track the play area, not the whole window. */
+ #stage {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ height: 100%;
+ overflow: hidden;
+ }
canvas {
display: block;
+ width: 100%;
+ height: 100%;
background: radial-gradient(circle at 20% 20%, #586df2 0, #243046 40%, #0e1018 100%);
/* keeps focus outline from ever painting a box around the game */
outline: none;
@@ -171,6 +185,7 @@
</style>
</head>
<body>
+<div id="stage">
<canvas id="game" tabindex="-1" aria-label="Flappy Sky game canvas"></canvas>
<div id="scoreTop" class="hidden"><span id="scoreVal">0</span></div>
@@ -202,12 +217,14 @@
<div id="pauseVeil">Paused</div>
<div id="smallInfo">Space / Click / Tap · P pause · M mute</div>
+</div><!-- /#stage -->
<script>
(function () {
"use strict";
const canvas = document.getElementById("game");
+ const stage = document.getElementById("stage");
const ctx = canvas.getContext("2d", { alpha: false });
// ---- DOM refs -------------------------------------------------------
@@ -234,8 +251,12 @@
let W, H, scale, groundH;
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 2.5);
- W = window.innerWidth;
+ // Cap the playfield to a ~2:3 portrait column so the phone-tuned physics
+ // stay playable on wide desktop windows (letterboxed) while phones still
+ // fill their full width. #stage is centered via CSS; the canvas fills it.
H = window.innerHeight;
+ W = Math.min(window.innerWidth, Math.round(H * 0.66));
+ stage.style.width = W + "px";
canvas.width = Math.round(W * dpr);
canvas.height = Math.round(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
diff --git a/games/flappy-sky/index.html b/games/flappy-sky/index.html
index 3350124..9e3f044 100644
--- a/games/flappy-sky/index.html
+++ b/games/flappy-sky/index.html
@@ -20,8 +20,22 @@
touch-action: none;
}
+ /* Portrait play-column: flappy is tuned for a phone-shaped field, so cap the
+ stage to a ~2:3 column centered in the window (letterboxed on desktop,
+ full-width on phones). JS sets #stage width; everything else is inset:0
+ to it so the HUD + overlay track the play area, not the whole window. */
+ #stage {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ height: 100%;
+ overflow: hidden;
+ }
canvas {
display: block;
+ width: 100%;
+ height: 100%;
background: radial-gradient(circle at 20% 20%, #586df2 0, #243046 40%, #0e1018 100%);
/* keeps focus outline from ever painting a box around the game */
outline: none;
@@ -171,6 +185,7 @@
</style>
</head>
<body>
+<div id="stage">
<canvas id="game" tabindex="-1" aria-label="Flappy Sky game canvas"></canvas>
<div id="scoreTop" class="hidden"><span id="scoreVal">0</span></div>
@@ -202,12 +217,14 @@
<div id="pauseVeil">Paused</div>
<div id="smallInfo">Space / Click / Tap · P pause · M mute</div>
+</div><!-- /#stage -->
<script>
(function () {
"use strict";
const canvas = document.getElementById("game");
+ const stage = document.getElementById("stage");
const ctx = canvas.getContext("2d", { alpha: false });
// ---- DOM refs -------------------------------------------------------
@@ -234,8 +251,12 @@
let W, H, scale, groundH;
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 2.5);
- W = window.innerWidth;
+ // Cap the playfield to a ~2:3 portrait column so the phone-tuned physics
+ // stay playable on wide desktop windows (letterboxed) while phones still
+ // fill their full width. #stage is centered via CSS; the canvas fills it.
H = window.innerHeight;
+ W = Math.min(window.innerWidth, Math.round(H * 0.66));
+ stage.style.width = W + "px";
canvas.width = Math.round(W * dpr);
canvas.height = Math.round(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
← 903d618 Cross-link main arcade -> Beverly Hills 90210 collection hub
·
back to Games Agentabrams
·
auto-save: 2026-07-25T10:05:29 (2 files) — games/rodeo-runne 79106c9 →