<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24点数学游戏 - 小学版</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Comic Sans MS', '微软雅黑', sans-serif;
}
body {
background-color: #f0f9ff;
background-image: radial-gradient(#b3e5fc 1px, transparent 1px);
background-size: 30px 30px;
color: #333;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 100, 200, 0.2);
padding: 30px;
border: 8px solid #4fc3f7;
position: relative;
overflow: hidden;
}
.header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 4px dashed #4fc3f7;
position: relative;
}
h1 {
color: #0288d1;
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 3px 3px 0 #b3e5fc;
}
.subtitle {
color: #0277bd;
font-size: 1.4rem;
margin-bottom: 20px;
}
.game-info {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 25px;
background-color: #e1f5fe;
padding: 15px;
border-radius: 15px;
border: 3px solid #4fc3f7;
}
.info-item {
text-align: center;
flex: 1;
min-width: 150px;
margin: 5px;
}
.info-label {
font-weight: bold;
color: #01579b;
font-size: 1.1rem;
}
.info-value {
font-size: 1.8rem;
color: #0288d1;
font-weight: bold;
}
.game-area {
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 30px;
}
.numbers-section {
flex: 1;
min-width: 300px;
background-color: #e1f5fe;
border-radius: 15px;
padding: 20px;
border: 4px solid #4fc3f7;
box-shadow: 0 5px 15px rgba(0, 150, 255, 0.2);
}
.input-section {
flex: 1;
min-width: 300px;
background-color: #f1f8e9;
border-radius: 15px;
padding: 20px;
border: 4px solid #9ccc65;
box-shadow: 0 5px 15px rgba(140, 195, 100, 0.2);
}
.section-title {
color: #01579b;
font-size: 1.5rem;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 3px solid;
display: flex;
align-items: center;
}
.numbers-title {
border-color: #4fc3f7;
}
.input-title {
border-color: #9ccc65;
}
.numbers-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 25px;
}
.number-card {
width: 80px;
height: 80px;
background-color: #4fc3f7;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: bold;
color: white;
box-shadow: 0 6px 0 #0288d1;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.number-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 0 #0288d1;
}
.number-card:active {
transform: translateY(2px);
box-shadow: 0 4px 0 #0288d1;
}
.operation-buttons {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
margin-top: 10px;
}
.op-btn {
width: 60px;
height: 60px;
background-color: #ffb74d;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
font-weight: bold;
color: white;
box-shadow: 0 5px 0 #f57c00;
cursor: pointer;
transition: all 0.2s;
user-select: none;
}
.op-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 0 #f57c00;
}
.op-btn:active {
transform: translateY(2px);
box-shadow: 0 3px 0 #f57c00;
}
.input-area {
width: 100%;
min-height: 120px;
background-color: white;
border-radius: 12px;
padding: 15px;
font-size: 1.8rem;
margin-bottom: 20px;
border: 3px solid #c8e6c9;
color: #388e3c;
word-wrap: break-word;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}
.control-buttons {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
margin-top: 25px;
}
.control-btn {
flex: 1;
min-width: 140px;
padding: 15px;
border: none;
border-radius: 12px;
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
.control-btn:active {
transform: translateY(4px);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.new-game-btn {
background-color: #4fc3f7;
color: white;
}
.check-btn {
background-color: #9ccc65;
color: white;
}
.hint-btn {
background-color: #ffb74d;
color: white;
}
.clear-btn {
background-color: #ff8a65;
color: white;
}
.difficulty {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.diff-btn {
padding: 12px 25px;
background-color: #e1f5fe;
border: 3px solid #4fc3f7;
border-radius: 50px;
font-size: 1.2rem;
font-weight: bold;
color: #0288d1;
cursor: pointer;
transition: all 0.3s;
}
.diff-btn.active {
background-color: #4fc3f7;
color: white;
}
.feedback {
text-align: center;
font-size: 1.6rem;
font-weight: bold;
min-height: 70px;
padding: 15px;
border-radius: 12px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.feedback.correct {
background-color: #c8e6c9;
color: #2e7d32;
border: 3px solid #9ccc65;
}
.feedback.wrong {
background-color: #ffcdd2;
color: #c62828;
border: 3px solid #ef9a9a;
}
.feedback.default {
background-color: #f5f5f5;
color: #616161;
border: 3px dashed #bdbdbd;
}
.rules {
background-color: #fff3e0;
padding: 20px;
border-radius: 15px;
margin-top: 30px;
border: 3px solid #ffb74d;
}
.rules h3 {
color: #ef6c00;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.rules p {
margin-bottom: 10px;
font-size: 1.1rem;
}
.rules ul {
padding-left: 25px;
margin-bottom: 15px;
}
.rules li {
margin-bottom: 8px;
font-size: 1.1rem;
}
.decoration {
position: absolute;
font-size: 2rem;
color: #4fc3f7;
opacity: 0.6;
z-index: 0;
}
@media (max-width: 768px) {
.game-area {
flex-direction: column;
}
h1 {
font-size: 2.2rem;
}
.number-card {
width: 70px;
height: 70px;
font-size: 2.5rem;
}
}
.star {
color: #ffb74d;
font-size: 1.8rem;
margin-right: 5px;
}
.score-display {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.solution {
background-color: #f3e5f5;
padding: 15px;
border-radius: 10px;
margin-top: 15px;
border: 2px solid #ba68c8;
color: #7b1fa2;
font-size: 1.3rem;
text-align: center;
display: none;
}
.used-number {
opacity: 0.5;
background-color: #81d4fa;
}
.used-number:hover {
transform: none;
box-shadow: 0 6px 0 #0288d1;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<div class="decoration" style="top: 20px; left: 20px;">✎</div>
<div class="decoration" style="top: 20px; right: 20px;">✦</div>
<div class="decoration" style="bottom: 20px; left: 20px;">◈</div>
<div class="decoration" style="bottom: 20px; right: 20px;">♡</div>
<div class="header">
<h1><i class="fas fa-calculator"></i> 24点数学游戏</h1>
<div class="subtitle">适合小学二、三年级 | 用4个数字通过加减乘除得到24</div>
</div>
<div class="difficulty">
<div class="diff-btn active" data-level="easy">简单 (数字1-9)</div>
<div class="diff-btn" data-level="medium">中等 (数字1-12)</div>
<div class="diff-btn" data-level="hard">挑战 (数字1-13，含负数)</div>
</div>
<div class="game-info">
<div class="info-item">
<div class="info-label">当前难度</div>
<div class="info-value" id="current-level">简单</div>
</div>
<div class="info-item">
<div class="info-label">已解决</div>
<div class="info-value" id="solved-count">0</div>
</div>
<div class="info-item">
<div class="info-label">得分</div>
<div class="info-value score-display"><i class="fas fa-star star"></i> <span id="score">0</span></div>
</div>
<div class="info-item">
<div class="info-label">剩余时间</div>
<div class="info-value" id="timer">60</div>
</div>
</div>
<div class="game-area">
<div class="numbers-section">
<div class="section-title numbers-title">
<i class="fas fa-dice"></i> 数字卡片
</div>
<div class="numbers-container" id="numbers-container">
<!-- 数字卡片会通过JS动态生成 -->
</div>
<div class="section-title">
<i class="fas fa-plus-minus"></i> 运算符号
</div>
<div class="operation-buttons">
<div class="op-btn" data-op="+">+</div>
<div class="op-btn" data-op="-">-</div>
<div class="op-btn" data-op="×">×</div>
<div class="op-btn" data-op="÷">÷</div>
<div class="op-btn" data-op="(">(</div>
<div class="op-btn" data-op=")">)</div>
</div>
</div>
<div class="input-section">
<div class="section-title input-title">
<i class="fas fa-keyboard"></i> 你的算式
</div>
<div class="input-area" id="expression-area">
点击上面的数字和符号来创建算式
</div>
<div class="control-buttons">
<button class="control-btn new-game-btn" id="new-game">
<i class="fas fa-redo"></i> 新游戏
</button>
<button class="control-btn check-btn" id="check-answer">
<i class="fas fa-check"></i> 检查答案
</button>
<button class="control-btn hint-btn" id="hint-btn">
<i class="fas fa-lightbulb"></i> 提示
</button>
<button class="control-btn clear-btn" id="clear-btn">
<i class="fas fa-eraser"></i> 清空
</button>
</div>
</div>
</div>
<div class="feedback default" id="feedback">
点击"新游戏"开始，使用4个数字和运算符号得到24！
</div>
<div class="solution" id="solution">
<!-- 解题提示会显示在这里 -->
</div>
<div class="rules">
<h3><i class="fas fa-info-circle"></i> 游戏规则</h3>
<ul>
<li>从上面的4个数字卡片中选择数字，并点击运算符号来创建算式</li>
<li>必须<strong>全部使用</strong>4个数字，每个数字只能使用一次</li>
<li>使用加(+)、减(-)、乘(×)、除(÷)和括号()得到24</li>
<li>点击"检查答案"验证你的算式是否正确</li>
<li>如果遇到困难，可以点击"提示"按钮获得帮助</li>
<li>简单模式：数字1-9 | 中等模式：数字1-12 | 挑战模式：数字1-13，可能包含负数</li>
</ul>
<p><strong>例如：</strong> 数字 4, 6, 3, 2 可以这样计算：<em>4 × 6 × (3 - 2) = 24</em></p>
</div>
</div>
<script>
// 游戏状态变量
let currentNumbers = [];
let currentExpression = "";
let usedNumbers = [];
let solvedCount = 0;
let score = 0;
let timer = 60;
let timerInterval;
let currentLevel = "easy";
let gameActive = false;
// DOM元素
const numbersContainer = document.getElementById("numbers-container");
const expressionArea = document.getElementById("expression-area");
const feedbackElement = document.getElementById("feedback");
const solutionElement = document.getElementById("solution");
const solvedCountElement = document.getElementById("solved-count");
const scoreElement = document.getElementById("score");
const timerElement = document.getElementById("timer");
const currentLevelElement = document.getElementById("current-level");
// 难度设置
const difficultySettings = {
easy: { min: 1, max: 9, name: "简单", scoreMultiplier: 1 },
medium: { min: 1, max: 12, name: "中等", scoreMultiplier: 2 },
hard: { min: 1, max: 13, name: "挑战", scoreMultiplier: 3, allowNegative: true }
};
// 初始化游戏
function initGame() {
// 生成4个随机数字
generateNumbers();
// 重置使用记录
usedNumbers = [];
// 更新UI
updateNumbersDisplay();
clearExpression();
updateFeedback("使用这4个数字通过加减乘除得到24！", "default");
hideSolution();
// 重置并启动计时器
resetTimer();
startTimer();
// 更新游戏状态
gameActive = true;
}
// 生成4个随机数字
function generateNumbers() {
const settings = difficultySettings[currentLevel];
currentNumbers = [];
for (let i = 0; i < 4; i++) {
let num = Math.floor(Math.random() * (settings.max - settings.min + 1)) + settings.min;
// 在困难模式中，有30%的概率生成负数
if (currentLevel === "hard" && Math.random() < 0.3) {
num = -num;
}
currentNumbers.push(num);
}
// 确保至少有一个可解的24点组合（简单起见，这里只是随机生成）
// 在实际完整版中，这里应该验证是否有解
}
// 更新数字显示
function updateNumbersDisplay() {
numbersContainer.innerHTML = "";
currentNumbers.forEach((num, index) => {
const numberCard = document.createElement("div");
numberCard.className = "number-card";
numberCard.textContent = num;
numberCard.dataset.index = index;
numberCard.dataset.value = num;
// 检查该数字是否已被使用
const isUsed = usedNumbers.filter(n => n.index === index).length > 0;
if (isUsed) {
numberCard.classList.add("used-number");
numberCard.style.cursor = "not-allowed";
}
numberCard.addEventListener("click", () => addNumberToExpression(num, index));
numbersContainer.appendChild(numberCard);
});
}
// 将数字添加到表达式
function addNumberToExpression(num, index) {
if (!gameActive) return;
// 检查该数字是否已被使用
const isUsed = usedNumbers.filter(n => n.index === index).length > 0;
if (isUsed) {
updateFeedback(`数字 ${num} 已经被使用过了！`, "wrong");
return;
}
// 记录已使用的数字
usedNumbers.push({value: num, index: index});
// 添加数字到表达式
if (currentExpression === "点击上面的数字和符号来创建算式" ||
currentExpression.trim() === "") {
currentExpression = num.toString();
} else {
// 获取最后一个字符
const lastChar = currentExpression.trim().slice(-1);
// 如果最后一个字符是数字或右括号，则需要先添加运算符
if (!isNaN(lastChar) || lastChar === ')') {
updateFeedback("请在数字之间添加运算符！", "wrong");
// 移除刚刚添加的使用记录
usedNumbers = usedNumbers.filter(n => n.index !== index);
return;
} else {
// 直接添加数字
currentExpression += num.toString();
}
}
updateExpressionDisplay();
updateNumbersDisplay(); // 更新数字卡片状态
}
// 添加运算符到表达式
function addOperator(op) {
if (!gameActive) return;
if (currentExpression === "点击上面的数字和符号来创建算式" ||
currentExpression.trim() === "") {
// 如果表达式为空，只能添加左括号或负数符号
if (op === "(") {
currentExpression = "(";
} else if (op === "-") {
currentExpression = "-";
} else {
updateFeedback("请先选择数字！", "wrong");
}
updateExpressionDisplay();
return;
}
// 检查是否可以在表达式末尾添加运算符
const trimmedExpression = currentExpression.trim();
const lastChar = trimmedExpression.slice(-1);
// 如果最后一个字符是运算符或左括号，不能直接添加运算符（除了右括号）
if (isOperator(lastChar) || lastChar === '(') {
// 例外：左括号后可以跟负号
if (lastChar === '(' && op === '-') {
currentExpression += " -";
}
// 例外：运算符后可以跟左括号
else if (isOperator(lastChar) && op === '(') {
currentExpression += " (";
}
else {
updateFeedback("这里不能添加运算符！", "wrong");
return;
}
}
// 如果最后一个字符是数字或右括号，可以添加任何运算符
else if (!isNaN(lastChar) || lastChar === ')') {
// 添加运算符
currentExpression += ` ${op} `;
} else {
currentExpression += op;
}
updateExpressionDisplay();
}
// 检查字符是否是运算符
function isOperator(char) {
return ['+', '-', '×', '÷'].includes(char);
}
// 更新表达式显示
function updateExpressionDisplay() {
expressionArea.textContent = currentExpression;
}
// 清空表达式
function clearExpression() {
currentExpression = "点击上面的数字和符号来创建算式";
usedNumbers = [];
updateExpressionDisplay();
updateNumbersDisplay();
}
// 检查答案
function checkAnswer() {
if (!gameActive) {
updateFeedback("请先开始新游戏！", "wrong");
return;
}
// 验证是否使用了所有4个数字
if (usedNumbers.length !== 4) {
updateFeedback(`只使用了 ${usedNumbers.length} 个数字，必须使用全部4个数字！`, "wrong");
return;
}
// 检查是否每个数字都只使用了一次
const usedIndices = usedNumbers.map(n => n.index);
const uniqueIndices = [...new Set(usedIndices)];
if (uniqueIndices.length !== 4) {
updateFeedback("每个数字只能使用一次！", "wrong");
return;
}
// 计算表达式结果
try {
// 替换乘除符号为JavaScript可识别的符号
let expression = currentExpression
.replace(/×/g, '*')
.replace(/÷/g, '/');
// 安全地计算表达式
const result = eval(expression);
// 检查结果是否为24（允许轻微浮点数误差）
if (Math.abs(result - 24) < 0.0001) {
// 正确答案
solvedCount++;
score += 10 * difficultySettings[currentLevel].scoreMultiplier;
updateSolvedCount();
updateScore();
updateFeedback(`太棒了！${currentExpression} = 24`, "correct");
// 播放成功音效（模拟）
playSuccessSound();
// 1.5秒后开始新游戏
setTimeout(() => {
initGame();
}, 1500);
} else {
updateFeedback(`算式结果是 ${result.toFixed(2)}，不是24。再试试！`, "wrong");
playErrorSound();
}
} catch (error) {
updateFeedback("算式有错误，请检查格式！", "wrong");
playErrorSound();
}
}
// 显示提示
function showHint() {
if (!gameActive) {
updateFeedback("请先开始新游戏！", "wrong");
return;
}
// 减少分数作为提示代价
score = Math.max(0, score - 5);
updateScore();
// 生成简单的提示
solutionElement.style.display = "block";
// 根据当前数字生成不同的提示
const hint = generateHint();
solutionElement.innerHTML = `<strong>提示：</strong>${hint}`;
updateFeedback("已显示提示，扣除5分。继续努力！", "default");
}
// 生成提示
function generateHint() {
const nums = currentNumbers.slice();
// 尝试找到一些简单的24点组合
// 这里提供一些通用的提示策略
const hints = [
"尝试先找到一个乘法组合，比如 6×4=24 或 8×3=24，然后看看剩下的数字能否得到1或0",
"看看是否有数字相加或相乘接近24，然后调整其他数字",
"尝试使用除法，比如 48÷2=24 或 72÷3=24",
"括号可以改变运算顺序，试试用括号把某些数字组合起来",
"如果数字中有6，可以尝试 6×4=24，然后看其他数字能否组合成4",
"如果数字中有8，可以尝试 8×3=24，然后看其他数字能否组合成3"
];
// 根据具体数字给出更具体的提示
if (nums.includes(6) && nums.includes(4)) {
return "你有6和4，6×4=24，看看剩下的两个数字能否得到1（这样就是6×4×1=24）或0（这样就是6×4+0=24）";
}
if (nums.includes(8) && nums.includes(3)) {
return "你有8和3，8×3=24，看看剩下的两个数字能否得到1或0";
}
if (nums.includes(12) && nums.includes(2)) {
return "你有12和2，12×2=24，看看剩下的两个数字能否得到1或0";
}
// 返回随机提示
return hints[Math.floor(Math.random() * hints.length)];
}
// 隐藏解题提示
function hideSolution() {
solutionElement.style.display = "none";
}
// 更新反馈信息
function updateFeedback(message, type) {
feedbackElement.textContent = message;
feedbackElement.className = "feedback " + type;
}
// 更新已解决计数
function updateSolvedCount() {
solvedCountElement.textContent = solvedCount;
}
// 更新分数
function updateScore() {
scoreElement.textContent = score;
}
// 重置计时器
function resetTimer() {
timer = 60;
timerElement.textContent = timer;
timerElement.style.color = "#0288d1";
}
// 开始计时器
function startTimer() {
clearInterval(timerInterval);
timerInterval = setInterval(() => {
if (!gameActive) return;
timer--;
timerElement.textContent = timer;
if (timer <= 0) {
clearInterval(timerInterval);
gameActive = false;
updateFeedback("时间到！点击'新游戏'重新开始。", "wrong");
playTimeUpSound();
} else if (timer <= 10) {
timerElement.style.color = "#e53935";
// 播放倒计时音效（模拟）
if (timer <= 5) {
playTickSound();
}
}
}, 1000);
}
// 改变难度
function changeDifficulty(level) {
currentLevel = level;
currentLevelElement.textContent = difficultySettings[level].name;
// 更新难度按钮状态
document.querySelectorAll(".diff-btn").forEach(btn => {
if (btn.dataset.level === level) {
btn.classList.add("active");
} else {
btn.classList.remove("active");
}
});
// 开始新游戏
initGame();
}
// 音效函数（模拟）
function playSuccessSound() {
// 在实际应用中，这里可以播放音频文件
console.log("播放成功音效");
}
function playErrorSound() {
console.log("播放错误音效");
}
function playTimeUpSound() {
console.log("播放时间到音效");
}
function playTickSound() {
console.log("播放倒计时音效");
}
// 事件监听器设置
function setupEventListeners() {
// 新游戏按钮
document.getElementById("new-game").addEventListener("click", () => {
initGame();
updateFeedback("新游戏开始！使用这4个数字得到24。", "default");
});
// 检查答案按钮
document.getElementById("check-answer").addEventListener("click", checkAnswer);
// 提示按钮
document.getElementById("hint-btn").addEventListener("click", showHint);
// 清空按钮
document.getElementById("clear-btn").addEventListener("click", () => {
if (gameActive) {
clearExpression();
updateFeedback("已清空算式，重新开始计算。", "default");
}
});
// 难度按钮
document.querySelectorAll(".diff-btn").forEach(btn => {
btn.addEventListener("click", () => {
changeDifficulty(btn.dataset.level);
});
});
// 运算符号按钮
document.querySelectorAll(".op-btn").forEach(btn => {
btn.addEventListener("click", () => {
addOperator(btn.dataset.op);
});
});
// 初始游戏说明
updateFeedback("欢迎来到24点数学游戏！点击'新游戏'开始挑战。", "default");
}
// 页面加载完成后初始化
document.addEventListener("DOMContentLoaded", () => {
setupEventListeners();
// 初始化为简单难度
changeDifficulty("easy");
});
</script>
</body>
</html>
index.html
index.html