---
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>
```