PONG · Amber Phosphor Edition

The user wants a Pong game in a single HTML file. Let me make this memorable, not just a basic white-on-black canvas with two paddles. I want to give it a distinct visual identity and real game feel. My concept: I'll go for a "phosphor CRT" arcade aesthetic — but done with craft, not cheap glow. Actually, let me think harder about what would be memorable. Ideas: 1. Classic monochrome Pong with authentic CRT feel — scanlines, slight barrel distortion, phosphor trail. Risk: feels generic if done lazily. 2. A modern minimal reinterpretation — high-contrast paper/ink look, editorial typography, Pong as a design object. 3. Brutalist / Swiss design Pong — big typography, strong grid, black/white/one accent. 4. Neo-retro synthwave — no, that's the cheap purple-gradient territory I want to avoid. I think the strongest direction is an authored take: a warm phosphor amber/orange monochrome CRT terminal look — not blue/purple, distinctive color (amber phosphor terminals were a real thing, P3 phosphor). With: - Real CRT character: scanlines, subtle vignette, slight chromatic edge... but restrained. Scanline overlay via repeating-linear-gradient is fine (that's not a decorative gradient to fake design — it's a functional texture for the CRT effect; still, I should be careful. A subtle scanline texture serves the concept directly, so it's justified). - Game feel: ball trails, screen shake on score, paddle hit "flash", slow-mo on match point? Sound via WebAudio (square wave beeps like original Pong) — no external assets needed. - AI opponent with imperfect tracking, difficulty ramps. - States: title screen → play → score → game over. First to 7 (classic Pong was 11, but 7 is fine; let's do 11? Maybe 7 for pace... classic Pong: first to 11. I'll do first to 7 with a visible match point state). - Controls: mouse/touch move paddle, W/S or arrow keys. Pause with Space/P. - Serve mechanic: ball sticks to paddle after score, launch on click/space — real Pong behavior. - Spin: ball angle depends on where it hits the paddle and paddle velocity imparts english. Signature moment: I'll make the score display huge in the background like the original, but with a "phosphor decay" effect — when a point is scored, the whole screen does a brief vertical collapse/recovery like an old TV (a CRT power-flash), plus screen shake. Also ball leaves a phosphor trail that decays. Another signature: the title screen — "PONG" rendered big with the ball bouncing between the letters as an attract-mode demo (AI vs AI playing behind the title). That's a classic arcade attract mode and it makes the first impression land instantly. I'll do AI vs AI demo behind the menu. That's a memorable opening. Typography: I'll use a distinctive font. "VT323" or "Press Start 2P"? Press Start 2P is a bit overused for retro games but it's authentic. Alternatively "VT323" (terminal font) fits the amber phosphor theme well and is less clichéd than Press Start 2P. Or "DotGothic16". I'll go with VT323 for body/HUD and maybe "Silkscreen" or draw score with custom segments. Actually let me draw the big score digits myself on canvas as blocky segments — no, simpler: use VT323 at large sizes on canvas via fillText. Canvas can use webfonts once loaded (document.fonts.ready). I'll load VT323 from Google Fonts CDN and wait for it. Color palette: - Background: near-black with warm tint #0a0806 or #100c08. - Phosphor amber: #ffb000 primary, dimmer #7a5410, glow via shadowBlur sparingly (shadowBlur is expensive; I'll use it for ball only, or use pre-rendered glow). Actually shadowBlur each frame on few shapes is fine. - Avoid large low-contrast gray areas: keep contrast strong — bright amber elements on near-black. CRT effects: - Scanlines: CSS overlay with repeating-linear-gradient, subtle. - Vignette: radial-gradient overlay — this is functional for CRT feel. - Slight flicker: animate opacity very subtly (maybe skip to avoid annoyance; a tiny 0.02 alpha flicker is nice). - Screen curvature: could do with border-radius on the frame + inner shadow. Full barrel distortion needs WebGL — skip; a rounded "glass" frame with inset shadow is enough. - Phosphor persistence: I'll render trail by not fully clearing canvas — draw a translucent black rect each frame (fade). That gives natural trails for everything. With amber elements on dark bg this looks great. But it also smears text... I can use two canvases: game canvas with persistence, HUD drawn fresh. Or draw fade rect with 'destination-out'? Simpler: single canvas, fade with fillRect rgba(bg, 0.35) — text will slightly smear during shake which actually looks like phosphor. Score text is redrawn each frame so it's fine. Hmm, but with the fade approach the background must be opaque-ish. fillStyle = 'rgba(16,12,8,0.3)' fillRect — leaves slight ghosting. Good. Layout: The page is the game. Full viewport. A bezel frame around the screen area? I'll do: full-screen dark room background (very dark warm), centered CRT screen with rounded corners, subtle bezel border. Below/around: minimal controls legend in small terminal type. Title in-corner. Keep it composed. HUD: Score displayed large in upper area on canvas (classic Pong style — big digits behind gameplay). Center dashed net line. Bottom edge: small status line like "CPU 3 — MATCH POINT" or speed indicator. Sound: WebAudio square-wave beeps — paddle hit 440-ish short blip, wall hit lower, score longer beep. Original Pong used ~226Hz, 490Hz, 890Hz... I'll craft: wall 226Hz 60ms, paddle 459Hz 60ms, score 490Hz 250ms. Mute toggle (M key + a small button). AudioContext created on first user gesture. Game logic details: - Canvas logical size e.g. 900x600, scaled to fit with devicePixelRatio handling. I'll size canvas to fit container while keeping aspect. - Paddles: left = player, right = CPU. Height ~90, width 12. Player follows mouse Y (and touch), also arrow keys/W-S move at speed. - Ball: speed starts ~360 px/s, increases 4% per paddle hit, max ~900. Angle from hit offset: relative intercept * maxBounceAngle (75°). Paddle velocity adds english. - CPU AI: target ball y with reaction delay and max speed, error margin that shrinks as rally grows; add predicted trajectory when ball moving toward CPU (simple reflection prediction) with noise. Difficulty selector on title: NOVICE / STANDARD / EXPERT changing CPU speed & error. - Score to 7. Match point indicator. Win screen with winner name, "PLAY AGAIN". - Serve: after score, 1s pause with countdown-ish flash, ball serves toward the player who was scored on (or loser serves—original: scorer's side serves? In original, the player who lost the point serves... I'll serve toward the scorer? Let's serve toward the player who just conceded? Actually simpler: serve direction alternates toward the point loser. I'll serve toward whoever just got scored on... hmm classic: the player who was scored against receives the serve. Serve = ball launches from center toward that player. Fine.) Attract mode: on title screen, both paddles AI-controlled, ball playing, rendered dimmed behind the title. Title "PONG" big in VT323, blinking "CLICK OR PRESS SPACE TO START". Difficulty selection: three options toggled with keys 1/2/3 or click. I'll implement clickable options on canvas? Easier: HTML overlay for menu with buttons styled in theme. Overlay HTML positioned over canvas — cleaner for a11y and clicks. Menu overlay: title, subtitle, difficulty selector (three segmented buttons), start button, controls legend. During menu the canvas runs attract mode dimmed. Pause: Space or P toggles pause during play; overlay "PAUSED". Also auto-pause on blur. Screen effects on events: - Score: CRT "vertical roll" flash — I can do a quick effect: for ~200ms, draw the frame with a bright flash + slight vertical squeeze via ctx transform scaleY. Plus screen shake (translate canvas element via CSS transform or ctx offset). I'll do shake via ctx translate with decaying random offset, and a white(amber)-flash overlay rect with decaying alpha. - Paddle hit: small shake (2px), paddle flash bright for 100ms. - Max speed reached: ball color shifts brighter / trail longer? Nice touch: ball hue stays amber but intensity grows; add "V-MAX" tag when capped. Extra craft: ball trail via persistence fade already; also spawn tiny "spark" particles on paddle hit — small rectangles? I don't want plain small squares as particles... particles as short line streaks (like phosphor sparks) moving outward and fading — streaks look good and are not "plain squares". I'll render sparks as lines along velocity. Net: dashed center line, drawn dim. Let me also add rally counter: shows current rally hits; at 5+ show "RALLY x" small text — adds narrative. Win condition: first to 7. Game over overlay: "YOU WIN" / "CPU WINS", final score, stats (longest rally, top ball speed), play again button. Stats give it memorability. Implementation structure: HTML: -

