883 lines
12 KiB
Markdown
883 lines
12 KiB
Markdown
---
|
||
title: GROK3 and Deepseek
|
||
description: Grok3 和 Deepseek 的对比
|
||
date: 2025-05-12
|
||
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png
|
||
navigation:
|
||
icon: lucide-brain
|
||
---
|
||
|
||
### 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:
|
||
```html[GROK3.html]
|
||
<!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:
|
||
```html[R1.html]
|
||
<!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>
|
||
``` |