完整指南：5 步做出你自己的记忆灯光游戏（西蒙游戏）

完整指南5 步做出你自己的记忆灯光游戏西蒙游戏【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp一、先玩起来感受记忆灯光游戏的节奏屏幕中央四个色块围成圆盘。嘟的一声红色先亮紧接着蓝色跟进绿色压轴。灯光熄灭后轮到你了——你得按同样的顺序把它们敲回去。多按错一格全部重来。这就是记忆灯光游戏西蒙游戏最抓人的地方它不考手速只考你的短期记忆。每多撑过一轮序列就长一格、快一拍从轻松拿捏到盯着都跟不上往往只差几分钟。接下来这篇指南会带你用纯前端把这套玩法完整搭出来。二、设计思路用一张图看清西蒙游戏由哪几块拼成动手前先想清楚这个 JavaScript 小游戏到底由谁负责什么拆开看它是四层各司其职的关系而不是一个大而全的函数堆。┌─────────────── 记忆灯光游戏西蒙游戏 ───────────────┐ │ 状态层 gameState当前序列 / 按到第几个 / 回合 / 严格开关 │ │ ↓ 读出待比对的序列 ↑ 每次按键后更新 │ │ 序列层 随机追加一格 逐格点亮节奏由这里控制 │ │ ↓ 播放完毕开放输入 │ │ 交互层 按钮点击 → 点亮反馈 → 交给状态层比对 │ │ ↓ 整轮按对 / 按错 │ │ 规则层 回合推进、错一步的处置、撑过 20 轮判定胜利 │ └──────────────────────────────────────────────────────────┘ 记住这个方向就够了状态是中枢序列是发动机交互是手规则是裁判。后面所有代码都往这四格里填。三、搭建路径从零到能玩只走四步第一步初始化状态先把所有游戏需要记住的东西放进一个对象后面所有逻辑都围绕它转。const state { sequence: [], // 机器出过的灯光0~3 代表四个色块 pressed: 0, // 玩家本轮已按对几格 round: 0, // 当前回合 strict: false, // 严格模式错一步直接结束 playing: false, // 序列播放中禁止输入 };第二步生成并播放序列每回合往序列尾部追加一格随机数再逐格点亮。用async/await把亮一下、灭一下排成队列节奏感就有了。function addRandomPress() { state.sequence.push(Math.floor(Math.random() * 4)); } async function playSequence() { state.playing true; await sleep(600); // 每轮开头留个准备间隙 for (const color of state.sequence) { lightUp(color); // 点亮 300ms 后自动熄灭 await sleep(300); await sleep(150); // 灯与灯之间的呼吸感 } state.playing false; // 播放结束交给玩家 }第三步玩家输入判定按键处理的本质是一次比对按的色块等不等序列的下一格。这里先只处理按对判错逻辑留到下一步。function onButtonPress(color) { if (state.playing) return; // 序列播放中输入一律忽略 lightUp(color); if (color ! state.sequence[state.pressed]) { onWrongPress(); // 判错逻辑见第四步 return; } state.pressed; if (state.pressed state.sequence.length) nextRound(); }第四步回合推进与胜负按完整轮就进下一回合回合 1、清空按键进度、追加新格再重播。同时定好两条收尾线——错一步按模式处置撑到 20 轮判胜。function nextRound() { if (state.round 19) return win(); // 撑过第 20 轮即胜利 state.round; state.pressed 0; addRandomPress(); playSequence(); } function onWrongPress() { showError(); if (state.strict) return resetGame(); // 严格模式当场结束 setTimeout(playSequence, 1200); // 普通模式重播让玩家看清错在哪 }四步串完一个可以完整玩一局的西蒙游戏就跑起来了 。四、细节打磨三个让体验不一样的小改法声音发不出来或总是慢半拍浏览器不会在页面加载后立刻等你放音频。给四个色块各建一个独立的Audio对象并在初始化时触发一次预加载每次播放前把currentTime归零再play()延迟感会立刻消失。灯效生硬、像幻灯片别手动 setTimeout 控制显隐给色块加一条transition: opacity 0.3s, transform 0.3s用加 active 类—延时移除类交给 CSS 过渡去收尾高亮和平滑熄灭都是自动的。刷新一下严格模式和最高记录全没了用localStorage存两个小值strict开关和最高撑到的回合数。加载时读回、变动时写回玩家的重开就有了存档感。另外两个小动作值得一提放一个显式的开始按钮既符合浏览器的自动播放策略也顺便当回合计时器移动端把click换成touchstart并设置touch-action: manipulation避免双击缩放打断节奏。五、踩坑与快速修复调试时你可能遇到的五个坑播放中途的点击也被计分——序列还在亮判定却已经吃下输入。解法用playing标志把输入彻底锁在播放窗口之外。音频第一声必失败——浏览器自动播放策略拦了首次无声请求。解法所有声音必须挂在开始按钮这一次用户手势之后。回合边界错乱pressed指到下一轮的格子上——判错重播后按键进度没清零。解法只在整轮按对和重开两个时机重置pressed别在播放中途动它。快速连点把一次错误变成连环错——错误后没有冷却玩家狂按全部算错。解法判错后加约 1.2 秒输入锁正好覆盖错误提示的时长。手机上长按色块弹出系统菜单——只监听了click没处理触摸。解法绑定touchstartCSS 上给按钮设touch-action: manipulation。 排障顺序建议先确认状态流转日志打sequence和pressed再看播放时序最后才碰音频——八成问题出在前两步。六、玩法拓展你的西蒙游戏还能长成什么样基础版跑通后这些都是只改规则层就能落地的方向难度分级每回合缩短灯间间隔 10ms或高级档每 3 轮追加两格双人抢答同一条序列两人各占四个按钮谁先按完整轮谁得分成就系统记录最快通关回合连续完美 5 轮用localStorage存徽章状态主题切换色块换成水墨、像素、霓虹三套 CSS 变量切换只改:root节奏变奏加入反向回放、双色同时亮、快慢随机混合的疯狂回合七、最后把它改成你的版本从四个色块到一个能玩到第 20 轮的完整游戏核心其实只有四步立状态、出序列、比输入、推回合。 剩下的每一行都是你的自由度——换个配色、加个音效、改条规则今晚就能交出一个只属于你的西蒙游戏。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考