登录发现更多内容
发帖
 找回密码
 立即注册
搜索
3 1 1
返回列表 发新帖

分享一款100%由AI独立设计的打地鼠小游戏（含源代码）

发布新帖
AI软件 306 3 2025-5-30 19:23:42
指令内容：
帮我设计一款安卓APP，打地鼠的小游戏

AI的思考链路：
我为你设计了一个完整的打地鼠小游戏！这个游戏具有以下特色功能：
🎮 游戏特色
核心玩法：
  • 3x3网格的地鼠洞布局
  • 60秒倒计时挑战
  • 点击地鼠得分系统
  • 连击奖励机制
游戏机制：
  • 地鼠随机出现，停留1.5秒后自动消失
  • 基础分数10分，连击可获得额外奖励
  • 游戏难度随时间递增（地鼠出现更频繁）
  • 错过地鼠会重置连击数
视觉设计：
  • 现代渐变背景和毛玻璃效果
  • 响应式设计，适配手机屏幕
  • 流畅的动画和视觉反馈
  • 击中地鼠时的得分动画效果
📱 移动端优化
  • 触摸优化的按钮大小
  • 防止页面滚动干扰游戏
  • 响应式布局适配不同屏幕尺寸
  • 简洁直观的用户界面
🛠 安卓APP开发建议
如果要将此游戏转换为原生安卓APP，可以考虑：
  • 技术方案：
    • 使用WebView封装现有HTML5版本
    • 或者用Unity、Flutter重新开发
    • 添加本地存储记录最高分
  • 功能扩展：
    • 添加声音效果和背景音乐
    • 多种游戏模式（无限模式、困难模式）
    • 成就系统和排行榜
    • 不同主题和地鼠角色
  • 性能优化：
    • 优化动画性能
    • 添加haptic反馈（震动）
    • 支持离线游戏

成品：
上传的附件： dadishu.html (16.03 KB) 运行一下

AI
──── 1人觉得很赞 ────

使用道具 举报

link 楼主

举报

