我让DeepSeek v3帮我打工，做了一个数学小游戏，现在优化过的V3编程能力已经可以比肩R1了
<!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 {
font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
background-color: #f0f8ff;
text-align: center;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: #ff6b6b;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.subtitle {
color: #4d96ff;
margin-bottom: 30px;
}
.character {
width: 100px;
height: 100px;
margin: 0 auto 20px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="20" fill="%23FFD166"/><circle cx="50" cy="70" r="30" fill="%23FF6B6B"/><circle cx="40" cy="25" r="3" fill="%23333"/><circle cx="60" cy="25" r="3" fill="%23333"/><path d="M45 35 Q50 40 55 35" stroke="%23333" stroke-width="2" fill="none"/><rect x="40" y="60" width="20" height="20" fill="%234D96FF"/></svg>');
background-size: contain;
transition: transform 0.3s;
}
.character:hover {
transform: scale(1.1);
}
.question-container {
background-color: #e9f7fe;
border-radius: 10px;
padding: 15px;
margin-bottom: 20px;
position: relative;
}
.question {
font-size: 24px;
margin: 10px 0;
}
.number {
display: inline-block;
font-size: 28px;
font-weight: bold;
color: #4d96ff;
margin: 0 5px;
cursor: pointer;
transition: all 0.3s;
}
.operator {
font-size: 28px;
margin: 0 5px;
}
.answer-area {
display: inline-block;
min-width: 60px;
height: 40px;
font-size: 24px;
text-align: center;
border: 2px solid #4d96ff;
border-radius: 5px;
margin: 0 5px;
vertical-align: middle;
line-height: 40px;
position: relative;
overflow: hidden;
}
.number-pad {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin: 15px auto;
max-width: 300px;
}
.number-btn {
background-color: #4d96ff;
color: white;
border: none;
border-radius: 5px;
font-size: 20px;
padding: 10px;
cursor: pointer;
transition: all 0.2s;
}
.number-btn:hover {
background-color: #3a7bd5;
transform: scale(1.05);
}
.number-btn:active {
transform: scale(0.95);
}
.btn {
background-color: #4d96ff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin: 5px;
}
.btn:hover {
background-color: #3a7bd5;
}
.btn-check {
background-color: #06d6a0;
}
.btn-check:hover {
background-color: #05b589;
}
.btn-next {
background-color: #ff9a3c;
}
.btn-next:hover {
background-color: #e07e1f;
}
.btn-clear {
background-color: #ff6b6b;
}
.btn-clear:hover {
background-color: #e05555;
}
.progress {
height: 10px;
background-color: #e0e0e0;
border-radius: 5px;
margin: 20px 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #4d96ff;
width: 0%;
transition: width 0.5s;
}
.score {
font-size: 18px;
font-weight: bold;
color: #ff6b6b;
margin: 10px 0;
}
.feedback {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
min-height: 27px;
}
.correct {
color: #06d6a0;
}
.incorrect {
color: #ff6b6b;
}
.celebration {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
display: none;
}
.celebration h2 {
font-size: 36px;
color: #ff6b6b;
margin-bottom: 20px;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
animation: fall 3s linear infinite;
}
@keyframes fall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes fly {
0% {
transform: scale(1) translate(0, 0);
opacity: 1;
}
100% {
transform: scale(0.5) translate(var(--tx), var(--ty));
opacity: 0;
}
}
.bounce {
animation: bounce 0.5s ease 5;
}
.flying-number {
position: absolute;
font-size: 24px;
font-weight: bold;
color: #4d96ff;
animation: fly 0.3s ease-out forwards;
z-index: 10;
}
</style>
</head>
<body>
<div class="container">
<h1>数学小战士闯关</h1>
<p class="subtitle">打败数学怪兽，成为数学小勇士！</p>
<div class="character" id="character"></div>
<div class="progress">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="score" id="score">得分: 0/10</div>
<div class="question-container">
<div class="question" id="question">
<span class="number" id="num1">5</span>
<span class="operator" id="operator">+</span>
<span class="number" id="num2">3</span>
<span class="operator">=</span>
<div class="answer-area" id="answer-area"></div>
</div>
</div>
<div class="number-pad">
<button class="number-btn" data-number="1">1</button>
<button class="number-btn" data-number="2">2</button>
<button class="number-btn" data-number="3">3</button>
<button class="number-btn" data-number="4">4</button>
<button class="number-btn" data-number="5">5</button>
<button class="number-btn" data-number="6">6</button>
<button class="number-btn" data-number="7">7</button>
<button class="number-btn" data-number="8">8</button>
<button class="number-btn" data-number="9">9</button>
<button class="number-btn" data-number="0">0</button>
<button class="number-btn btn-clear" id="clear-btn">清除</button>
</div>
<div class="feedback" id="feedback"></div>
<button class="btn btn-check" id="check-btn">检查答案</button>
<button class="btn btn-next" id="next-btn" disabled>下一题</button>
</div>
<div class="celebration" id="celebration">
<h2>恭喜你完成所有题目！</h2>
<p id="final-score"></p>
<button class="btn" id="restart-btn">再玩一次</button>
</div>
<script>
// 游戏变量
let currentQuestion = 0;
let score = 0;
let questions = [];
let userAnswer = '';
// DOM元素
const num1Element = document.getElementById('num1');
const num2Element = document.getElementById('num2');
const operatorElement = document.getElementById('operator');
const answerArea = document.getElementById('answer-area');
const questionElement = document.getElementById('question');
const checkBtn = document.getElementById('check-btn');
const nextBtn = document.getElementById('next-btn');
const clearBtn = document.getElementById('clear-btn');
const feedbackElement = document.getElementById('feedback');
const scoreElement = document.getElementById('score');
const progressBar = document.getElementById('progress-bar');
const celebrationElement = document.getElementById('celebration');
const finalScoreElement = document.getElementById('final-score');
const restartBtn = document.getElementById('restart-btn');
const characterElement = document.getElementById('character');
const numberBtns = document.querySelectorAll('.number-btn[data-number]');
// 生成10道20以内的加减法题目
function generateQuestions() {
questions = [];
for (let i = 0; i < 10; i++) {
const isAddition = Math.random() > 0.5;
let num1, num2, answer;
if (isAddition) {
num1 = Math.floor(Math.random() * 10) + 1;
num2 = Math.floor(Math.random() * (10 - num1)) + 1;
answer = num1 + num2;
questions.push({
num1: num1,
num2: num2,
operator: '+',
answer: answer
});
} else {
num1 = Math.floor(Math.random() * 10) + 10;
num2 = Math.floor(Math.random() * num1) + 1;
answer = num1 - num2;
questions.push({
num1: num1,
num2: num2,
operator: '-',
answer: answer
});
}
}
}
// 显示当前题目
function showQuestion() {
if (currentQuestion >= questions.length) {
endGame();
return;
}
const question = questions[currentQuestion];
num1Element.textContent = question.num1;
num2Element.textContent = question.num2;
operatorElement.textContent = question.operator;
answerArea.innerHTML = '';
userAnswer = '';
feedbackElement.textContent = '';
feedbackElement.className = 'feedback';
nextBtn.disabled = true;
// 更新进度条
progressBar.style.width = `${(currentQuestion / questions.length) * 100}%`;
}
// 检查答案
function checkAnswer() {
const question = questions[currentQuestion];
if (userAnswer === '') {
feedbackElement.textContent = '请输入答案！';
feedbackElement.className = 'feedback incorrect';
return;
}
const answerNum = parseInt(userAnswer);
if (answerNum === question.answer) {
feedbackElement.textContent = '正确！太棒了！';
feedbackElement.className = 'feedback correct';
score++;
scoreElement.textContent = `得分: ${score}/${questions.length}`;
characterElement.style.transform = 'scale(1.2)';
setTimeout(() => {
characterElement.style.transform = 'scale(1)';
}, 300);
} else {
feedbackElement.textContent = `不对哦，正确答案是 ${question.answer}。再试试看！`;
feedbackElement.className = 'feedback incorrect';
}
checkBtn.disabled = true;
nextBtn.disabled = false;
}
// 下一题
function nextQuestion() {
currentQuestion++;
checkBtn.disabled = false;
showQuestion();
}
// 游戏结束
function endGame() {
finalScoreElement.textContent = `你的最终得分是: ${score}/${questions.length}`;
celebrationElement.style.display = 'flex';
// 创建彩色纸屑效果
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.left = `${Math.random() * 100}%`;
confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
confetti.style.animationDelay = `${Math.random() * 2}s`;
celebrationElement.appendChild(confetti);
}
}
// 重新开始游戏
function restartGame() {
currentQuestion = 0;
score = 0;
scoreElement.textContent = `得分: ${score}/${questions.length}`;
celebrationElement.style.display = 'none';
celebrationElement.innerHTML = `
<h2>恭喜你完成所有题目！</h2>
<p id="final-score"></p>
<button class="btn" id="restart-btn">再玩一次</button>
`;
document.getElementById('restart-btn').addEventListener('click', restartGame);
generateQuestions();
showQuestion();
}
// 数字点击动画
function animateNumber(element) {
element.classList.add('bounce');
setTimeout(() => {
element.classList.remove('bounce');
}, 2500); // 5次缓动，每次0.5秒
}
// 数字按钮点击处理
function handleNumberClick(number) {
if (userAnswer.length >= 2) return; // 限制最多两位数
userAnswer += number;
updateAnswerDisplay();
// 创建飞行数字效果
const btn = document.querySelector(`.number-btn[data-number="${number}"]`);
const btnRect = btn.getBoundingClientRect();
const answerRect = answerArea.getBoundingClientRect();
const flyingNum = document.createElement('div');
flyingNum.className = 'flying-number';
flyingNum.textContent = number;
flyingNum.style.left = `${btnRect.left}px`;
flyingNum.style.top = `${btnRect.top}px`;
// 计算飞行路径
const tx = answerRect.left - btnRect.left + (answerRect.width / 2) - (btnRect.width / 2);
const ty = answerRect.top - btnRect.top;
flyingNum.style.setProperty('--tx', `${tx}px`);
flyingNum.style.setProperty('--ty', `${ty}px`);
document.body.appendChild(flyingNum);
// 动画结束后移除元素
setTimeout(() => {
flyingNum.remove();
}, 300);
}
// 更新答案显示
function updateAnswerDisplay() {
answerArea.innerHTML = '';
for (let i = 0; i < userAnswer.length; i++) {
const numSpan = document.createElement('span');
numSpan.textContent = userAnswer[i];
numSpan.style.display = 'inline-block';
numSpan.style.animation = 'none';
answerArea.appendChild(numSpan);
// 添加数字进入动画
setTimeout(() => {
numSpan.style.animation = 'bounce 0.3s ease';
setTimeout(() => {
numSpan.style.animation = 'none';
}, 300);
}, i * 100);
}
}
// 清除答案
function clearAnswer() {
userAnswer = '';
answerArea.innerHTML = '';
}
// 事件监听
num1Element.addEventListener('click', () => animateNumber(num1Element));
num2Element.addEventListener('click', () => animateNumber(num2Element));
checkBtn.addEventListener('click', checkAnswer);
nextBtn.addEventListener('click', nextQuestion);
clearBtn.addEventListener('click', clearAnswer);
numberBtns.forEach(btn => {
btn.addEventListener('click', () => {
handleNumberClick(btn.dataset.number);
});
});
// 键盘支持
document.addEventListener('keydown', (e) => {
if (e.key >= '0' && e.key <= '9') {
handleNumberClick(e.key);
} else if (e.key === 'Enter') {
if (nextBtn.disabled) {
checkAnswer();
} else {
nextQuestion();
}
} else if (e.key === 'Backspace' || e.key === 'Delete') {
clearAnswer();
}
});
// 初始化游戏
generateQuestions();
showQuestion();
</script>
</body>
</html>复制代码到一个HTML文件，然后使用浏览器打开，不用HTML编辑块是因为这个不支持JS