12 KiB
12 KiB
title, description, date, img, navigation
| title | description | date | img | navigation | ||
|---|---|---|---|---|---|---|
| GROK3 and Deepseek | Grok3 和 Deepseek 的对比 | 2025-05-12 | https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png |
|
GROK3 and Deepseek
测试了GROK3,简单让做一个HTML小游戏，与R1对比
GROK3界面处理略好，满足所有要求，无BUG。
R1界面略有瑕疵，基本满足所有要求，除了有小BUG。
提示词：
题目：编写一个“打地鼠”网页小游戏
需求描述：
设计一个基于HTML的“打地鼠”（Whack-a-Mole）小游戏，玩家需要在规定时间内点击随机出现的“地鼠”来得分。游戏需要包含以下功能和要求：
页面布局：
游戏区域是一个3x3的网格（共9个格子），每个格子是一个方形的“洞”。
页面顶部显示当前得分（Score）和剩余时间（Time Left）。
页面底部有一个“开始游戏”（Start Game）的按钮。
游戏逻辑：
点击“开始游戏”按钮后，游戏开始，初始时间为30秒。
每隔一段随机时间（0.5秒到1.5秒之间），一个“地鼠”会随机出现在某个格子中，持续显示1秒后消失。
玩家点击出现的“地鼠”可以得分，每只地鼠加1分。
如果点击空白格子，不扣分也不加分。
游戏时间结束后，停止地鼠出现，并弹窗显示最终得分，同时提供“再玩一次”的选项。
样式要求：
游戏区域居中，背景为浅灰色。
每个格子为100x100像素，带有圆角边框，初始为土黄色（#d2b48c）。
地鼠出现时，格子背景变为绿色（#90ee90），并显示文字“鼠！”（字体大小30px，居中）。
得分和时间使用清晰的大字体（建议20px以上），颜色为深蓝色。
“开始游戏”按钮为蓝色背景，白色文字，悬停时变亮。
技术要求：
使用纯HTML、CSS和JavaScript实现，不依赖外部库。
代码注释清晰，说明每个部分的功能。
确保游戏逻辑无明显bug，例如地鼠不会同时出现在多个格子。
提示词：
HTML结构：包含游戏容器、得分显示、时间显示、格子网格和按钮。
CSS样式：网格布局、格子样式、地鼠出现时的动态效果、按钮交互样式。
JavaScript逻辑：随机生成地鼠、计时器、得分计算、游戏状态管理、弹窗提示。
输出要求：
请一次性提供完整的HTML文件代码（包括HTML、CSS和JavaScript），代码需可直接保存为.html文件并在浏览器中运行。代码中需包含注释，体现逻辑清晰度和编程能力。
GROK3:
<!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>
/* 整体页面样式 */
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
/* 顶部得分和时间显示 */
.info {
display: flex;
justify-content: space-between;
width: 320px;
margin-bottom: 20px;
}
.info span {
font-size: 24px;
color: #00008b; /* 深蓝色 */
}
/* 游戏区域网格 */
.game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
background-color: #d3d3d3; /* 浅灰色背景 */
padding: 10px;
border-radius: 10px;
}
/* 每个格子样式 */
.hole {
width: 100px;
height: 100px;
background-color: #d2b48c; /* 土黄色 */
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #000;
cursor: pointer;
transition: background-color 0.2s;
}
/* 地鼠出现时的样式 */
.hole.mole {
background-color: #90ee90; /* 绿色 */
}
/* 开始按钮样式 */
.start-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
color: #fff;
background-color: #4682b4; /* 蓝色 */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.start-btn:hover {
background-color: #5f9ea0; /* 悬停时变亮 */
}
</style>
</head>
<body>
<!-- 顶部信息 -->
<div class="info">
<span id="score">得分: 0</span>
<span id="time-left">剩余时间: 30</span>
</div>
<!-- 游戏区域 -->
<div class="game-board" id="gameBoard">
<!-- 9个格子 -->
<div class="hole" data-id="0"></div>
<div class="hole" data-id="1"></div>
<div class="hole" data-id="2"></div>
<div class="hole" data-id="3"></div>
<div class="hole" data-id="4"></div>
<div class="hole" data-id="5"></div>
<div class="hole" data-id="6"></div>
<div class="hole" data-id="7"></div>
<div class="hole" data-id="8"></div>
</div>
<!-- 开始按钮 -->
<button class="start-btn" id="startBtn">开始游戏</button>
<script>
// 获取DOM元素
const scoreDisplay = document.getElementById('score');
const timeLeftDisplay = document.getElementById('time-left');
const gameBoard = document.getElementById('gameBoard');
const startBtn = document.getElementById('startBtn');
const holes = document.querySelectorAll('.hole');
// 游戏状态变量
let score = 0;
let timeLeft = 30;
let gameActive = false;
let moleTimer = null;
let countdownTimer = null;
// 初始化游戏
function initGame() {
score = 0;
timeLeft = 30;
gameActive = false;
scoreDisplay.textContent = `得分: ${score}`;
timeLeftDisplay.textContent = `剩余时间: ${timeLeft}`;
clearInterval(moleTimer);
clearInterval(countdownTimer);
holes.forEach(hole => {
hole.classList.remove('mole');
hole.textContent = '';
});
}
// 随机选择一个格子显示地鼠
function showMole() {
if (!gameActive) return;
// 移除之前的地鼠
holes.forEach(hole => {
hole.classList.remove('mole');
hole.textContent = '';
});
// 随机选择一个格子
const randomHole = holes[Math.floor(Math.random() * holes.length)];
randomHole.classList.add('mole');
randomHole.textContent = '鼠！';
// 1秒后隐藏地鼠
setTimeout(() => {
randomHole.classList.remove('mole');
randomHole.textContent = '';
}, 1000);
// 随机间隔后再次显示地鼠
const randomInterval = Math.random() * 1000 + 500; // 0.5到1.5秒
moleTimer = setTimeout(showMole, randomInterval);
}
// 点击格子的事件
function hitMole(e) {
const hole = e.target;
if (hole.classList.contains('mole')) {
score++;
scoreDisplay.textContent = `得分: ${score}`;
hole.classList.remove('mole');
hole.textContent = '';
}
}
// 开始游戏
function startGame() {
if (gameActive) return; // 防止重复开始
initGame();
gameActive = true;
startBtn.disabled = true;
// 开始倒计时
countdownTimer = setInterval(() => {
timeLeft--;
timeLeftDisplay.textContent = `剩余时间: ${timeLeft}`;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
// 开始地鼠出现
showMole();
}
// 游戏结束
function endGame() {
gameActive = false;
clearInterval(moleTimer);
clearInterval(countdownTimer);
startBtn.disabled = false;
alert(`游戏结束！你的得分是: ${score}\n点击“确定”再玩一次！`);
initGame();
}
// 事件绑定
startBtn.addEventListener('click', startGame);
holes.forEach(hole => hole.addEventListener('click', hitMole));
// 初始化游戏状态
initGame();
</script>
</body>
</html>
R1:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打地鼠 - Whack a Mole</title>
<style>
/* 页面整体样式 */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
margin: 0;
min-height: 100vh;
}
/* 游戏信息显示区域 */
.game-info {
margin: 20px 0;
font-size: 24px;
color: #00008b;
display: flex;
gap: 30px;
}
/* 游戏主容器（3x3网格） */
#game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
background-color: #cccccc;
padding: 20px;
border-radius: 10px;
}
/* 单个地鼠洞样式 */
.hole {
width: 100px;
height: 100px;
background-color: #d2b48c;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 0; /* 初始隐藏文字 */
transition: background-color 0.2s;
}
/* 地鼠出现时的样式 */
.hole.active {
background-color: #90ee90;
font-size: 30px; /* 显示文字 */
}
/* 开始游戏按钮 */
#start-btn {
margin-top: 30px;
padding: 12px 30px;
background-color: #0000ff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.2s;
}
#start-btn:hover {
background-color: #3333ff;
}
#start-btn:disabled {
background-color: #888888;
cursor: not-allowed;
}
</style>
</head>
<body>
<!-- 游戏信息显示 -->
<div class="game-info">
<div>得分：<span id="score">0</span></div>
<div>剩余时间：<span id="timer">30</span>秒</div>
</div>
<!-- 游戏主区域 -->
<div id="game-board">
<!-- 生成9个地鼠洞 -->
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
</div>
<!-- 控制按钮 -->
<button id="start-btn">开始游戏</button>
<script>
// 游戏全局变量
let score = 0;
let timeLeft = 30;
let gameActive = false;
let moleTimer = null;
let countdownTimer = null;
// DOM元素引用
const holes = document.querySelectorAll('.hole');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
const startBtn = document.getElementById('start-btn');
// 初始化点击事件监听
holes.forEach(hole => {
hole.addEventListener('click', () => {
if (!gameActive) return;
// 点击有效的地鼠
if (hole.classList.contains('active')) {
score++;
scoreDisplay.textContent = score;
hole.classList.remove('active');
hole.textContent = '';
}
});
});
// 开始游戏按钮功能
startBtn.addEventListener('click', () => {
if (!gameActive) {
startGame();
}
});
// 游戏主逻辑
function startGame() {
// 重置游戏状态
gameActive = true;
score = 0;
timeLeft = 30;
scoreDisplay.textContent = score;
timerDisplay.textContent = timeLeft;
startBtn.disabled = true;
// 清除已有定时器
clearInterval(countdownTimer);
clearTimeout(moleTimer);
// 启动倒计时
countdownTimer = setInterval(() => {
timeLeft--;
timerDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
endGame();
}
}, 1000);
// 首次生成地鼠
scheduleMole();
}
// 随机生成地鼠
function showMole() {
// 查找所有非活动状态的洞
const availableHoles = Array.from(holes).filter(hole => !hole.classList.contains('active'));
if (availableHoles.length > 0) {
const randomHole = availableHoles[Math.floor(Math.random() * availableHoles.length)];
randomHole.classList.add('active');
randomHole.textContent = '鼠！';
// 自动隐藏地鼠
setTimeout(() => {
randomHole.classList.remove('active');
randomHole.textContent = '';
}, 1000);
}
}
// 调度下一个地鼠生成
function scheduleMole() {
if (!gameActive) return;
// 随机间隔（0.5-1.5秒）
const delay = Math.random() * 1000 + 500;
moleTimer = setTimeout(() => {
showMole();
scheduleMole();
}, delay);
}
// 结束游戏处理
function endGame() {
gameActive = false;
clearInterval(countdownTimer);
clearTimeout(moleTimer);
startBtn.disabled = false;
// 显示最终得分
const restart = confirm(`游戏结束！最终得分：${score}\n再玩一次？`);
if (restart) {
startGame();
}
}
</script>
</body>
</html>