2025-5-30 19:36:26
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>打地鼠小游戏</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         
  14.         body {
  15.             font-family: 'Microsoft YaHei', sans-serif;
  16.             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  17.             min-height: 100vh;
  18.             display: flex;
  19.             flex-direction: column;
  20.             align-items: center;
  21.             padding: 20px;
  22.             user-select: none;
  23.         }
  24.         
  25.         .game-header {
  26.             text-align: center;
  27.             margin-bottom: 20px;
  28.             color: white;
  29.         }
  30.         
  31.         .game-title {
  32.             font-size: 2.5rem;
  33.             margin-bottom: 10px;
  34.             text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  35.         }
  36.         
  37.         .game-stats {
  38.             display: flex;
  39.             gap: 30px;
  40.             justify-content: center;
  41.             margin-bottom: 20px;
  42.             flex-wrap: wrap;
  43.         }
  44.         
  45.         .stat-item {
  46.             background: rgba(255,255,255,0.2);
  47.             padding: 10px 20px;
  48.             border-radius: 25px;
  49.             backdrop-filter: blur(10px);
  50.             border: 1px solid rgba(255,255,255,0.3);
  51.         }
  52.         
  53.         .stat-label {
  54.             font-size: 0.9rem;
  55.             opacity: 0.8;
  56.         }
  57.         
  58.         .stat-value {
  59.             font-size: 1.5rem;
  60.             font-weight: bold;
  61.             margin-top: 5px;
  62.         }
  63.         
  64.         .game-board {
  65.             display: grid;
  66.             grid-template-columns: repeat(3, 1fr);
  67.             gap: 15px;
  68.             max-width: 350px;
  69.             margin-bottom: 30px;
  70.             padding: 20px;
  71.             background: rgba(255,255,255,0.1);
  72.             border-radius: 20px;
  73.             backdrop-filter: blur(10px);
  74.             border: 1px solid rgba(255,255,255,0.2);
  75.         }
  76.         
  77.         .hole {
  78.             width: 90px;
  79.             height: 90px;
  80.             background: #8B4513;
  81.             border-radius: 50%;
  82.             position: relative;
  83.             cursor: pointer;
  84.             transition: all 0.1s ease;
  85.             border: 3px solid #654321;
  86.             box-shadow: inset 0 -5px 10px rgba(0,0,0,0.3);
  87.         }
  88.         
  89.         .hole:active {
  90.             transform: scale(0.95);
  91.         }
  92.         
  93.         .mole {
  94.             width: 70px;
  95.             height: 70px;
  96.             background: #8B4513;
  97.             border-radius: 50%;
  98.             position: absolute;
  99.             top: 50%;
  100.             left: 50%;
  101.             transform: translate(-50%, -50%) scale(0);
  102.             transition: transform 0.2s ease;
  103.             cursor: pointer;
  104.             border: 2px solid #654321;
  105.             box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  106.         }
  107.         
  108.         .mole::before {
  109.             content: '';
  110.             position: absolute;
  111.             width: 15px;
  112.             height: 15px;
  113.             background: #000;
  114.             border-radius: 50%;
  115.             top: 20px;
  116.             left: 18px;
  117.         }
  118.         
  119.         .mole::after {
  120.             content: '';
  121.             position: absolute;
  122.             width: 15px;
  123.             height: 15px;
  124.             background: #000;
  125.             border-radius: 50%;
  126.             top: 20px;
  127.             right: 18px;
  128.         }
  129.         
  130.         .mole.show {
  131.             transform: translate(-50%, -50%) scale(1);
  132.         }
  133.         
  134.         .mole.hit {
  135.             transform: translate(-50%, -50%) scale(0);
  136.             background: #ff6b6b;
  137.         }
  138.         
  139.         .controls {
  140.             display: flex;
  141.             gap: 15px;
  142.             flex-wrap: wrap;
  143.             justify-content: center;
  144.         }
  145.         
  146.         .btn {
  147.             padding: 12px 25px;
  148.             font-size: 1.1rem;
  149.             border: none;
  150.             border-radius: 25px;
  151.             cursor: pointer;
  152.             transition: all 0.3s ease;
  153.             font-weight: bold;
  154.             text-transform: uppercase;
  155.             letter-spacing: 1px;
  156.         }
  157.         
  158.         .btn-primary {
  159.             background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  160.             color: white;
  161.             box-shadow: 0 4px 15px rgba(255,107,107,0.4);
  162.         }
  163.         
  164.         .btn-primary:hover {
  165.             transform: translateY(-2px);
  166.             box-shadow: 0 6px 20px rgba(255,107,107,0.6);
  167.         }
  168.         
  169.         .btn-secondary {
  170.             background: linear-gradient(45deg, #54a0ff, #2e86de);
  171.             color: white;
  172.             box-shadow: 0 4px 15px rgba(84,160,255,0.4);
  173.         }
  174.         
  175.         .btn-secondary:hover {
  176.             transform: translateY(-2px);
  177.             box-shadow: 0 6px 20px rgba(84,160,255,0.6);
  178.         }
  179.         
  180.         .game-over {
  181.             position: fixed;
  182.             top: 0;
  183.             left: 0;
  184.             width: 100%;
  185.             height: 100%;
  186.             background: rgba(0,0,0,0.8);
  187.             display: flex;
  188.             justify-content: center;
  189.             align-items: center;
  190.             opacity: 0;
  191.             visibility: hidden;
  192.             transition: all 0.3s ease;
  193.         }
  194.         
  195.         .game-over.show {
  196.             opacity: 1;
  197.             visibility: visible;
  198.         }
  199.         
  200.         .game-over-content {
  201.             background: white;
  202.             padding: 40px;
  203.             border-radius: 20px;
  204.             text-align: center;
  205.             box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  206.             max-width: 90%;
  207.         }
  208.         
  209.         .game-over h2 {
  210.             color: #333;
  211.             margin-bottom: 20px;
  212.             font-size: 2rem;
  213.         }
  214.         
  215.         .final-score {
  216.             font-size: 3rem;
  217.             color: #ff6b6b;
  218.             font-weight: bold;
  219.             margin: 20px 0;
  220.         }
  221.         
  222.         .hit-effect {
  223.             position: absolute;
  224.             top: 50%;
  225.             left: 50%;
  226.             transform: translate(-50%, -50%);
  227.             font-size: 2rem;
  228.             font-weight: bold;
  229.             color: #ff6b6b;
  230.             pointer-events: none;
  231.             opacity: 0;
  232.             animation: hitEffect 0.6s ease-out;
  233.         }
  234.         
  235.         @keyframes hitEffect {
  236.             0% {
  237.                 opacity: 1;
  238.                 transform: translate(-50%, -50%) scale(0.5);
  239.             }
  240.             100% {
  241.                 opacity: 0;
  242.                 transform: translate(-50%, -150%) scale(1.2);
  243.             }
  244.         }
  245.         
  246.         @media (max-width: 480px) {
  247.             .game-title {
  248.                 font-size: 2rem;
  249.             }
  250.             
  251.             .game-stats {
  252.                 gap: 15px;
  253.             }
  254.             
  255.             .stat-item {
  256.                 padding: 8px 15px;
  257.             }
  258.             
  259.             .hole {
  260.                 width: 75px;
  261.                 height: 75px;
  262.             }
  263.             
  264.             .mole {
  265.                 width: 55px;
  266.                 height: 55px;
  267.             }
  268.             
  269.             .game-board {
  270.                 max-width: 280px;
  271.                 gap: 10px;
  272.             }
  273.         }
  274.     </style>
  275. </head>
  276. <body>
  277.     <div class="game-header">
  278.         <h1 class="game-title">🔨 打地鼠</h1>
  279.         <div class="game-stats">
  280.             <div class="stat-item">
  281.                 <div class="stat-label">得分</div>
  282.                 <div class="stat-value" id="score">0</div>
  283.             </div>
  284.             <div class="stat-item">
  285.                 <div class="stat-label">时间</div>
  286.                 <div class="stat-value" id="time">60</div>
  287.             </div>
  288.             <div class="stat-item">
  289.                 <div class="stat-label">连击</div>
  290.                 <div class="stat-value" id="combo">0</div>
  291.             </div>
  292.         </div>
  293.     </div>
  294.    
  295.     <div class="game-board" id="gameBoard">
  296.         <!-- 地鼠洞会通过JavaScript动态生成 -->
  297.     </div>
  298.    
  299.     <div class="controls">
  300.         <button class="btn btn-primary" id="startBtn">开始游戏</button>
  301.         <button class="btn btn-secondary" id="resetBtn">重新开始</button>
  302.     </div>
  303.    
  304.     <div class="game-over" id="gameOver">
  305.         <div class="game-over-content">
  306.             <h2>游戏结束！</h2>
  307.             <div class="final-score" id="finalScore">0</div>
  308.             <p>恭喜你的成绩！</p>
  309.             <button class="btn btn-primary">再来一局</button>
  310.         </div>
  311.     </div>

  313.     <script>
  314.         class WhackAMoleGame {
  315.             constructor() {
  316.                 this.score = 0;
  317.                 this.timeLeft = 60;
  318.                 this.combo = 0;
  319.                 this.isGameRunning = false;
  320.                 this.gameTimer = null;
  321.                 this.moleTimer = null;
  322.                 this.holes = [];
  323.                 this.currentMole = null;
  324.                 this.moleSpeed = 1000; // 地鼠出现间隔
  325.                
  326.                 this.init();
  327.             }
  328.             
  329.             init() {
  330.                 this.createHoles();
  331.                 this.bindEvents();
  332.                 this.updateDisplay();
  333.             }
  334.             
  335.             createHoles() {
  336.                 const gameBoard = document.getElementById('gameBoard');
  337.                 gameBoard.innerHTML = '';
  338.                
  339.                 for (let i = 0; i < 9; i++) {
  340.                     const hole = document.createElement('div');
  341.                     hole.className = 'hole';
  342.                     hole.dataset.index = i;
  343.                     
  344.                     const mole = document.createElement('div');
  345.                     mole.className = 'mole';
  346.                     mole.addEventListener('click', () => this.hitMole(i));
  347.                     
  348.                     hole.appendChild(mole);
  349.                     gameBoard.appendChild(hole);
  350.                     this.holes.push({ hole, mole, hasMole: false });
  351.                 }
  352.             }
  353.             
  354.             bindEvents() {
  355.                 document.getElementById('startBtn').addEventListener('click', () => this.startGame());
  356.                 document.getElementById('resetBtn').addEventListener('click', () => this.resetGame());
  357.             }
  358.             
  359.             startGame() {
  360.                 if (this.isGameRunning) return;
  361.                
  362.                 this.isGameRunning = true;
  363.                 this.score = 0;
  364.                 this.timeLeft = 60;
  365.                 this.combo = 0;
  366.                 this.updateDisplay();
  367.                
  368.                 // 开始计时器
  369.                 this.gameTimer = setInterval(() => {
  370.                     this.timeLeft--;
  371.                     this.updateDisplay();
  372.                     
  373.                     if (this.timeLeft <= 0) {
  374.                         this.endGame();
  375.                     }
  376.                 }, 1000);
  377.                
  378.                 // 开始生成地鼠
  379.                 this.generateMole();
  380.                
  381.                 document.getElementById('startBtn').textContent = '游戏进行中...';
  382.                 document.getElementById('startBtn').disabled = true;
  383.             }
  384.             
  385.             generateMole() {
  386.                 if (!this.isGameRunning) return;
  387.                
  388.                 // 隐藏当前地鼠
  389.                 if (this.currentMole !== null) {
  390.                     this.hideMole(this.currentMole);
  391.                 }
  392.                
  393.                 // 随机选择一个洞
  394.                 const availableHoles = this.holes
  395.                     .map((hole, index) => ({ hole, index }))
  396.                     .filter(item => !item.hole.hasMole);
  397.                
  398.                 if (availableHoles.length > 0) {
  399.                     const randomHole = availableHoles[Math.floor(Math.random() * availableHoles.length)];
  400.                     this.showMole(randomHole.index);
  401.                 }
  402.                
  403.                 // 根据游戏进度调整地鼠出现速度
  404.                 const speedMultiplier = Math.max(0.3, 1 - (60 - this.timeLeft) / 120);
  405.                 const nextMoleDelay = this.moleSpeed * speedMultiplier;
  406.                
  407.                 this.moleTimer = setTimeout(() => this.generateMole(), nextMoleDelay);
  408.             }
  409.             
  410.             showMole(index) {
  411.                 const hole = this.holes[index];
  412.                 hole.hasMole = true;
  413.                 hole.mole.classList.add('show');
  414.                 this.currentMole = index;
  415.                
  416.                 // 地鼠自动消失
  417.                 setTimeout(() => {
  418.                     if (hole.hasMole) {
  419.                         this.hideMole(index);
  420.                         this.combo = 0; // 错过地鼠，连击归零
  421.                         this.updateDisplay();
  422.                     }
  423.                 }, 1500);
  424.             }
  425.             
  426.             hideMole(index) {
  427.                 const hole = this.holes[index];
  428.                 hole.hasMole = false;
  429.                 hole.mole.classList.remove('show');
  430.                 if (this.currentMole === index) {
  431.                     this.currentMole = null;
  432.                 }
  433.             }
  434.             
  435.             hitMole(index) {
  436.                 const hole = this.holes[index];
  437.                 if (!hole.hasMole || !this.isGameRunning) return;
  438.                
  439.                 // 击中地鼠
  440.                 hole.mole.classList.add('hit');
  441.                 this.hideMole(index);
  442.                
  443.                 // 计分
  444.                 this.combo++;
  445.                 const baseScore = 10;
  446.                 const comboBonus = Math.min(this.combo - 1, 10) * 2;
  447.                 const points = baseScore + comboBonus;
  448.                 this.score += points;
  449.                
  450.                 // 显示得分效果
  451.                 this.showHitEffect(hole.hole, `+${points}`);
  452.                
  453.                 this.updateDisplay();
  454.                
  455.                 // 移除击中效果
  456.                 setTimeout(() => {
  457.                     hole.mole.classList.remove('hit');
  458.                 }, 200);
  459.             }
  460.             
  461.             showHitEffect(element, text) {
  462.                 const effect = document.createElement('div');
  463.                 effect.className = 'hit-effect';
  464.                 effect.textContent = text;
  465.                 element.appendChild(effect);
  466.                
  467.                 setTimeout(() => {
  468.                     element.removeChild(effect);
  469.                 }, 600);
  470.             }
  471.             
  472.             updateDisplay() {
  473.                 document.getElementById('score').textContent = this.score;
  474.                 document.getElementById('time').textContent = this.timeLeft;
  475.                 document.getElementById('combo').textContent = this.combo;
  476.             }
  477.             
  478.             endGame() {
  479.                 this.isGameRunning = false;
  480.                
  481.                 if (this.gameTimer) {
  482.                     clearInterval(this.gameTimer);
  483.                     this.gameTimer = null;
  484.                 }
  485.                
  486.                 if (this.moleTimer) {
  487.                     clearTimeout(this.moleTimer);
  488.                     this.moleTimer = null;
  489.                 }
  490.                
  491.                 // 隐藏所有地鼠
  492.                 this.holes.forEach((hole, index) => {
  493.                     if (hole.hasMole) {
  494.                         this.hideMole(index);
  495.                     }
  496.                 });
  497.                
  498.                 // 显示游戏结束界面
  499.                 document.getElementById('finalScore').textContent = this.score;
  500.                 document.getElementById('gameOver').classList.add('show');
  501.                
  502.                 document.getElementById('startBtn').textContent = '开始游戏';
  503.                 document.getElementById('startBtn').disabled = false;
  504.             }
  505.             
  506.             resetGame() {
  507.                 this.endGame();
  508.                 this.score = 0;
  509.                 this.timeLeft = 60;
  510.                 this.combo = 0;
  511.                 this.updateDisplay();
  512.                 document.getElementById('gameOver').classList.remove('show');
  513.             }
  514.         }
  515.         
  516.         // 全局函数
  517.         function restartGame() {
  518.             document.getElementById('gameOver').classList.remove('show');
  519.             game.resetGame();
  520.         }
  521.         
  522.         // 初始化游戏
  523.         const game = new WhackAMoleGame();
  524.         
  525.         // 防止页面滚动
  526.         document.addEventListener('touchmove', function(e) {
  527.             e.preventDefault();
  528.         }, { passive: false });
  529.     </script>
  530. </body>
  531. </html>
复制代码
回复
楠波万

举报

3 天前
有点意思
回复
kallen

举报

昨天 15:06
还可以直接运行html？
回复
您需要登录后才可以回帖 立即登录
高级模式

© BigSeek.Com Sitemap| Archiver | Tag | New | 苏ICP备2023012627号