centered .bezel > .screen > canvas#game + .scanlines overlay + .vignette overlay + .glass (subtle reflection?) - Overlays: #menu (title screen), #pause, #gameover, #hud bits (mute button top-right, maybe as HTML small button). - Keep HUD minimal: sound toggle button in bezel corner (HTML), everything else canvas. CSS: - Fonts: VT323 via Google Fonts link. - Colors as CSS vars: --bg:#0b0906? --amber:#ffb000; --amber-dim: rgba(255,176,0,.35). - Body: display grid place-items center, background #070604 with very subtle radial light behind the TV? A faint radial glow behind the bezel could read as "glow ornament"... I'd rather keep the room nearly black with a barely-there radial to ground the set. Keep it extremely subtle (functional: suggests CRT light spill). Actually light spill from a CRT onto the room is physically real and serves the concept — I'll add a very subtle radial light behind the screen that intensifies with game state? That's a nice alive detail: the room glow subtly pulses brighter during rallies and flashes on scores. Implement via CSS var --spill updated from JS. That's a signature-y ambient detail. Keep subtle. - Scanlines: position absolute overlay, pointer-events none, background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); plus a slow moving "roll bar"? A faint horizontal band drifting down (CRT sync roll) every ~8s at low opacity — nice authentic motion. I'll add it with a keyframed ::after gradient translating. Subtle. - Flicker: animation on canvas opacity 0.98–1 tiny. JS structure: - const W=960,H=600 logical; resize handler: canvas CSS size fits container preserving aspect; canvas.width = cssW*dpr; ctx.setTransform(scale...) so we draw in logical coords. Simpler: fixed internal resolution 960x600 * dpr and scale via CSS to fit — but then persistence-fade and shake fine. Scaling crispness: text at fixed logical res scaled down looks fine. I'll do: canvas internal = 960x600 (times dpr? If CSS-scaled down, dpr multiplication gives sharper text when screen larger than 960... On big screens 960 CSS may be upscaled. I'll compute scale = min(availW/960, availH/600), set canvas.width=960*ss, height=600*ss where ss = scale*dpr (capped), and ctx.setTransform(ss,0,0,ss,0,0). CSS size = 960*scale x 600*scale. That keeps text sharp. Persistence fade fillRect in logical coords covers whole canvas — fine. - Game state machine: 'menu' | 'serve' | 'play' | 'point' (brief after-score) | 'over' | paused flag. - Entities: paddles {y, vy, target}, ball {x,y,vx,vy,speed}. - Loop with rAF, dt clamp (<= 1/30), fixed-ish step not necessary. - Update player paddle: mouse Y within canvas → paddle target; lerp for smoothness (or direct with velocity computed for english). Keys override when pressed. Touch: same as mouse via pointer events. - CPU: if ball moving toward CPU: predict y at x=cpuX by simulating wall bounces; add error = base*(1 - skill) + noise refreshed each rally; paddle moves toward target at maxSpeed. If ball moving away: drift toward center slowly. - Ball collision with paddles: AABB check with swept consideration (check when crossing paddle x-plane between frames to avoid tunneling at high speed: if prevX > paddle plane and newX <= plane etc. I'll do plane-crossing interpolation). - Walls top/bottom bounce with beep. - Score when x < -40 or > W+40 (let it fully exit). - After score: state 'point' for 900ms with flash & shake & score bump animation (scale score digits). Then 'serve' state: ball at center, slight delay, auto-launch after 700ms toward receiver with random angle. Simpler: auto-serve with a brief "3-beep"? Just a short delay and launch. Original Pong auto-served. I'll auto-serve after 800ms, with the net line pulsing during the wait. Fine. - Sounds: function beep(freq, dur, type='square', gain). Master gain node for mute. Slight different gains. - Score sounds: little two-note motif for player point (up), down motif for CPU point. - Win: little arpeggio. - Effects arrays: sparks [], shake {t, mag}, flash alpha. - Persistence: ctx.fillStyle 'rgba(10,8,5,0.32)' fillRect each frame before drawing. But during 'menu' attract, same. Drawing (per frame): 1. fade fill. 2. apply shake translate. 3. draw dim border playfield lines? Original had top/bottom walls as lines — I'll draw thin amber lines top & bottom. 4. net: dashed vertical line center, alpha low, dashes via setLineDash. 5. scores: big VT323 digits at quarter positions, alpha ~0.5 (behind gameplay), with match-point pulse (alpha oscillates) on leading player's side? Show "MATCH POINT" text small under server side. 6. paddles: rounded rects with slight glow (shadowBlur 12 amber) — glow on game objects in a CRT game is authentic phosphor bloom, functional to the concept, keep it tight. 7. ball: square 12x12 (original pong ball was square — authentic!) with glow and short velocity streak (draw a fading line behind). Since persistence handles trails, ball itself just square + bloom. 8. sparks: streak lines. 9. flash overlay: fillRect amber alpha flash*0.18. 10. bottom HUD line (drawn fresh each frame — but persistence smears... it's redrawn same position each frame so fine): left: "SPD 612" ball speed; center: rally count when >3; right: "FIRST TO 7". Small 16px VT323, alpha 0.6. Also player labels: "YOU" bottom-left? Actually labels under paddles: small "YOU"/"CPU" above? Keep bottom status line only + tiny labels above paddles at start that fade. Serve state: show "READY" small center? Or pulsing ball. Draw countdown dots? I'll show ball blinking at center and small text "SERVE" fading. Eh—keep: ball blinks (visible on/off 120ms), net pulses. Menu overlay (HTML): - Big "PONG" in VT323, letterspaced, amber, with the canvas attract behind (dimmed). Maybe title with the two vertical bars flanking as design nod: "▮PONG▮"? That's using block chars as decoration... it's thematically paddle-shaped; I'd rather draw a tiny inline SVG of paddle+ball next to title? Simpler: pure type + a thin rule. Title: PONG with a small tagline "TABLE TENNIS · 1972 REISSUE" style? A tasteful line: "AMBER PHOSPHOR EDITION". - Difficulty segmented control: three buttons NOVICE/STANDARD/EXPERT, selected state amber fill black text. - START button: "INSERT COIN — START". Space also starts. - Controls hint: "MOUSE / W·S / ↑·↓ — MOVE SPACE — PAUSE M — SOUND". - Footer small: "FIRST TO 7 POINTS". Pause overlay: "PAUSED" + resume hint. Clicking canvas or pressing space resumes. Game over overlay: result big, score line "7 — 4", stats grid (LONGEST RALLY, TOP SPEED, DURATION), buttons: REMATCH, MENU. Mute button: small fixed button top-right of bezel "SND ON/OFF" in terminal style; toggles master gain; also key M. Blur → auto pause if in play. Pointer handling: track mouse over the screen element; convert to logical Y via bounding rect. Use pointermove on the screen container; also touch-action none. Also clicking during 'serve' could launch immediately — nice: pointerdown during serve launches instantly. And clicking during pause resumes? Keep keyboard. Edge cases: dt clamp; when tab hidden rAF stops — fine with auto-pause. Audio unlock: create AudioContext lazily on first pointerdown/keydown; resume() as needed. Let me also handle reduced motion? Probably skip; shake is mild. DPR/resize: function fit(){ const avail = screenWrap size; scale = min(w/960, h/600); canvas.style.width=960*scale; ...; ss = scale*dpr; canvas.width=960*ss; canvas.height=600*ss; ctx.setTransform(ss,0,0,ss,0,0);} Persistence: since we resize (clears canvas), fine. But note: with persistence trail effect, resizing clears — acceptable. One concern: persistence fade with fillRect rgba — because ctx transform scaled, fillRect(0,0,W,H) covers all. Good. But the canvas element also gets CSS scanline overlays; independent. Amber glow via shadowBlur: set ctx.shadowColor='#ffb000', shadowBlur=14*s? shadowBlur is in device px after transform? shadowBlur is affected by transform? Actually shadowBlur is NOT affected by ctx transform in most browsers (it's in user space? Historically shadows ignore transforms... spec: shadows are in the coordinate space... Chrome applies transform to shadow offsets but blur is not scaled historically; there were inconsistencies. To be safe, I'll skip heavy shadowBlur and instead draw bloom manually: draw a larger, low-alpha rounded rect behind the ball/paddles (2 layers: alpha .15 at 3x width, alpha .3 at 1.6x). Deterministic across browsers and cheap. Or use 'lighter' composite for bloom layers. I'll do layered rects with globalCompositeOperation 'lighter' for the ball bloom. Alternatively simple: draw ball with slight radial gradient bloom — gradients as texture for light emission are functional here (phosphor bloom), not decorative UI gradients. A radial gradient sprite pre-rendered to an offscreen canvas, drawn under the ball with 'lighter'. That's efficient and looks great. I'll pre-render a bloom sprite (radial gradient white→transparent), tint via globalAlpha and drawing amber rect with 'source-atop'? Simpler: create offscreen 128x128, radial gradient from rgba(255,190,80,0.9) center to transparent; draw scaled under ball and paddles and score? Just ball + paddle hits. Good. Score digits: to make them feel like phosphor, draw twice: big alpha 0.14 (halo via drawing same text scaled? just alpha) plus core alpha .8 at smaller? Keep simple: fillText with alpha .55, and a duplicate offset-blurred? Skip halo for text; low alpha large text reads as phosphor anyway. Add slight letterSpacing? Canvas letterSpacing property exists in modern Chrome ('ctx.letterSpacing')—optional, skip. Match point: when a player reaches 6, their score digit pulses alpha 0.35–0.9 sine; show "MATCH POINT" under it. CPU difficulty params: - NOVICE: speed 300, reactErr 70, predictNoise high, idleSpeed 120 - STANDARD: speed 430, err 42 - EXPERT: speed 560, err 22 Error refresh each time ball bounces off player paddle or serve. Also CPU speed slightly ramps with ball speed to keep rallies possible. Prediction: when ball vx>0, simulate: t=(cpuX - x)/vx; y' = y + vy*t; fold into [r, H-r] reflections. Add err offset (signed, refreshed). Target = predictedY. Move with max speed & easing (accel). When ball moving away, target center + slight ball bias. Player paddle velocity tracking for english: vy = (y - prevY)/dt smoothed. Bounce math: rel = (ball.y - paddle.cy)/(paddle.h/2 + ball.h/2) clamp [-1,1]; angle = rel * 60° (max); speed *= 1.045 (cap 980); vx dir flips; also add paddle.vy*0.18 to vy then renormalize to new speed? Simpler classic: set vx,vy from angle & speed; then vy += paddle.vy*0.15; then renormalize magnitude to speed. Fine. Anti-vertical-lock: ensure |vx| >= speed*0.35. Ball as square size 12, paddle w 14 h 92. playerX = 34; cpuX = W-34-14. Speed display: Math.round(speed) px/s. Wall bounce: y-r < topInset or y+r > H-topInset. topInset = 14 (line thickness margin). Beep 210Hz. Score beep: player scores (ball exits right): two-tone up (523 then 784 short); CPU scores: down (392→262). Sparks on paddle hit: 8 streaks from contact point, random angles biased away from paddle, speed 120–320, life .3s, drawn as lines from pos to pos - vel*0.03, alpha by life. Amber-white. Also tiny sparks on wall hit (4). Shake: mag decays exp; offset = (rand-0.5)*mag. paddle hit mag=3, score mag=9, wall 1.5. Flash: on score flash=1 decays fast; fillRect overlay 'rgba(255,196,80,flash*0.16)'. Also on score, do the "vertical collapse": scaleY of everything toward center line briefly? Implement: during 260ms after score, ctx.translate(0,H/2); ctx.scale(1, k); translate back where k goes 1→0.72→1 (ease). This mimics CRT field collapse. Combined with flash = the signature moment. I'll implement collapse as a function of phase p in [0,1]: k = 1 - 0.3*sin(p*π) (returns to 1). And draw happens inside transform. Note persistence fade should be drawn outside collapse transform. OK. Room glow var: document.documentElement.style.setProperty('--spill', v) where v relates to recent activity (ball speed & flash). Compute activity = clamp(speed/900) ; glow opacity 0.05 + activity*0.06 + flash*0.25. Update every frame — style setProperty each frame is okay perf-wise but I'll throttle to when value changes by >0.01. CSS for spill: .room::before radial-gradient(circle at center, rgba(255,176,0,var(--spill)), transparent 60%)? Radial gradient used as light emission — functional. Position behind bezel, blur. Fine. Bezel: dark plastic frame — background #14100c, border-radius 26px, padding 22px, box-shadow deep drop + inset highlights, thin bottom "label": small text "MODEL P-72 · AMBER PHOSPHOR" under screen inside bezel? Cute authored detail: a small engraved label bottom-right of bezel: "P-72 · 60Hz". And a tiny power LED that blinks with... LED steady amber when playing, dim in menu, blink in pause. Nice alive detail, tiny dot with glow. I'll add LED as small div, classes control. Layout responsiveness: bezel takes min(94vw, calc(94vh * ratio))-ish. I'll compute canvas CSS size in JS to fit inside bezel inner area; bezel auto-sizes to canvas + padding. Screen wrapper: position relative for overlays; overlays absolutely cover canvas area. Menu overlay style: not a card — I'll make it a full-screen-over-canvas layer with the composition: centered stack. Backdrop: transparent (attract visible) + slight dark scrim rgba(5,4,2,.55) + backdrop blur 2px? Blur over canvas each frame is fine (CSS backdrop-filter). Use light scrim, no blur maybe blur(3px) subtle. Buttons: terminal style — 1px solid rgba(amber,.5), text amber, bg transparent, hover: bg amber, color #1a1206, with quick transition; selected difficulty: filled. Uppercase, VT323, letter-spacing. Focus-visible outline. The whole page font: VT323 everywhere; sizes generous. Also add a subtle "power on" animation when page loads: screen expands from horizontal line (CRT turn-on) — scaleY from 0.005 to 1 with bright flash. Great first impression! Implement CSS animation on .screen inner content or canvas transform: keyframes powerOn { 0%: transform scaleY(.004) scaleX(.6), filter brightness(4); 60%: scaleY(.02)...; 100% normal } duration .9s ease-out. Combined with a quick hum sound? Audio can't autoplay. Visual only. That's the instant first impression. Also "power off" on menu→? Not needed. Let me now also consider: attract mode dimming — I'll draw attract with global alpha 0.5 and skip HUD; overlay scrim adds more dim. Keyboard: - Space: menu→start; play→pause toggle; over→rematch? Enter for start. I'll do: Space/Enter starts from menu & rematch from over; Space/P pause during play; also Esc → back to menu from pause/over. - W/S, ArrowUp/Down: player paddle (hold). velocity 520 px/s. Mouse overrides when moved (last input wins: track lastInput = 'mouse'|'keys'; keys move target directly). - M mute. 1/2/3 difficulty in menu. Pointer: pointermove sets mouse target & lastInput='mouse'. pointerdown: if menu (on canvas area, not buttons) start? Buttons handle start; clicking canvas in menu does nothing (buttons are there). During play, pointerdown nothing (or none). During serve: launch immediately. During pause: resume. Careful: pointerdown on canvas overlay layers — overlays have pointer-events none except menus. HUD drawn on canvas bottom: I said status line. Also top corners: player labels "YOU" / "CPU·{diff}" small above? Place small labels at top under wall line at each side, alpha .4: "YOU" left, "CPU" right. Good clarity. Rally display: center bottom: "RALLY 7" appears when rally>=4, alpha grows with rally. Best rally tracked for stats. Match duration timer for stats: accumulate play dt. Now write the code carefully. Constants: W=960,H=600, WALL=16 (inset), PW=14, PH=92, BS=12 (ball size), PX=36 (player x left), CPUX = W-36-PW, WIN=7. Speeds: SERVE=380 base speed after each point resets to 380? Original resets each point. Ball speed resets to base 380 each serve; +4.5% per paddle hit, cap 960. Player paddle: mouseY mapped; clamp y in [WALL+PH/2? define paddle.y as center]. paddle.y clamp [WALL+PH/2, H-WALL-PH/2]. Keys move: targetY += dir*560*dt. Mouse smoothing: to keep english meaningful, set paddle.y directly to target but compute vy from movement: vy = (y - prevY)/dt, smoothed vyS = lerp(vyS, vy, 0.5). Use vyS for english. CPU easing: cpu.y += clamp(target-cpu.y, -spd*dt, spd*dt); track vyS similarly for its english too (fair). Serve: dir = towards player who conceded? Let's do: after CPU scores (player conceded), serve toward player? Original: server is the one who won point? Honestly, I'll serve toward the scorer's opponent = loser receives... whatever: serve direction = toward the player who just lost the point (they receive). So dir = -1 if player lost point? If CPU scored, ball goes toward player (vx negative). dir = scorer==player ? +1... wait player is left. If player scored (ball exited right), next serve toward CPU? Then CPU receives. Hmm receiving serve is disadvantage—fine, serve toward the loser. playerScored → ball exits right → serve toward CPU? Let me just serve toward the point loser: loser receives. pointWinner=player → loser=cpu → vx=+... toward right (cpu). OK: vx sign = winner==='player' ? 1 : -1? If winner player, ball travels right toward CPU. Wait left player, right cpu: toward cpu = vx positive. Yes. Angle: random in ±35°. State machine transitions: - menu: attract sim runs (both AI). update(dt) with player-controlled paddle replaced by AI. - start(diff): reset scores/stats; state='serve'; serveTimer=0.9; hide menu overlay. - serve: ball at center blinking; timer counts down; at 0 → play + launch. Draw "RECEIVE" ? skip text. - play: full sim. On exit: score++, stats, state='point', pointTimer=0.9, effects. - point: collapse effect runs (I run collapse during first 0.35s of 'point'), then → serve (reset speeds, serveTimer .8). - pause: freeze updates, overlay. Resume → prior state. - over when score reaches 7 after point delay: instead of serve → state 'over', show overlay with stats, win jingle. Attract sim: same as play but auto scores just reset ball without counting; keep scores hidden (draw 0? draw nothing). I'll run a lightweight copy: reuse same update with flag attract=true: skip scoring effects, just respawn ball after exit, no sound (or very quiet? silent), no sparks? keep small sparks for life but no sound/shake. Dim drawing. Simplify: I'll write update(state) with branch attract handling. Code size ~600-800 lines. Let's write it. Also the "note about explanation after code" — I'll include a brief explanation after the code block, in English (user wrote English). Fonts link: https://fonts.googleapis.com/css2?family=VT323&display=swap Preconnect too. Mute button placement: bezel bottom-right area alongside label; small button "SND ON". LED bottom-left. Actually put both in a bezel bottom row: left: LED + "POWER"; right: SND button + "P-72 · 60Hz". Bezel bottom row styled flex between, small 13px letterspaced text, color #6b5a3f-ish (muted warm gray on dark plastic — careful contrast: it's tiny label text, keep readable #8a7350). Scanlines overlay + vignette overlay inside .screen with border-radius inheriting. Vignette: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%). Plus a faint inner shadow for glass. Also subtle screen background not pure black: canvas fade uses rgba(12,9,5,.34); initial fill full opaque #0c0905 once at boot. Flicker: .screen animation flicker 4s steps? tiny opacity variance — I'll do canvas opacity keyframes 1/.985 subtle. Could interfere with powerOn animation (both on same element) — combine into one animation? Put powerOn on canvas, flicker on .scanlines? Flicker via a .glass overlay opacity oscillation. I'll add flicker to vignette overlay opacity 0.9~1. Simple. Roll bar: .screen::after gradient band height 90px translating top -20% → 120% over 9s linear infinite, opacity .05. It's a linear-gradient band — functional CRT artifact. Now write the JS carefully, watch for bugs: Ball-paddle collision with plane crossing: For left paddle (player): plane = PX+PW (right face). If ball.vx<0 and prev.x >= plane && new.x <= plane (ball left edge? use ball left face x = ball.x - BS/2). Let's define ball.x,y center. Ball left = x-BS/2. Crossing when x-BS/2 <= PX+PW && prevX-BS/2 > PX+PW... also need y overlap at crossing time: interpolate yc = prevY + (y-prevY)*t where t=(prevLeft-(PX+PW))/(prevLeft-newLeft)... approximate: check y overlap with paddle [y-PH/2, y+PH/2] vs [by-BS/2, by+BS/2] with small tolerance. Then reflect: set x = PX+PW+BS/2; compute bounce. Similarly right paddle plane = CPUX (left face), ball.vx>0 crossing when x+BS/2 >= CPUX && prev+... <=. Wall bounce: after y update: if y-BS/2 < WALL: y = WALL+BS/2; vy=abs(vy); beep; sparks. Bottom similarly. Score: if x < -30 → cpu scores... wait ball exiting left means player missed → CPU scores. if x > W+30 → player scores. Speed increase: on paddle hit, speed = min(speed*1.045+6, 960). Compute new velocity: const rel = clamp((by - p.y)/(PH/2+BS/2), -1, 1); const ang = rel * (60deg); let vx = cos(ang)*speed*dir; vy = sin(ang)*speed; vy += clamp(p.vyS, -600,600)*0.22; // renormalize to speed const m = hypot(vx,vy); vx*=speed/m; vy*=speed/m; // enforce horizontal min if (abs(vx) < speed*0.38){ const s=sign(vx)||dir; vx=s*speed*0.38; vy=sign(vy||1)*sqrt(speed^2 - vx^2); } CPU prediction: function predictY(ball){ // fold if(ball.vx<=0) return H/2; const t=(CPUX - BS/2 - ball.x)/ball.vx; if(t<0) return H/2; let y = ball.y + ball.vy*t; const span = H - 2*WALL - BS; // fold within [WALL+BS/2, WALL+BS/2+span] let yy = y - (WALL+BS/2); yy = ((yy % (2*span)) + 2*span) % (2*span); if (yy > span) yy = 2*span - yy; return yy + WALL+BS/2; } CPU target: if ball.vx>0: predict + aim offset err (err refreshed on each player hit & serve: err = (rand*2-1)*cfg.err). Else target = H/2 + (ball.y-H/2)*0.25 (lazy drift). Move toward target at cfg.speed (with slight ramp: cfg.speed*(0.85+0.35*rally/10) capped). Also small deadzone 6px to avoid jitter. Player-attract AI (left in menu): mirror with player plane. Attract: use STANDARD-ish params both sides, err larger (60) so misses happen & points "scored" → just respawn. Sparks: array {x,y,vx,vy,life,max}. update: pos+=v*dt; v*=0.9^...; life-=dt. draw: alpha=life/max; stroke line from (x,y) to (x-vx*0.035, y-vy*0.035), lineWidth 2, color rgba(255,210,120,a). Shake: shakeT decays: shakeMag = base*exp(-6t)? I'll keep shake={t:0, mag:0}; on hit set t=0.25,mag=m. offset computed as mag*(t/0.25)*(rand-0.5)*2 each frame... random each frame ok. Apply ctx.translate(ox,oy) after fade, before world; also whole-canvas CSS transform? Use ctx translate — simpler; edges: since we translate, edges reveal cleared bg — fine (fade rect covers full before translate? fade drawn without translate covers everything; world shifted shows bg at edges momentarily — acceptable, looks like screen shift). Collapse: during 'point' first 0.4s: p = 1 - pointTimer/0.4... let me define pointTimer counts down from 0.95. collapse phase cp = clamp((0.95-pointTimer)/0.45, 0, 1); k = 1 - 0.28*sin(cp*π); apply scale about center: translate(0,H/2); scale(1,k); translate(0,-H/2). Only when pointTimer in range & not attract. Flash: flash=1 on score; flash -= dt*3.2; overlay alpha flash*0.15. Also brightness bump: additional overlay 'rgba(255,220,150,flash*0.1)'. Bloom sprite: const bloom = document.createElement('canvas'); bloom.width=bloom.height=160; g=ctx2 radial 80,80 0→80: stops rgba(255,190,90,0.85) 0, rgba(255,160,40,0.25) 0.4, transparent 1. Draw under ball: ctx.drawImage(bloom, x-56, y-56, 112,112) with globalCompositeOperation='lighter', alpha maybe 0.8. Under paddles: draw stretched ellipse-ish: drawImage(bloom, px-30, py-70, 74, 140) alpha 0.35. Under score digits? skip. Score text: ctx.font = '80px VT323' — actually big: 96px. positions x=W*0.5±120, textAlign center, baseline top? middle at y=90. alpha .5 normally; matchpoint pulse. Also small "SET BALL SPEED"? no. Bottom status: font 19px VT323, alpha .55: left: `SPD ${Math.round(speed)}` center: rally>=3 ? `RALLY ${rally}` : 'FIRST TO 7' right: `BEST ${stats.bestRally}` hmm right: "BEST RALLY n". Keep: left SPD, center RALLY (when ≥3 else '—'?) center show `FIRST TO 7` default; right `BEST ${best}`. OK. Pause handling: I'll implement by not advancing update when paused; loop still renders (freeze frame + overlay). During pause, skip update & keep drawing same scene (draw once is fine but persistence fade would erase... if I keep drawing each frame without update, trails fade out but static objects redrawn — fine, trails vanish which is OK; but shake offsets random each frame — I'll only apply shake when not paused (t decays anyway)). Simplest: when paused, still render frame (no update). Sounds none. Hidden tab: visibilitychange → if state play → pause. Resize listener + initial. Also fonts: document.fonts.load('20px VT323') before first draw of text? Canvas will fallback then correct once loaded; to be safe, start loop after fonts.ready with a 300ms timeout fallback. I'll do: Promise.race([document.fonts.ready, delay(600)]).then(startLoop) — boot powerOn animation runs via CSS immediately. Menu overlay markup: Pause overlay: Over overlay: result h2, score, stats rows (dl style), buttons REMATCH / MENU. Styling details: overlays position absolute inset 0 within .screen (same rounded), display grid center; scrim background rgba(8,6,3,.62); hidden class display none. Menu backdrop-filter: blur(2.5px) saturate(.9)? mild. Title font-size clamp(64px, 14vmin, 120px), color amber, text-shadow? A soft phosphor halo on the big title is thematically justified but I want to avoid glowing-title cheapness — I'll keep title clean without glow; phosphor feel comes from color + scanlines behind. Actually a very tight 1px-ish halo is authentic CRT; but I'll skip text-shadow to stay crisp. Maybe letter-spacing .08em. Buttons: font inherit 22px; .start bigger 26px padding; borders. Diff button selected: background amber, color #140e05. Game over stats: three rows label/value with dotted leader? Use flex space-between width 260px border-bottom dashed rgba(amber,.25). Rematch/menu buttons row. Bezel: .cabinet { padding: 26px 26px 18px; background: linear-gradient? no — flat #17120c with inner highlight border: box-shadow inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 6px rgba(0,0,0,.6), 0 30px 80px -20px rgba(0,0,0,.9); border-radius: 22px; border: 1px solid #241b10; } .screen { position:relative; border-radius: 14px; overflow:hidden; background:#0c0905; box-shadow: inset 0 0 60px rgba(0,0,0,.75), inset 0 0 4px rgba(0,0,0,.9); } Spill behind: .stage::before radial. .stage wraps cabinet; body grid center; body background #060504. LED: .led { width:8px;height:8px;border-radius:50%;background:#5a4a2a; box-shadow none; } .led.on { background:#ffb000; box-shadow:0 0 8px rgba(255,176,0,.8);} .led.blink animation. Status text next to it. SND button: small terminal button in bezel row. Canvas cursor: none during play? Hiding cursor over screen while playing feels right (mouse controls paddle). cursor: none on .screen.playing. Toggle class. But then pause overlay needs cursor — overlay has cursor auto. Mobile: touch works via pointermove; layout scales. Fine. Let me now write final code. I'll be careful with details and get everything consistent. Also add aria labels. One more detail — "signature": the CRT power-on + attract mode + field-collapse on score. Good enough. Also make sure no emojis anywhere, icons: only need sound toggle — text label "SND ON/OFF" is fine (terminal aesthetic), no icon lib needed. Let me write the full file now. Also handle keydown repeat for space (e.repeat ignore). Pointer capture for touch: on .screen pointermove even when pressing; add touch-action:none to .screen. For mouse target mapping: rect = canvas.getBoundingClientRect(); ly = (e.clientY - rect.top)/rect.height*H. Now CPU english uses its vyS — compute in move code: before moving record prev, after move vy = (y-prev)/dt, vyS=lerp(vyS,vy,0.4). Rally: increments on each paddle hit; bestRally=max. stats.topSpeed = max(topSpeed, speed) on hits. duration accumulates in play state. Win jingle: sequence of beeps with setTimeout via audio time scheduling: use ctx.currentTime scheduling: beep at t, t+.12, t+.24 with rising freq (523,659,784,1046). Lose: descending. Sound engine: let AC=null, master=null, muted=false; function ensureAudio(){ if(!AC){ AC=new (window.AudioContext||window.webkitAudioContext)(); master=AC.createGain(); master.gain.value=0.22; master.connect(AC.destination);} if(AC.state==='suspended') AC.resume(); } function beep(f, dur=0.06, vol=1, type='square', when=0){ if(!AC||muted) return; const t=AC.currentTime+when; const o=AC.createOscillator(); const g=AC.createGain(); o.type=type; o.frequency.value=f; g.gain.setValueAtTime(vol,t); g.gain.exponentialRampToValueAtTime(0.001, t+dur); o.connect(g); g.connect(master); o.start(t); o.stop(t+dur+0.02); } Attach ensureAudio on first pointerdown/keydown (once options). Mute toggle: muted flag; master.gain.value = muted?0:0.22 (keep flag check in beep anyway). Button text update. Serve auto-launch: in 'serve' update: serveTimer-=dt; ball blink phase; at <=0 → launch: speed=BASE(380)+ maybe carry? reset 380. angle random ±30°, dir per receiver. state='play'. pointerdown during serve → launch immediately (set timer 0). Hmm also initial serve after start: receiver = random? First serve random direction. Keep var serveDir set at score time; initial random. Attract specifics: attract = state==='menu'. In update, if attract: paddles both AI (player uses predict toward PX plane when vx<0). Ball same physics; on exit: just reset ball to center with random dir after 0.5s (mini serve timer). No scoring/sfx/shake (small sparks ok). Draw world with alpha 0.55 via ctx.globalAlpha wrapper? I'll draw everything then the overlay scrim dims it anyway — scrim .62 over full-bright attract = maybe too dim; make scrim .5 and draw attract normally. Also skip HUD & scores in attract. Also add faint "demo" flicker? fine without. CPU object shared: paddle objects p = {y, vyS, ...}. For player in game: controlled. In attract: AI with plane PX side. Write aiMove(pad, planeX, dirTowards, cfg, dt): generic. function predictY(ball, planeX, dir){ // dir: ball.vx sign that approaches this plane if (Math.sign(ball.vx)!==dir) return H/2 + (ball.y - H/2)*0.2; const dist = dir>0 ? (planeX - BS/2 - ball.x) : (ball.x - BS/2 - planeX); Hmm careful: for right paddle plane x=CPUX (left face), ball travels +x; distance = (CPUX - BS/2) - ball.x. For left paddle plane = PX+PW (right face), ball travels -x; distance = ball.x - BS/2 - (PX+PW). const t = dist/ball.vx? For left case ball.vx negative and dist positive → t = dist/(-ball.vx)? Let me unify: t = dist/Math.abs(ball.vx). if (!isFinite(t)||t<0) fallback. let y = ball.y + ball.vy*t; fold. return y; } Fold: lo=WALL+BS/2, hi=H-WALL-BS/2, span=hi-lo; let yy=(y-lo)%(2*span); if(yy<0)yy+=2*span; if(yy>span) yy=2*span-yy; return lo+yy. Err: pad.err set when opponent hits or serve: pad.err=(Math.random()*2-1)*cfg.err*(0.6+0.4*Math.random()). Target=predict+err. AI speed: base cfg.spd; also cap paddle accel? Just velocity clamp; add tiny ease: move = clamp(target - pad.y, -v*dt, v*dt); if |diff|<4 don't move (deadzone) to avoid buzz. Difficulty cfg: NOVICE: {spd:290, err:74} STANDARD:{spd:420, err:44} EXPERT:{spd:560, err:20} Also player-attract cfg: {spd:420, err:60}. Rally ramp for CPU: v = cfg.spd*(1+min(rally,12)*0.02). Ball reset function: resetBall(dir){ ball.x=W/2; ball.y=H/2; ball.vx=0; ball.vy=0; ball.speed=380; ball.dir=dir; } launchBall(){ const a=(Math.random()*60-30)*Math.PI/180; const s=ball.speed; ball.vx=Math.cos(a)*s*ball.dir; ball.vy=Math.sin(a)*s; ensure |vx| min... cos30*... fine. } Player scoring detection sets rally=0? rally counts paddle hits; reset on score. Match point check after score: if score reach 7 → pending over. In 'point' update when timer done: if (ps>=WIN||cs>=WIN) → gameover overlay + jingle; else state='serve', serveTimer=0.85, resetBall(dir toward loser), ball blink. Also on start of 'point': flash=1, shake, collapse handled by state timers, scores updated immediately (digits bump: scoreBump[player]=1 decays; draw scale 1+bump*0.25 — need save/translate for text scale; I'll just bump alpha & slight y offset? simpler: draw with font size scaled: fontSize = 96*(1+bump*0.3). textBaseline middle at fixed y — fine.) Wait VT323 is thin; big score in VT323 looks terminal-like — good. Draw order recap in frame(): ctx.save(); resetTransform to base ss. fade rect. if state in play-ish: compute shake offset & collapse transform; ctx.translate/scale. draw walls lines, net, scores, labels, paddles+bloom, ball+bloom (if not menu? menu draws ball too), sparks, serve blink handled in ball draw (alpha toggling), status bar. flash overlay (screen-space, after restore). I'll manage transforms: ctx.setTransform(ss,0,0,ss,0,0) at frame start; fade; then ctx.save(); apply shake/collapse; draw world; ctx.restore(); flash rect in logical space full W,H (no shake). Good. Serve blink: when state==='serve', ballDraw alpha = (sin(t*18)>0)? 1:0.25; plus ring? skip. Status bar during serve: center shows "SERVICE" ? show receiver: `SERVE → CPU` / `SERVE → YOU`. nice. Labels "YOU"/"CPU" small at top y=WALL+18, alpha .35, positioned near paddles x centers. Also during play maybe hide labels after first rally? keep, subtle. Menu keyboard: Enter/Space starts. keys 1/2/3 select diff (update .sel). Also click. Pause: Escape → to menu (confirm? no, just go; keep scores reset). From pause overlay add "ESC — QUIT TO MENU" hint. Over overlay buttons: REMATCH (same diff), MENU. Edge: when going to menu, state='menu', show menu overlay, hide others, reset attract ball. Cursor none: add/remove class 'playing' on screen when state==='play'||'serve' && !paused. Now, spill var update: activity = clamp((ball.speed-380)/580,0,1); target = 0.05 + activity*0.05 + flash*0.3; smooth: spill += (target-spill)*0.1; setProperty('--spill', spill.toFixed(3)). CSS uses it in .stage::before opacity? Use directly as alpha in gradient? Can't put var inside rgba alpha? Yes you can: rgba(255,176,0,var(--spill)) works. But changing gradient var triggers repaint each frame — okay small area; throttle: only update when |Δ|>0.005. .stage::before { content:''; position:absolute; inset:-8%; background: radial-gradient(closest-side, rgba(255,176,0,var(--spill,.06)), transparent 70%); z-index:-1; filter: blur(30px)? blur heavy; skip filter, gradient alone soft. } Also body bg #050403. Power-on: .screen-inner? Apply to canvas: animation: powerOn 1s cubic-bezier(.2,.7,.3,1) both; keyframes: 0%{transform:scaleY(.006) scaleX(.7); filter:brightness(6) } 55%{ transform: scaleY(.012) scaleX(.98); filter:brightness(5);} 75%{ transform:scale(1); filter:brightness(2.2);} 100%{ transform:none; filter:none; } transform-origin center. Also run only on load (animation runs once). Overlays also should appear after power on: menu overlay animation fade in delayed .6s. Also I realize the canvas CSS transform scaleY tiny — canvas is sized via style width/height; transform fine. Vignette overlay above canvas; scanlines above; menu overlay topmost. Z order: canvas z0, scanlines z2, rollbar (in scanlines ::after) z2, vignette z3, menu/pause/over z5, all pointer-events none except overlays with buttons (menu pointer-events:auto). During gameplay overlays hidden. Scanlines pointer-events none always; menu overlay has pointer-events auto and sits above scanlines so scanlines won't show over menu? They will—scanlines z2 below menu z5; menu scrim semi-transparent so scanlines visible through. Rollbar: implement as .roll div inside .screen, animated top. opacity .06, height 120px, background linear-gradient(transparent, rgba(255,220,160,.14), transparent). animation roll 7s linear infinite. Now — DPR & crispness done. Let me also set canvas { display:block; image-rendering: auto }. Font in canvas: '96px "VT323", monospace'. Let me write the code now, complete and careful. ```html PONG · Amber Phosphor Edition

