游戏开发的魅力在于，同样的技术栈能做出截然不同的体验。这次选了五个还没碰过的方向——挂机放置的数值膨胀、农场经营的资源循环、绳索解谜的物理摆荡、吸血鬼幸存者的割草快感、以及派对游戏的本地多人互坑。每个都有自己的核心机制和数学逻辑。英文提示词直接拿去用。
1. 挂机点击器（数值膨胀 + 升级树）
Build an idle clicker game (like Cookie Clicker) using HTML/CSS/JS. Main element: a big button that gives +1 resource (e.g., "Energy") per click. Display current resource amount. Introduce generators that produce resource automatically every second:
- Generator A: costs 10 resource, produces 1 per second.
- Generator B: costs 50 resource, produces 5 per second.
- Generator C: costs 250 resource, produces 25 per second.
Implement an upgrade tree: after buying 5 of Generator A, unlock upgrade "Double Click" which makes each click give +2. After buying 10 of Generator B, unlock upgrade "Crit Chance" (10% chance to gain 10x click value). After buying 3 of Generator C, unlock "Idle Boost" which multiplies all generator output by 1.5. Use localStorage to save game state (resource count, generator counts, upgrades unlocked) and auto-load on page refresh. Display resources per second (RPS). All numbers can become large – use exponential notation or just plain numbers with toLocaleString. No animations, just buttons and text updates. Provide a "Reset Game" button that clears save. The challenge is managing upgrade dependencies and ensuring that click events and setInterval (or requestAnimationFrame with timestamp) don't conflict. Use a consistent update loop (every second) to recalculate resource production.
为什么选这个：挂机游戏看似简单，但涉及数值平衡、升级条件判断、本地存储持久化。你还要处理点击和自动生产并发时的数据竞态（用锁或事务思想）。做完你会对“增量游戏”的经济模型有感觉。
常见翻车：setInterval里更新资源的同时用户也在点击，导致数据覆盖。建议使用一个全局变量加requestAnimationFrame循环，或者用互斥标志。
2. 小农场经营（种植 + 收获 + 库存）
Create a tiny farming game using Canvas or DOM grid. Map: 5x5 plots. Each plot can be empty or contain a crop (wheat or carrot). Crops have growth stages: planted -> growing (2 seconds) -> ready. Player starts with 100 gold. Buy seeds: wheat seed costs 5 gold, carrot seed costs 8 gold. Click on an empty plot to plant a seed (if you have that seed and enough gold). After planting, the crop grows automatically over time (use setInterval or requestAnimationFrame with timestamps). When crop is ready, click to harvest: wheat sells for 15 gold, carrot sells for 25 gold. Display gold amount, seed inventory (wheat seeds: X, carrot seeds: Y). Add a shop panel to buy more seeds. Crops cannot be planted on occupied plots. Growth timers persist across page refresh? Optional but can use localStorage to save growth start timestamps and current stage. Provide a "Clear Field" button to reset all plots. No animations except text updates. Use vanilla JS. This is a simplified Stardew Valley / FarmVille prototype focusing on time-based growth and resource management.
说人话：农场游戏的核心是时间驱动和状态持久化。每个作物有自己的种植时间、成长阶段、收获价值。你需要记录每个地块的作物类型和种下时刻的时间戳，然后每秒刷新一次检查是否成熟。刷新页面后还能继续生长，得用localStorage存时间戳。
适合练：时间戳比较、定时器管理、二维数组状态、库存系统。
3. 绳索切割解谜（Cut the Rope风格）
Implement a physics-based puzzle prototype similar to "Cut the Rope" using Matter.js (or Planck.js). Scene: a candy (circle body) hanging from a ceiling by a rope (distance constraint). The rope is attached to a pivot point at the top. A pair of scissors (cursor click) – when player clicks on the rope, cut it (remove constraint). The candy falls due to gravity, and must land into a frog's mouth (a static sensor body at the bottom left). Add obstacles (rotating platforms, spikes that reset candy if touched). Provide three levels (hardcoded layouts of static bodies and ropes). Level complete when candy enters the frog (collision event). Display level number, and a "Reset Level" button that restores original rope and candy position. Also add a "Next Level" button after completion. Use Matter.js for world, bodies, constraints, and collision events. You need to implement mouse click detection on the rope – that means checking if the click coordinates are near the line segment of the rope (distance to line). Ropes can be represented as constraints with bodyA (ceiling anchor) and bodyB (candy). Provide visual feedback (rope highlighted on hover). No timers, just physics simulation with fixed timestep (Matter.js handles). The challenge is creating levels, cutting constraints dynamically, and resetting state.
为什么选这个：Cut the Rope类型的核心是约束切割和重置逻辑。Matter.js的约束删除后要能重新创建。点击检测绳子需要计算鼠标到线段的距离。每个关卡预置不同的障碍物和绳子数量，重置时要恢复完整的约束系统。
坑点：绳子切割后world中remove constraint，重置时重新add。注意物理世界的清理和重建，避免残留。
4. 吸血鬼幸存者轻量版（双摇杆 + 自动攻击）
Build a minimalist Survivors-like (Vampire Survivors clone) using Canvas. Player is a small circle at center of a 1000x800 canvas, automatically moves with WASD keys (or arrow keys). Enemies spawn from edges every 1 second, increasing spawn rate over time. Player has no attack button – instead, weapons are passive: a rotating circle (like garlic) that damages enemies on contact, and a projectile that fires automatically every 0.5 seconds toward the nearest enemy. Implement:
- Player stats: HP 30, speed 5 per second (frame-rate independent using delta time). Enemies touch player deal 5 damage and knock back slightly.
- Experience: each enemy killed drops an XP gem (circle). Collecting gems fills XP bar. On level up (every 100 XP), player chooses one upgrade from three random options: +10 max HP, +10% speed, +20% damage, +10% cooldown reduction, or +1 projectile amount.
- Enemies: basic slime (HP 10, damage 5, speed 2), fast bat (HP 5, damage 3, speed 4), tank (HP 40, damage 8, speed 1). Display current XP, level, HP bar.
- Game over when HP <= 0, show final score (enemies killed), restart button.
- Use requestAnimationFrame with delta time for movement. Collision detection: circle-circle. Manage arrays of enemies, XP gems, projectiles. Projectiles move toward target enemy, disappear on hit.
- The challenge is implementing an efficient update loop for up to 100 enemies and projectiles without lag. Use object pooling for projectiles. No external engines.
核心价值：幸存者类游戏考验实体管理、升级系统、碰撞检测和性能。你需要处理大量敌人同时移动，还要实现投射物的目标锁定和自动攻击。升级系统需要随机选择并应用属性修改。帧率独立移动是必须的。
**适合练**：数组遍历优化、增量时间、随机权重选择、UI实时更新。
5. 本地多人弹球对战（Pong变体 + 技能）
Create a local multiplayer air hockey / Pong battle with power-ups. Two paddles: left (W/S keys) and right (Up/Down keys). Ball starts at center. Score when ball passes left or right goal (left wall or right wall). First to 5 wins. Add three power-ups that spawn randomly on the playfield (every 5 seconds) and float for 3 seconds. If a paddle touches a power-up, that player gains temporary effect:
- Speed Boost: paddle moves 1.5x faster for 5 seconds.
- Mega Paddle: paddle height doubles for 5 seconds.
- Ball Split: adds a second ball (max 3 balls) – balls cannot split further.
- Shrink Opponent: opponent paddle becomes half size for 4 seconds.
Implement physics: ball bounces off paddles with angle depending on where it hits (offset from center: positive/negative angle). Balls have constant speed. All power-up effects have timers. Display scores and active effects on each side. Game ends at 5, show winner and restart button. Use Canvas and requestAnimationFrame. No AI – only two human players on same keyboard. Handle key events without page scrolling. The challenge is managing multiple balls, power-up timers, and collision detection between balls and paddles, walls, and power-ups. Use a fixed timestep or delta time to keep ball speed consistent across framerates.
说人话：派对游戏的核心是本地多人对抗和道具乱斗。你需要处理两个独立玩家的输入、多个球的物理、道具的生成和碰撞、以及状态计时器。多人键盘输入要防止按键冲突（preventDefault）。道具效果如“缩小对手”需要修改对方paddle的高度并在计时结束后恢复。
翻车重灾区：多球时一个球触发胜利条件后游戏结束，但其他球还在飞。需要在得分时清除所有球或暂停物理。另外道具定时器重叠时要正确叠加或刷新。
这五个方向覆盖了挂机数值、农场时间、物理切割、幸存者海量实体、派对多人输入。每个都有自己的核心难点。挂机游戏练数据结构和持久化，农场游戏练时间戳管理，绳索解谜练约束物理，幸存者练性能优化，派对游戏练多输入和状态同步。挑一个你最近感兴趣的肝一下，代码能跑通、不报错、逻辑对，就已经超越了大部分只说不做的。
