3D像素风室内排球游戏
- 播放
- 2万
- 点赞
- 532
- 评论
- 31
- 收藏
- 391
作者用 Sonnet 5.5 和 Three.js 做出单文件 HTML 像素风 3D 室内排球游戏,包含 6 对 6 模拟比赛、教练操作和录像回放,耗时 2 小时 40 分钟,API 费用 68.08 美元。
完整提示词6,292 字符
Build me a single-file HTML artifact: a pixel-art 3D indoor volleyball final, in the same visual and technical style as my earlier pixel works (Hollybrook Open tennis, School Yard Futsal, Bramley Oval cricket). Reuse their rendering approach, but give this page its own identity.
NAME AND IDENTITY
- Title: "Lighthouse Cup". Header kicker: "Grand Final" and "Marlowe Arena". Invented teams, players and sponsors only, seeded so they are identical on every load.
- Page look: the match-day programme of a sports hall. Warm maple paper background, deep navy for ink and selection, signal orange (the colour of court markings) for everything live or chosen. The header has a navy boundary line with a dashed orange attack-line under it, a small logo (an orange ball with navy seams) and a big uppercase condensed title. The match sits in a framed plate with a hard navy offset shadow (no blur). Section titles in the control panel carry a small orange court-corner glyph. Buttons and headings are uppercase condensed.
- Fonts: Barlow Condensed (display, headings, scoreboard numerals, buttons) and Barlow (all reading text). Light theme by default; dark theme ("an evening in the hall") with navy-black paper and a lighter orange. All colours as tokens, explicit body background, 16px gutters, no horizontal scroll at 400px, controls stacked under a sticky picture on phones.
RENDERING (same pipeline as my other works)
- three.js r128 from cdnjs, real 3D geometry only (no sprites), orthographic isometric camera.
- Render to a tiny low-res target (pixel size slider 1-6 px, default 2), depth-based outlines, then snap every pixel to one fixed 90-colour palette in OKLab with ordered dither. Procedural sky shader.
- Scene: an indoor sports hall as a diorama on a floating island. Court 18 x 9 m with lines, net with antennae and posts, referee stand, line judges, bench areas, scoreboard, banners, tiered stands with an instanced crowd that reacts to points and big rallies, light columns, big windows letting in sky.
- Hall lights: Day / Evening / "Show" with eased transitions; four light columns switch on in the later modes. Real shadows.
- Floor types (default maple) that change texture, bounce and shoe squeak, with two live gauges (Bounce, Squeak) updated from the ball.
- Blocky rigged players in team kits, a libero in a different shirt colour, a referee, line judges, a coach per bench. Poses: ready stance, run, jump serve, float serve, spike, block (arms up over the net), dig, set, dive, celebrate, dejected, referee signals.
- Cameras: TV follow (tracks the ball), Whole hall, Close-up. Drag to turn, wheel/pinch to zoom, Q/E turn, 1/2/3 cameras, R reset, right-drag or Shift-drag pans, plus pixel size, outlines, dither, raw-3D toggles.
GAME (simulated, not scripted)
- Leagues (e.g. women's and men's) each with several invented teams and rosters of 12 (six on court, a libero, bench). Formats: Quick set to 15, One set to 25, Best of 3, Best of 5.
- Real volleyball scoring: rally point, sets to 25 (15 in the decider) won by two, the serving team rotates through the six positions after each side-out, libero rules (back row only, replaces a middle blocker), two timeouts and two substitutions logic per set, two video challenges per set. Toss and teams walk-out ceremony, set breaks, final result.
- Ball physics for serves, passes, sets, attacks, blocks and floor contact, so that every point (ace, kill, block, dig, net touch, out ball, service error) comes from where the ball and players actually are. Serve speed shown in km/h.
- Rally logic: receive, set, attack, block and dig decisions driven by player ratings (serve, receive, set, attack, block, defence, stamina), rotation position, and the coach's tactics. Players tire over a long match.
- Coach panel for the team the user picks, the other team is AI:
- Serve: four options (for example float, jump, short, aggressive), applied to the next serves.
- Attack: five options (for example power, tip, line, cross, quick middle) applied to the next attacks.
- Block: two options (for example read, commit).
- "Aim next attack": click a spot on the opponent's half to direct the next attack or serve.
- Timeout (2 per set) called at the next dead ball with a countdown banner, which also affects momentum.
- Substitution: pick a court player and a bench player from chips, then confirm.
- Video challenge (2 per set): a ring countdown button appears after a close line call, then a "Video check" overlay tracks the ball and shows IN or OUT, overturning the call if it was wrong.
- Controls: New match, Skip ceremony, speed 1/2x to 4x, pause, auto-next match, sound toggle (synthesised Web Audio, no audio files), key shortcuts (N new, K skip, T timeout, C challenge, A aim, S floor, L lights, Space pause).
HUD
- A navy scoreboard bug over the picture: header line with the set number and a "Set point/Match point" flag, one row per team with a serving-ball dot, a kit chip, three-letter name, timeout pips, set scores, current points, and a six-cell rotation diagram per team (libero highlighted, server marked). Serve-speed pill, skewed orange event captions (ACE, KILL, BLOCK, SET POINT), a one-line live commentary strip, state chips (Live/Paused, speed, camera).
MATCH CENTRE
- Set-by-set score table with the serving team marked, result banner, comparison stats (aces, kills, blocks, errors, serve/receive quality), top performers per team, rosters with positions, libero and "on court" markers, commentary feed newest first with varied phrasing.
TUNING
- Rallies of realistic length (mostly 2-6 contacts, occasional long rallies), side-out about 60-65 percent, aces 5-8 percent, a set to 25 lasting 4-6 minutes at 1x. Close sets should happen often.
QUALITY BAR
- Test in headless Chromium (local three.js via route interception, software WebGL). Run dozens of full matches without rendering in every format to catch exceptions and tune balance from outcome statistics. Screenshot day, evening, show, mobile and dark theme. Test coach actions, substitutions, timeouts, the video challenge and auto-next. Fix every bug you find; do not stop at the first working render.
- Publish as one HTML file with a short description, and tell me what you did not verify (real GPU, audio by ear, real touch device).出处:作者在原帖下的回复。提示词保留原文语言,未做改写。
作者提到的工具
Three.js
原帖:https://x.com/vib3coded/status/2117367865632227543
全部作品数据开源在 GitHub · awesome-opus-5.5-video。
模型归属以作者自述为准,本站未独立复现。播放量为 2026-11-04 的快照。作品版权归原作者,修改署名或下架请在 X 私信 @GoSailGlobal。