POWER

MODEL P-72 · 60 Hz

``` **How it's put together:** - **One idea carries the design** — an amber P3-phosphor terminal tube. Everything (type, colors, effects, even the "MODEL P-72" deck label and blinking power LED) serves that single concept instead of piling on decoration. - **CRT rendering**: instead of clearing the canvas, each frame fades with a translucent fill, so the ball and paddles leave real phosphor persistence trails. Scanlines, a drifting sync-roll band, a vignette, a CRT power-on animation, and a "field collapse" (vertical squash + flash + shake) on every score complete the tube feel. The room light behind the cabinet even breathes with ball speed via a CSS variable driven from the game loop. - **Real Pong mechanics**: square ball, serve-then-rally flow, bounce angle from paddle hit offset plus "english" from paddle velocity, speed ramping per hit (speed shown live), and a wall-reflection-predicting CPU with per-approach aiming error across three difficulties. Long rallies make the CPU arm slightly faster. - **Attract mode**: the menu sits over a live CPU-vs-CPU demo, exactly like an arcade cabinet idling. - **Feedback everywhere**: WebAudio square-wave beeps (paddle/wall/score/win jingles, `M` to mute), spark streaks on impacts, pulsing match-point digits, tap-to-serve, pause on blur, and a post-match report with longest rally, top speed, and match time. Controls: mouse/touch or `W·S`/arrows to move, `Space` to start/pause, `Esc` to quit to menu, keys `1–3` for difficulty. First to 7 wins.