wuwiandClaude Fable 5
c506a631c2
game.js (830 lines) -> 9 modules, native ES modules so still zero build step: dom canvas handles (imports nothing; keeps cycles harmless) config TUNE (live-tunable) + structural constants state all mutable game state (G) + setupPoint/sendBoy audio sfx synthesis, recorded umpire voice, reverb, speech fallback input keyboard + touch, exports axes and takeFlickAim() gameplay ballistics, swings, serve, rules, AI, update loop render camera, viewport, sprites, crowd, all drawing panel T tuning UI main boot, loop, intro, window.T test hooks Deduped into named constants: bounce tempo (was in 3 places), contact height band, intercept zone depth, home positions, player bounds, toss params, shot depths, pose hold time, sprite scale, actor heights. Also extracted drawShadow/drawBall/expirePose from repeated code. One intentional import cycle (input <-> gameplay), safe: both sides only call functions at runtime, never during module evaluation. Regression-verified in browser sims: point cycle, CPU returns 11/12, assist contract 8/8, corner-winner gradient intact (0/12 perfect corners returned, 10/12 center balls returned). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
41 lines
1.9 KiB
HTML
41 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Splatter Tennis</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #10141c; display: grid; place-items: center; }
|
|
canvas { image-rendering: pixelated; width: min(96vw, calc(96vh * 16 / 9)); aspect-ratio: 16/9; touch-action: none; }
|
|
#hint { position: fixed; bottom: 8px; width: 100%; text-align: center;
|
|
font: 12px monospace; color: #6b7688; }
|
|
@media (pointer: coarse) { #hint, #intro .kb { display: none; } }
|
|
#intro { position: fixed; inset: 0; background: rgba(10, 13, 20, 0.88); display: grid;
|
|
place-items: center; z-index: 10; touch-action: none; }
|
|
#intro .card { font: 16px monospace; color: #dfe6f2; text-align: left; line-height: 2;
|
|
border: 2px solid #5a6a85; background: #141a26; padding: 24px 32px; }
|
|
#intro h1 { font-size: 18px; margin: 0 0 12px; color: #f8e048; text-align: center; }
|
|
#intro p { margin: 0; }
|
|
#intro p span { display: inline-block; width: 32px; }
|
|
#intro em { color: #8a96ab; font-style: normal; font-size: 13px; }
|
|
#intro .start { margin-top: 16px; text-align: center; color: #f8e048; animation: blink 1.1s step-end infinite; }
|
|
@keyframes blink { 50% { opacity: 0.25; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c" width="480" height="270"></canvas>
|
|
<div id="hint">move: WASD/arrows · serve/swing: SPACE · aim: hold a direction while swinging · T: tuning panel</div>
|
|
<div id="intro">
|
|
<div class="card">
|
|
<h1>🎾 SPLATTER TENNIS</h1>
|
|
<p><span>👆</span> tap — serve & swing</p>
|
|
<p><span>👉</span> flick — aimed shot</p>
|
|
<p><span>✋</span> drag — run <em>(auto-run is on)</em></p>
|
|
<p class="kb"><span>⌨️</span> WASD / arrows + SPACE</p>
|
|
<p class="start">TAP TO START</p>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="main.js?v=9"></script>
|
|
</body>
|
|
</html>
|