메뉴
Build polished single-file side-scroller SPA games with vanilla JS, SVG/DOM rendering, robust input, camera systems, theming, modal UX, and PWA/mobile compatibility. Use when creating or refining production-quality side-scroller web games.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | sidescroller-spa-game-dev |
| description | Build polished single-file side-scroller SPA games with vanilla JS, SVG/DOM rendering, robust input, camera systems, theming, modal UX, and PWA/mobile compatibility. Use when creating or refining production-quality side-scroller web games. |
Build a production-quality side-scroller game as a single HTML SPA using vanilla JavaScript, SVG, and CSS.
This skill captures:
rivercrossing.htmlUse this skill when tasks involve:
Avoid using this skill for:
High-quality Copilot skills should be:
For IdleGames pages, keep games self-contained in one HTML file:
<head>: metadata, manifest link, icon links, theme color, page title<style>: page-level design tokens and responsive rules<body>: header + stats + viewport + touch controls + modals<script type="module">: constants, state, loop, rendering, input, UI logicparental.js always; assets/js/pwa.js when offline/install support is needed<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
<link rel="manifest" href="manifest.webmanifest">
<script src="assets/js/pwa.js" defer></script>
<style>/* tokens + layout + controls + modals */</style>
</head>
<body>
<header><!-- title + buttons --></header>
<div class="stats"><!-- moves/time/etc --></div>
<div class="game-viewport"><svg id="gameCanvas"></svg></div>
<div class="bottom-controls"><!-- touch controls --></div>
<div class="modal" id="helpModal"></div>
<div class="modal" id="winModal"></div>
<div class="modal" id="failModal"></div>
<script type="module">/* game runtime */</script>
<script src="parental.js" defer></script>
</body>
</html>
Define a clear world-space coordinate system and derive all geometry from constants:
CHARACTER_HEIGHT)W, H)Use derived values aggressively to reduce drift:
const CHARACTER_HEIGHT = 56;
const H = CHARACTER_HEIGHT * 4;
const BASE_RIVER_WIDTH = 120;
const RIVER_WIDTH = BASE_RIVER_WIDTH * 4;
const RIVER_LEFT = 100;
const RIVER_RIGHT = RIVER_LEFT + RIVER_WIDTH;
const W = RIVER_RIGHT + 100;
Use one state object + one freshState() initializer.
State should include:
left/right/null or equivalent)gameOver, won)Pattern:
function freshState() {
return {
player: { x: 0, y: 0, onVehicle: false, carrying: null },
vehicle: { x: 0, side: 'left', facing: 1, motionDir: 0 },
moves: 0,
elapsed: 0,
gameOver: false,
won: false,
};
}
Keep continuous movement as key-state booleans and edge-trigger interactions as one-frame latches.
const keys = { w:false, a:false, s:false, d:false, e:false };
let eJustPressed = false;
Mirror gameplay actions across:
WASDE and Enter for interactFor one-finger play on mobile and pointer play on desktop:
Result View mode exception:
Reference implementation:
svg.addEventListener('pointermove', (ev) => {
if (stagePointerId !== ev.pointerId) return;
ev.preventDefault();
if (state.gameOver && resultViewMode) {
const world = clientToWorld(ev.clientX, ev.clientY);
const viewportCenterX = camera.x + camera.viewW * 0.5;
stagePointerMode = world.x < viewportCenterX ? 'left' : 'right';
}
applyStagePointerMode();
});
Use:
touch-action: none on gameplay surfacescontextmenu suppression on stage/viewport/control barUse camera state with dynamic viewBox:
const camera = { x: 0, y: 0, viewW: W, viewH: H };
function updateCameraFollow(targetX) {
const maxCamX = Math.max(0, W - camera.viewW);
camera.x = Math.max(0, Math.min(maxCamX, targetX - camera.viewW * 0.5));
camera.y = 0;
}
preserveAspectRatio (Critical)When camera/viewport alignment can switch (xMin / xMid / xMax) or aspect changes frequently, prefer CTM-based conversion instead of hand-computing offsets.
function clientToWorld(clientX, clientY, svg, camera) {
const ctm = svg.getScreenCTM();
if (!ctm) {
return {
x: camera.x + camera.viewW * 0.5,
y: camera.y + camera.viewH * 0.5,
};
}
const pt = new DOMPoint(clientX, clientY).matrixTransform(ctm.inverse());
return { x: pt.x, y: pt.y };
}
Why this matters:
preserveAspectRatio modeIf CTM is unavailable in a target browser context, use manual letterbox math only as a fallback.
Do not switch camera mode based on arbitrary pixel tolerance. Compute it from the same clamp math used by follow:
const maxCamX = Math.max(0, W - camera.viewW);
const desiredX = targetX - camera.viewW * 0.5;
if (desiredX <= 0) {
camera.x = 0;
cameraMode = 'left';
} else if (desiredX >= maxCamX) {
camera.x = maxCamX;
cameraMode = 'right';
} else {
camera.x = desiredX;
cameraMode = 'center';
}
Then map mode to SVG alignment deterministically:
left → xMinYMid meetcenter → xMidYMid meetright → xMaxYMid meetThis keeps transitions correct at both world start and world end for any viewport size.
Use fixed timestep simulation with render decoupling:
const FIXED_FPS = 20;
const FIXED_DT = 1 / FIXED_FPS;
let accumulator = 0;
function gameLoop(ts) {
const dt = computeFrameDt(ts);
accumulator += dt;
while (accumulator >= FIXED_DT) {
stepSimulation(FIXED_DT);
accumulator -= FIXED_DT;
}
render();
requestAnimationFrame(gameLoop);
}
Benefits:
Implement interactions as explicit state machine guards:
Pattern:
if (onVehicle) {
if (nearHelm && carrying) deny();
if (nearCargo && carrying && cargoOccupied) deny();
if (nearCargo && carrying && !cargoOccupied) placeCargo();
if (nearCargo && !carrying && cargoOccupied) pickCargo();
}
Run fail/win checks after state-changing interactions (especially drop events) according to puzzle rules.
Board/disembark transitions should preserve horizontal continuity wherever possible:
x teleport on boat enter/exitUse two-phase rendering:
drawScenery) for sky/water/terrain/foliagedynamicGroup) for entities and frame-animated artifactsLayer order matters:
Theme-dependent scene palettes should be centralized in getScenePalette().
For game-over states, provide:
Play Again, Try Again, share)View action to close modal but keep result state activeThis allows players to inspect the final scene without losing context.
Use tri-state mode with persistence:
system follows prefers-color-schemelight and dark force explicit modelocalStoragePattern:
const mode = localStorage.getItem('theme-mode') ?? 'system';
const resolved = mode === 'system' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : mode;
document.documentElement.setAttribute('data-theme', resolved);
Include modern install metadata:
manifest.webmanifestmobile-web-app-capableapple-touch-iconFor IdleGames, remember:
assets/js/pwa.js handles SW registration/version flowdt) to avoid recovery spikesAfter meaningful edits:
npm run buildnpm run serve and verify trailing-slash launch + offline behaviorFor input/camera changes, validate manually:
camera.x + camera.viewW * 0.5 and update this continuously during dragstartNewGame()When asked to build or upgrade a side-scroller SPA game, execute in this order:
freshState() with all gameplay invariantsA task using this skill is complete when:
Build a data-driven, attribute-controlled game menu system with concurrent gameplay and simulation, custom actions, and in-place value updates.
Diagnose and fix browser 3D rendering bugs that appear only on some phones or GPUs, especially in Three.js WebGL scenes using dynamic textures, shadows, lighting, and custom materials. Use when a model looks dark, black, missing, inverted, or otherwise wrong on one mobile device but fine on desktop or other phones.
Build browser-based Three.js 3D games with sane axis conventions, disciplined scene graphs, stable camera and lighting setup, procedural geometry patterns, and practical debugging habits. Use when creating or refactoring a Three.js game so transforms, materials, and coordinate systems stay understandable.
Build real-time strategy games as single-page HTML, CSS, and JavaScript apps. Use when creating or refining RTS mechanics, data-driven units and buildings, command routing, combat orders, capture and service systems, air units, fog of war, AI factions, HUDs, and browser-based RTS game loops.
Build rendering, minimap, fog, and save systems for RTS games. Use when implementing backbuffer rendering, procedural sprites, minimap layers, fog-of-war visuals, JSON snapshots, restore pipelines, and browser RTS state persistence.
Design layered AI for real-time strategy games. Use when building RTS economy phases, scouting, enemy memory, tactical assignments, air doctrine, objective scoring, and non-cheating browser RTS opponents.