分享一款100%由AI独立设计的打地鼠小游戏（含源代码）
指令内容：帮我设计一款安卓APP，打地鼠的小游戏
AI的思考链路：
我为你设计了一个完整的打地鼠小游戏！这个游戏具有以下特色功能：🎮 游戏特色核心玩法：
[*]3x3网格的地鼠洞布局
[*]60秒倒计时挑战
[*]点击地鼠得分系统
[*]连击奖励机制
游戏机制：
[*]地鼠随机出现，停留1.5秒后自动消失
[*]基础分数10分，连击可获得额外奖励
[*]游戏难度随时间递增（地鼠出现更频繁）
[*]错过地鼠会重置连击数
视觉设计：
[*]现代渐变背景和毛玻璃效果
[*]响应式设计，适配手机屏幕
[*]流畅的动画和视觉反馈
[*]击中地鼠时的得分动画效果
📱 移动端优化
[*]触摸优化的按钮大小
[*]防止页面滚动干扰游戏
[*]响应式布局适配不同屏幕尺寸
[*]简洁直观的用户界面
🛠 安卓APP开发建议如果要将此游戏转换为原生安卓APP，可以考虑：
[*]技术方案：
[*]使用WebView封装现有HTML5版本
[*]或者用Unity、Flutter重新开发
[*]添加本地存储记录最高分
[*]功能扩展：
[*]添加声音效果和背景音乐
[*]多种游戏模式（无限模式、困难模式）
[*]成就系统和排行榜
[*]不同主题和地鼠角色
[*]性能优化：
[*]优化动画性能
[*]添加haptic反馈（震动）
[*]支持离线游戏
成品：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打地鼠小游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
user-select: none;
}
.game-header {
text-align: center;
margin-bottom: 20px;
color: white;
}
.game-title {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.game-stats {
display: flex;
gap: 30px;
justify-content: center;
margin-bottom: 20px;
flex-wrap: wrap;
}
.stat-item {
background: rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 25px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.3);
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
margin-top: 5px;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
max-width: 350px;
margin-bottom: 30px;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.hole {
width: 90px;
height: 90px;
background: #8B4513;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: all 0.1s ease;
border: 3px solid #654321;
box-shadow: inset 0 -5px 10px rgba(0,0,0,0.3);
}
.hole:active {
transform: scale(0.95);
}
.mole {
width: 70px;
height: 70px;
background: #8B4513;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease;
cursor: pointer;
border: 2px solid #654321;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mole::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
top: 20px;
left: 18px;
}
.mole::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
top: 20px;
right: 18px;
}
.mole.show {
transform: translate(-50%, -50%) scale(1);
}
.mole.hit {
transform: translate(-50%, -50%) scale(0);
background: #ff6b6b;
}
.controls {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
padding: 12px 25px;
font-size: 1.1rem;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
box-shadow: 0 4px 15px rgba(255,107,107,0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,107,107,0.6);
}
.btn-secondary {
background: linear-gradient(45deg, #54a0ff, #2e86de);
color: white;
box-shadow: 0 4px 15px rgba(84,160,255,0.4);
}
.btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(84,160,255,0.6);
}
.game-over {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.game-over.show {
opacity: 1;
visibility: visible;
}
.game-over-content {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
max-width: 90%;
}
.game-over h2 {
color: #333;
margin-bottom: 20px;
font-size: 2rem;
}
.final-score {
font-size: 3rem;
color: #ff6b6b;
font-weight: bold;
margin: 20px 0;
}
.hit-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
font-weight: bold;
color: #ff6b6b;
pointer-events: none;
opacity: 0;
animation: hitEffect 0.6s ease-out;
}
@keyframes hitEffect {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0.5);
}
100% {
opacity: 0;
transform: translate(-50%, -150%) scale(1.2);
}
}
@media (max-width: 480px) {
.game-title {
font-size: 2rem;
}
.game-stats {
gap: 15px;
}
.stat-item {
padding: 8px 15px;
}
.hole {
width: 75px;
height: 75px;
}
.mole {
width: 55px;
height: 55px;
}
.game-board {
max-width: 280px;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="game-header">
<h1 class="game-title">🔨 打地鼠</h1>
<div class="game-stats">
<div class="stat-item">
<div class="stat-label">得分</div>
<div class="stat-value" id="score">0</div>
</div>
<div class="stat-item">
<div class="stat-label">时间</div>
<div class="stat-value" id="time">60</div>
</div>
<div class="stat-item">
<div class="stat-label">连击</div>
<div class="stat-value" id="combo">0</div>
</div>
</div>
</div>
<div class="game-board" id="gameBoard">
<!-- 地鼠洞会通过JavaScript动态生成 -->
</div>
<div class="controls">
<button class="btn btn-primary" id="startBtn">开始游戏</button>
<button class="btn btn-secondary" id="resetBtn">重新开始</button>
</div>
<div class="game-over" id="gameOver">
<div class="game-over-content">
<h2>游戏结束！</h2>
<div class="final-score" id="finalScore">0</div>
<p>恭喜你的成绩！</p>
<button class="btn btn-primary">再来一局</button>
</div>
</div>
<script>
class WhackAMoleGame {
constructor() {
this.score = 0;
this.timeLeft = 60;
this.combo = 0;
this.isGameRunning = false;
this.gameTimer = null;
this.moleTimer = null;
this.holes = [];
this.currentMole = null;
this.moleSpeed = 1000; // 地鼠出现间隔
this.init();
}
init() {
this.createHoles();
this.bindEvents();
this.updateDisplay();
}
createHoles() {
const gameBoard = document.getElementById('gameBoard');
gameBoard.innerHTML = '';
for (let i = 0; i < 9; i++) {
const hole = document.createElement('div');
hole.className = 'hole';
hole.dataset.index = i;
const mole = document.createElement('div');
mole.className = 'mole';
mole.addEventListener('click', () => this.hitMole(i));
hole.appendChild(mole);
gameBoard.appendChild(hole);
this.holes.push({ hole, mole, hasMole: false });
}
}
bindEvents() {
document.getElementById('startBtn').addEventListener('click', () => this.startGame());
document.getElementById('resetBtn').addEventListener('click', () => this.resetGame());
}
startGame() {
if (this.isGameRunning) return;
this.isGameRunning = true;
this.score = 0;
this.timeLeft = 60;
this.combo = 0;
this.updateDisplay();
// 开始计时器
this.gameTimer = setInterval(() => {
this.timeLeft--;
this.updateDisplay();
if (this.timeLeft <= 0) {
this.endGame();
}
}, 1000);
// 开始生成地鼠
this.generateMole();
document.getElementById('startBtn').textContent = '游戏进行中...';
document.getElementById('startBtn').disabled = true;
}
generateMole() {
if (!this.isGameRunning) return;
// 隐藏当前地鼠
if (this.currentMole !== null) {
this.hideMole(this.currentMole);
}
// 随机选择一个洞
const availableHoles = this.holes
.map((hole, index) => ({ hole, index }))
.filter(item => !item.hole.hasMole);
if (availableHoles.length > 0) {
const randomHole = availableHoles;
this.showMole(randomHole.index);
}
// 根据游戏进度调整地鼠出现速度
const speedMultiplier = Math.max(0.3, 1 - (60 - this.timeLeft) / 120);
const nextMoleDelay = this.moleSpeed * speedMultiplier;
this.moleTimer = setTimeout(() => this.generateMole(), nextMoleDelay);
}
showMole(index) {
const hole = this.holes;
hole.hasMole = true;
hole.mole.classList.add('show');
this.currentMole = index;
// 地鼠自动消失
setTimeout(() => {
if (hole.hasMole) {
this.hideMole(index);
this.combo = 0; // 错过地鼠，连击归零
this.updateDisplay();
}
}, 1500);
}
hideMole(index) {
const hole = this.holes;
hole.hasMole = false;
hole.mole.classList.remove('show');
if (this.currentMole === index) {
this.currentMole = null;
}
}
hitMole(index) {
const hole = this.holes;
if (!hole.hasMole || !this.isGameRunning) return;
// 击中地鼠
hole.mole.classList.add('hit');
this.hideMole(index);
// 计分
this.combo++;
const baseScore = 10;
const comboBonus = Math.min(this.combo - 1, 10) * 2;
const points = baseScore + comboBonus;
this.score += points;
// 显示得分效果
this.showHitEffect(hole.hole, `+${points}`);
this.updateDisplay();
// 移除击中效果
setTimeout(() => {
hole.mole.classList.remove('hit');
}, 200);
}
showHitEffect(element, text) {
const effect = document.createElement('div');
effect.className = 'hit-effect';
effect.textContent = text;
element.appendChild(effect);
setTimeout(() => {
element.removeChild(effect);
}, 600);
}
updateDisplay() {
document.getElementById('score').textContent = this.score;
document.getElementById('time').textContent = this.timeLeft;
document.getElementById('combo').textContent = this.combo;
}
endGame() {
this.isGameRunning = false;
if (this.gameTimer) {
clearInterval(this.gameTimer);
this.gameTimer = null;
}
if (this.moleTimer) {
clearTimeout(this.moleTimer);
this.moleTimer = null;
}
// 隐藏所有地鼠
this.holes.forEach((hole, index) => {
if (hole.hasMole) {
this.hideMole(index);
}
});
// 显示游戏结束界面
document.getElementById('finalScore').textContent = this.score;
document.getElementById('gameOver').classList.add('show');
document.getElementById('startBtn').textContent = '开始游戏';
document.getElementById('startBtn').disabled = false;
}
resetGame() {
this.endGame();
this.score = 0;
this.timeLeft = 60;
this.combo = 0;
this.updateDisplay();
document.getElementById('gameOver').classList.remove('show');
}
}
// 全局函数
function restartGame() {
document.getElementById('gameOver').classList.remove('show');
game.resetGame();
}
// 初始化游戏
const game = new WhackAMoleGame();
// 防止页面滚动
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
</script>
</body>
</html> 有点意思 还可以直接运行html？
页:
[1]