《AI 小游戏开发(2)|带倒计时的 30 秒点方块,AI 生成完整游戏)》
目录一、本课目标二、给 AI 的超详细提示词三、完整代码一、本课目标学会如何给 AI 描述带时间的游戏实现倒计时、游戏结束制作更完整的小游戏逻辑二、给 AI 的超详细提示词plaintext请制作一个网页小游戏30秒点击方块挑战 规则 1. 30秒内点击随机方块加分每点一次 1 分 2. 页面显示当前分数 剩余时间 3. 时间到 0 秒游戏结束 4. 时间到后弹出最终得分 5. 提供重新开始按钮 6. 界面简洁好看 7. 代码完整无错误可直接复制运行 输出完整 HTML 文件。三、完整代码html预览!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title30秒挑战/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 classinfo分数span idscore0/span/div div classinfo倒计时span idtime30/span/div button idstart开始游戏/button div idbox/div script let score0; let time30; let timernull; let playingfalse; const scoreTextdocument.getElementById(score); const timeTextdocument.getElementById(time); const boxdocument.getElementById(box); const startBtndocument.getElementById(start); function randomPos(){ box.style.leftMath.random()*(window.innerWidth-70)px; box.style.topMath.random()*(window.innerHeight-150)px; } function startGame(){ if(playing) return; playingtrue; score0; time30; scoreText.innerTextscore; timeText.innerTexttime; randomPos(); if(timer) clearInterval(timer); timersetInterval((){ time--; timeText.innerTexttime; if(time0){ clearInterval(timer); playingfalse; alert(游戏结束得分score); } },1000); } box.onclickfunction(){ if(!playing) return; score; scoreText.innerTextscore; randomPos(); } startBtn.onclickstartGame; /script /body /html