Web游戏开发命题，拒绝调包侠

这里整理了五条纯前端游戏开发命题。这些题目完全剥离了后端依赖，所有逻辑、状态管理、数据存储甚至“多人”交互的模拟都在浏览器端完成。它们考察的是开发者对 JavaScript 性能极限的把控、Canvas/WebGL 的底层渲染能力、以及如何在没有服务器权威验证的情况下构建可信的游戏循环。别指望用引擎插件糊弄过去，我要看的是你对帧率、内存和算法的真实理解。

1. Procedural Infinite Runner with Chunk Management

Build a side-scrolling infinite runner using HTML5 Canvas and vanilla JavaScript. The core challenge is memory management and procedural generation. You must implement a chunk-based system where terrain segments are generated on the fly and destroyed when they leave the viewport to prevent memory leaks. Do not use any game engine (no Phaser, no Three.js). Implement a simple physics engine for gravity and collision detection (AABB). The game speed should increase over time. Use `requestAnimationFrame` for the render loop and ensure the frame rate stays stable at 60 FPS even as the game progresses. Store the high score in `localStorage`. Add a "debug mode" toggle that visualizes collision boxes and chunk boundaries.

Tech Stack:
- Core: Vanilla JavaScript (ES6+), HTML5 Canvas API.
- State: Native JS Classes or Modules for entity management.
- Storage: `localStorage` for persistent high scores.
- Performance: Object pooling for obstacles and particles to avoid Garbage Collection spikes.

2. Local Multiplayer Snake with Input Buffering

Create a two-player Snake game playable on a single keyboard (WASD for Player 1, Arrow Keys for Player 2). The twist is implementing input buffering to handle rapid key presses without losing inputs or causing self-collision glitches. The game state must be deterministic: running the same sequence of inputs must always produce the same result. Render the grid using DOM elements or Canvas. Implement a "replay" feature that records the input sequence and can replay the match exactly. Handle the edge case where both players crash in the same tick (draw). No external libraries allowed. The code structure should separate the update logic (tick-based) from the render logic (frame-based).

Tech Stack:
- Core: Vanilla JavaScript, HTML/CSS or Canvas.
- Logic: Fixed time-step game loop implementation.
- Storage: `IndexedDB` or `localStorage` to save replay data (input sequences).
- UI: Minimalist CSS for the scoreboard and replay controls.

3. Browser-Based Raycasting Engine (Wolfenstein 3D Style)

Implement a pseudo-3D first-person viewer using the Raycasting algorithm (like Wolfenstein 3D) entirely in JavaScript. Do not use WebGL or Three.js; this must be a software renderer using 2D Canvas or direct pixel manipulation (`ImageData`). The map should be defined by a 2D array. Implement wall textures, floor/ceiling shading, and sprite rendering for objects (like pillars or enemies) with depth sorting. Handle keyboard input for movement and rotation. Optimize the rendering loop to maintain 30+ FPS on average hardware. This task tests your understanding of computer graphics fundamentals, trigonometry, and performance optimization in a non-accelerated environment.

Tech Stack:
- Core: Vanilla JavaScript, HTML5 Canvas (2D Context).
- Math: Custom trigonometric functions for ray projection.
- Assets: Procedurally generated textures or base64 encoded images to keep it single-file.
- Optimization: DDA (Digital Differential Analyzer) algorithm for efficient ray traversal.

4. Offline-First Card Battler with AI State Machine

Develop a single-player card battler (like Slay the Spire lite) that runs entirely offline. The enemy AI must be implemented using a Behavior Tree or Finite State Machine, not random moves. The AI should react to player health, mana, and block status. Implement a complex card effect system (e.g., "Deal 5 damage, apply 2 Poison, draw 1 card") using a composable pattern. Save the game state automatically to `localStorage` after every turn, allowing the user to close the tab and resume later. Implement a "seeded" random number generator so that daily challenges are identical for all users based on the date string. No backend, no APIs.

Tech Stack:
- Core: React or Vue (for UI state) or Vanilla JS (for DOM manipulation).
- Logic: Custom RNG (Mulberry32 or similar) for deterministic seeding.
- Storage: `localStorage` with JSON serialization for complex game state.
- Architecture: Entity-Component-System (ECS) or Command Pattern for card effects.

5. Audio-Reactive Particle Visualizer

Build a real-time audio visualizer that uses the Web Audio API to analyze microphone input or an uploaded audio file. Generate a particle system where each particle's size, color, and velocity are driven by specific frequency bands (bass, mid, treble). Use HTML5 Canvas for rendering. Implement a custom physics system for particles (gravity, friction, bounce). The visualizer must be responsive to window resizing. Add a "preset" system where users can save their favorite parameter configurations (e.g., "Bass Boom", "Treble Sparkle") to `localStorage`. Ensure the audio context handles browser autoplay policies correctly (user interaction required to start). No external visualization libraries (like Three.js or PixiJS) allowed; write the renderer from scratch.

Tech Stack:
- Core: Vanilla JavaScript, Web Audio API, HTML5 Canvas.
- Math: Fast Fourier Transform (FFT) data interpretation from AnalyserNode.
- Storage: `localStorage` for saving user presets.
- Performance: Typed Arrays for particle data to maximize throughput.

这五个命题涵盖了程序化生成、确定性逻辑、图形学基础、复杂状态机以及音频信号处理。它们都是纯前端的硬骨头，没有后端可以甩锅，没有引擎可以遮丑。能独立完成这些，说明你对浏览器的能力边界有着清晰的认识，并且具备从零构建复杂交互系统的底层实力。