《AI 小游戏开发（2）｜带倒计时的 30 秒点方块，AI 生成完整游戏）》
目录
一、本课目标
二、给 AI 的超详细提示词
三、完整代码
一、本课目标
学会：
- 如何给 AI 描述带时间的游戏
- 实现倒计时、游戏结束
- 制作更完整的小游戏逻辑
二、给 AI 的超详细提示词
plaintext
请制作一个网页小游戏：30秒点击方块挑战 规则： 1. 30秒内点击随机方块加分，每点一次 +1 分 2. 页面显示：当前分数 + 剩余时间 3. 时间到 0 秒，游戏结束 4. 时间到后弹出最终得分 5. 提供重新开始按钮 6. 界面简洁好看 7. 代码完整无错误，可直接复制运行 输出完整 HTML 文件。三、完整代码
html
预览
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>30秒挑战</title> <style> *{font-family:Microsoft YaHei;} body{background:#f0f8ff;padding:20px;} .info{font-size:20px;margin:10px 0;} #box{width:60px;height:60px;background:#4285f4;border-radius:10px;position:absolute;cursor:pointer;} #start{padding:8px 16px;background:#009955;color:white;border:none;border-radius:6px;cursor:pointer;} </style> </head> <body> <div class="info">分数：<span id="score">0</span></div> <div class="info">倒计时：<span id="time">30</span></div> <button id="start">开始游戏</button> <div id="box"></div> <script> let score=0; let time=30; let timer=null; let playing=false; const scoreText=document.getElementById('score'); const timeText=document.getElementById('time'); const box=document.getElementById('box'); const startBtn=document.getElementById('start'); function randomPos(){ box.style.left=Math.random()*(window.innerWidth-70)+'px'; box.style.top=Math.random()*(window.innerHeight-150)+'px'; } function startGame(){ if(playing) return; playing=true; score=0; time=30; scoreText.innerText=score; timeText.innerText=time; randomPos(); if(timer) clearInterval(timer); timer=setInterval(()=>{ time--; timeText.innerText=time; if(time<=0){ clearInterval(timer); playing=false; alert('游戏结束！得分：'+score); } },1000); } box.onclick=function(){ if(!playing) return; score++; scoreText.innerText=score; randomPos(); } startBtn.onclick=startGame; </script> </body> </html>