最近午休时间我用原生 JavaScript 写了一个摸鱼小游戏——屏幕上随机出现小图标点中加分点错扣血考验反应速度。同事们玩得不亦乐乎甚至有人拿来 PK 手速。做这个小游戏的时候我在花猫导航huamaodh.com的设计资源分类里找到了免费的图标素材库省去了自己画的麻烦。今天就把这个项目的完整代码和实现思路分享出来前端新手也能跟着一步步做出来。一、游戏设计思路我们要做的是一个“打地鼠”风格的点击小游戏核心规则很简单游戏区域内有 9 个格子3×3 排列随机一个小鱼 emoji 在某个格子里冒出来玩家点击小鱼加分点空了扣生命值每过一段时间速度加快越来越难生命值归零游戏结束显示最终得分技术选型纯 HTML CSS JavaScript不需要任何框架复制代码到记事本保存成.html文件就能玩。二、HTML 结构搭建html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title摸鱼大作战/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .game-container { background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 30px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; color: #fff; } .score-area { text-align: left; } .score-label { font-size: 12px; color: #8892b0; letter-spacing: 2px; } .score-value { font-size: 36px; font-weight: 700; color: #64ffda; } .lives-area { display: flex; gap: 6px; } .heart { font-size: 24px; transition: all 0.3s; } .heart.lost { opacity: 0.2; transform: scale(0.8); } .grid { display: grid; grid-template-columns: repeat(3, 120px); grid-template-rows: repeat(3, 120px); gap: 12px; margin-bottom: 20px; } .cell { background: rgba(255, 255, 255, 0.08); border-radius: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 56px; transition: all 0.15s; position: relative; user-select: none; } .cell:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.03); } .cell.active { background: rgba(100, 255, 218, 0.15); animation: pulse 0.6s ease-in-out; } .cell.miss { background: rgba(255, 107, 107, 0.3); animation: shake 0.4s ease-in-out; } keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .game-status { color: #8892b0; font-size: 14px; margin-bottom: 16px; min-height: 20px; } .start-btn { background: linear-gradient(135deg, #64ffda 0%, #48c9b0 100%); color: #1a1a2e; border: none; padding: 14px 48px; border-radius: 30px; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 1px; transition: all 0.3s; } .start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(100, 255, 218, 0.3); } .start-btn:active { transform: translateY(0); } .start-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .game-over-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 100; } .game-over-overlay.show { display: flex; } .game-over-card { background: #1a1a2e; border-radius: 20px; padding: 40px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); } .game-over-card h2 { color: #ff6b6b; font-size: 28px; margin-bottom: 12px; } .game-over-card .final-score { color: #64ffda; font-size: 48px; font-weight: 700; margin-bottom: 20px; } .game-over-card button { background: #64ffda; color: #1a1a2e; border: none; padding: 12px 36px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; } /style /head body div classgame-container !-- 顶部信息栏 -- div classgame-header div classscore-area div classscore-label当前得分/div div classscore-value idscore0/div /div div classlives-area idlives span classheart❤️/span span classheart❤️/span span classheart❤️/span span classheart❤️/span span classheart❤️/span /div /div !-- 游戏网格 -- div classgrid idgrid div classcell>// 游戏状态 const state { score: 0, lives: 5, isRunning: false, currentFishIndex: -1, timer: null, speed: 1000, // 小鱼出现的间隔毫秒 minSpeed: 350, // 最快速度 speedStep: 30 // 每得10分加速的幅度 }; // DOM 元素 const grid document.getElementById(grid); const cells document.querySelectorAll(.cell); const scoreEl document.getElementById(score); const livesEl document.getElementById(lives); const statusEl document.getElementById(status); const startBtn document.getElementById(startBtn); const gameOverlay document.getElementById(gameOverlay); const finalScoreEl document.getElementById(finalScore); // 随机生成小鱼位置保证和上次不一样 function randomFishIndex() { if (state.currentFishIndex -1) { return Math.floor(Math.random() * 9); } let newIndex; do { newIndex Math.floor(Math.random() * 9); } while (newIndex state.currentFishIndex); return newIndex; } // 在指定格子显示小鱼 function showFish(index) { // 清除所有格子的内容 cells.forEach(cell { cell.textContent ; cell.classList.remove(active); }); // 在目标格子放小鱼 state.currentFishIndex index; cells[index].textContent ; cells[index].classList.add(active); } // 隐藏小鱼 function hideFish() { if (state.currentFishIndex 0) { cells[state.currentFishIndex].textContent ; cells[state.currentFishIndex].classList.remove(active); } state.currentFishIndex -1; } // 扣血 function loseLife() { state.lives--; updateLivesDisplay(); if (state.lives 0) { endGame(); } } // 更新生命值显示 function updateLivesDisplay() { const hearts livesEl.querySelectorAll(.heart); hearts.forEach((heart, index) { if (index state.lives) { heart.classList.add(lost); } else { heart.classList.remove(lost); } }); } // 更新分数 function updateScore(points 1) { state.score points; scoreEl.textContent state.score; // 每得 10 分加速 if (state.score % 10 0 state.speed state.minSpeed) { state.speed Math.max(state.minSpeed, state.speed - state.speedStep); // 重新设置定时器 clearInterval(state.timer); state.timer setInterval(gameLoop, state.speed); statusEl.textContent ⚡ 速度加快了; setTimeout(() { if (state.isRunning) { statusEl.textContent 快点击小鱼; } }, 800); } } // 游戏主循环 function gameLoop() { if (!state.isRunning) return; // 如果上一条小鱼没被点中扣血 if (state.currentFishIndex 0) { // 标记为未命中 cells[state.currentFishIndex].classList.add(miss); setTimeout(() { cells[state.currentFishIndex].classList.remove(miss); }, 400); loseLife(); } // 如果游戏还在继续显示下一条鱼 if (state.isRunning) { const newIndex randomFishIndex(); showFish(newIndex); } } // 处理格子点击 function handleCellClick(event) { if (!state.isRunning) return; const cell event.currentTarget; const index parseInt(cell.dataset.index); if (index state.currentFishIndex) { // 点中了 updateScore(); hideFish(); // 立即显示下一条不等定时器 if (state.isRunning) { clearInterval(state.timer); const newIndex randomFishIndex(); showFish(newIndex); state.timer setInterval(gameLoop, state.speed); } } else { // 点空了 cell.classList.add(miss); setTimeout(() cell.classList.remove(miss), 400); loseLife(); } } // 开始游戏 function startGame() { // 重置状态 state.score 0; state.lives 5; state.isRunning true; state.speed 1000; state.currentFishIndex -1; // 更新界面 scoreEl.textContent 0; updateLivesDisplay(); statusEl.textContent 快点击小鱼; startBtn.disabled true; startBtn.textContent 游戏中...; gameOverlay.classList.remove(show); // 清空格子 cells.forEach(cell { cell.textContent ; cell.classList.remove(active, miss); }); // 立刻显示第一条鱼 const firstIndex randomFishIndex(); showFish(firstIndex); // 启动定时器 state.timer setInterval(gameLoop, state.speed); } // 结束游戏 function endGame() { state.isRunning false; clearInterval(state.timer); hideFish(); // 更新界面 statusEl.textContent 游戏结束 ; startBtn.disabled false; startBtn.textContent 再来一局; // 显示弹窗 finalScoreEl.textContent state.score; gameOverlay.classList.add(show); // 清空格子 cells.forEach(cell { cell.textContent ; cell.classList.remove(active, miss); }); } // 重新开始 function restartGame() { startGame(); } // 绑定事件 cells.forEach(cell { cell.addEventListener(click, handleCellClick); }); startBtn.addEventListener(click, startGame); // 初始化状态 statusEl.textContent 准备好摸鱼了吗;四、游戏玩法与体验优化把上面两段代码合在一起保存成.html文件双击打开就能玩。核心玩法就是眼疾手快小鱼冒出来立刻点。几个设计上的小细节惩罚机制上一条鱼没被点击就消失会扣一条命。这样玩家不敢走神增加紧张感。渐进难度每得 10 分小鱼出现速度加快 30 毫秒越来越难最高到 350 毫秒间隔。老手能撑到 100 分以上就已经很强了。即时反馈点中格子有绿色脉冲动画点错有红色抖动手感清晰。游戏结束弹窗用半屏遮罩展示最终得分增加仪式感同事围观时更有表演效果。五、扩展思路怎么让它更好玩如果这个基础版本已经满足不了你了可以从这几个方向继续打磨1. 加音效用 Web Audio API 或简单的audio标签点中播“叮”一声点错播“咚”一声游戏氛围瞬间拉满。2. 引入道具系统随机出现炸弹点了扣分、金鱼点了加 3 分、乌龟点了减速让策略性更强。3. 排行榜用localStorage把最高分存到浏览器里每次打完显示“新纪录”。甚至可以接入后端做全公司排行榜。4. 美化图标代码里用的是 emoji你也可以换成自己喜欢的图标素材。六、写在最后这个摸鱼小游戏代码量不大前后端一共不到 200 行但涵盖了 DOM 操作、定时器管理、状态机、CSS 动画等前端核心知识点。对于正在学 JavaScript 的新手来说比写 Todo List 有趣多了而且做完就能玩成就感满满。偶尔写点这种“无用但快乐”的代码就当是给大脑做一次按摩。下次午休不如把这篇教程打开花半小时敲出来然后跟同事比一比谁的摸鱼手速更快。祝你玩得开心也祝你摸鱼不被发现。
