<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>马年幸运马蹄铁 - HTML小游戏</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 50%, #ffeaa7 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #8b0000;
}
.container {
max-width: 800px;
width: 100%;
background-color: rgba(255, 255, 255, 0.92);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(139, 0, 0, 0.2);
text-align: center;
border: 8px solid #8b0000;
position: relative;
overflow: hidden;
}
.header {
margin-bottom: 25px;
position: relative;
}
h1 {
color: #8b0000;
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 0 #ffd700;
letter-spacing: 1px;
}
.year-badge {
display: inline-block;
background-color: #ffd700;
color: #8b0000;
padding: 8px 20px;
border-radius: 30px;
font-weight: bold;
font-size: 1.3rem;
margin-top: 5px;
border: 3px solid #8b0000;
}
.game-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
margin: 30px 0;
}
.game-info {
display: flex;
justify-content: space-around;
width: 100%;
background-color: #fff8e1;
padding: 20px;
border-radius: 15px;
border: 3px dashed #8b0000;
}
.info-box {
display: flex;
flex-direction: column;
align-items: center;
}
.info-label {
font-size: 1rem;
color: #666;
margin-bottom: 5px;
}
.info-value {
font-size: 2.2rem;
font-weight: bold;
color: #8b0000;
}
.horseshoe-container {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
}
.horseshoe {
width: 100%;
height: 100%;
background-color: #d4af37;
clip-path: polygon(50% 0%, 80% 10%, 90% 30%, 90% 70%, 80% 90%, 50% 100%, 20% 90%, 10% 70%, 10% 30%, 20% 10%);
border: 8px solid #8b0000;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5rem;
font-weight: bold;
color: #8b0000;
box-shadow: inset 0 0 20px rgba(139, 0, 0, 0.3);
}
.guess-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
.input-container {
display: flex;
gap: 15px;
align-items: center;
}
input[type="number"] {
width: 120px;
height: 70px;
font-size: 2.5rem;
text-align: center;
border: 4px solid #8b0000;
border-radius: 10px;
background-color: #fff8e1;
color: #8b0000;
font-weight: bold;
}
button {
background-color: #8b0000;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.3rem;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
box-shadow: 0 5px 0 #5a0000;
}
button:hover {
background-color: #a30000;
transform: translateY(-2px);
}
button:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #5a0000;
}
.message {
min-height: 60px;
padding: 15px;
background-color: #e8f5e9;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #2e7d32;
width: 100%;
border: 3px solid #c8e6c9;
transition: all 0.3s;
}
.message.error {
background-color: #ffebee;
color: #c62828;
border-color: #ffcdd2;
}
.message.win {
background-color: #e8f5e9;
color: #2e7d32;
border-color: #c8e6c9;
animation: pulse 1.5s infinite;
}
.guesses-history {
width: 100%;
background-color: #fff8e1;
border-radius: 10px;
padding: 20px;
border: 3px dashed #8b0000;
}
.guesses-title {
font-size: 1.4rem;
margin-bottom: 15px;
color: #8b0000;
}
.guesses-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
min-height: 50px;
}
.guess-item {
background-color: #8b0000;
color: white;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
}
.guess-item.high {
background-color: #ff6b6b;
}
.guess-item.low {
background-color: #4dabf7;
}
.guess-item.correct {
background-color: #51cf66;
animation: bounce 0.5s;
}
.instructions {
background-color: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin-top: 25px;
text-align: left;
border-left: 5px solid #8b0000;
}
.instructions h3 {
color: #8b0000;
margin-bottom: 10px;
}
.instructions ul {
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
line-height: 1.5;
}
.horse-decoration {
position: absolute;
font-size: 3rem;
z-index: 0;
}
.horse-left {
top: 20px;
left: 20px;
transform: rotate(-15deg);
}
.horse-right {
top: 20px;
right: 20px;
transform: rotate(15deg) scaleX(-1);
}
.firework {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
z-index: 1;
opacity: 0;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.game-info {
flex-direction: column;
gap: 15px;
}
.input-container {
flex-direction: column;
}
.horseshoe-container {
width: 150px;
height: 150px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="horse-decoration">🐎</div>
<div class="horse-decoration horse-right">🐎</div>
<div class="header">
<h1>马年幸运马蹄铁</h1>
<div class="year-badge">丙午马年 · 新春游戏</div>
</div>
<div class="game-area">
<div class="game-info">
<div class="info-box">
<div class="info-label">剩余次数</div>
<div class="info-value" id="attempts-left">10</div>
</div>
<div class="info-box">
<div class="info-label">目标数字</div>
<div class="horseshoe-container">
<div class="horseshoe" id="target-number">?</div>
</div>
</div>
<div class="info-box">
<div class="info-label">已用次数</div>
<div class="info-value" id="attempts-used">0</div>
</div>
</div>
<div class="guess-area">
<div class="input-container">
<input type="number" id="guess-input" min="1" max="100" placeholder="1-100" autofocus>
<button id="guess-btn">猜一下</button>
<button id="reset-btn">重新开始</button>
</div>
<div class="message" id="message">
欢迎来到马年幸运马蹄铁游戏！请输入1-100之间的数字
</div>
</div>
<div class="guesses-history">
<div class="guesses-title">猜测历史：</div>
<div class="guesses-list" id="guesses-list"></div>
</div>
</div>
<div class="instructions">
<h3>游戏规则：</h3>
<ul>
<li>系统会随机生成一个1-100之间的幸运数字（藏在马蹄铁中）</li>
<li>你有10次机会猜中这个数字</li>
<li>每次猜测后，系统会告诉你猜的数字是"太大"、"太小"还是"正确"</li>
<li>猜中数字即可获得"马到成功"的祝福！</li>
<li>颜色提示：<span style="color:#ff6b6b; font-weight:bold;">红色</span>表示猜大了，<span style="color:#4dabf7; font-weight:bold;">蓝色</span>表示猜小了，<span style="color:#51cf66; font-weight:bold;">绿色</span>表示猜对了！</li>
</ul>
</div>
</div>
<script>
let targetNumber;
let attemptsLeft = 10;
let attemptsUsed = 0;
let gameOver = false;
let guessesHistory = [];
const guessInput = document.getElementById('guess-input');
const guessBtn = document.getElementById('guess-btn');
const resetBtn = document.getElementById('reset-btn');
const messageEl = document.getElementById('message');
const attemptsLeftEl = document.getElementById('attempts-left');
const attemptsUsedEl = document.getElementById('attempts-used');
const targetNumberEl = document.getElementById('target-number');
const guessesListEl = document.getElementById('guesses-list');
function initGame() {
targetNumber = Math.floor(Math.random() * 100) + 1;
attemptsLeft = 10;
attemptsUsed = 0;
gameOver = false;
guessesHistory = [];
attemptsLeftEl.textContent = attemptsLeft;
attemptsUsedEl.textContent = attemptsUsed;
targetNumberEl.textContent = '?';
messageEl.textContent = '游戏开始！请输入1-100之间的数字，猜猜马蹄铁中的幸运数字是多少？';
messageEl.className = 'message';
guessesListEl.innerHTML = '';
guessInput.value = '';
guessInput.focus();
createFireworks();
}
function makeGuess() {
if (gameOver) {
showMessage('游戏已结束，请点击"重新开始"开始新游戏！', 'error');
return;
}
const guess = parseInt(guessInput.value);
if (isNaN(guess) || guess < 1 || guess > 100) {
showMessage('请输入1-100之间的有效数字！', 'error');
guessInput.value = '';
guessInput.focus();
return;
}
attemptsUsed++;
attemptsLeft--;
guessesHistory.push(guess);
attemptsLeftEl.textContent = attemptsLeft;
attemptsUsedEl.textContent = attemptsUsed;
let guessClass = '';
let message = '';
if (guess === targetNumber) {
gameOver = true;
guessClass = 'correct';
message = `🎉 恭喜！你猜对了！幸运数字是 ${targetNumber}！ 🎉 马到成功，丙午年好运连连！`;
messageEl.className = 'message win';
targetNumberEl.textContent = targetNumber;
celebrate();
} else if (guess < targetNumber) {
guessClass = 'low';
message = `猜小了！数字比 ${guess} 大。还剩 ${attemptsLeft} 次机会。`;
messageEl.className = 'message';
} else {
guessClass = 'high';
message = `猜大了！数字比 ${guess} 小。还剩 ${attemptsLeft} 次机会。`;
messageEl.className = 'message';
}
showMessage(message);
const guessItem = document.createElement('div');
guessItem.className = `guess-item ${guessClass}`;
guessItem.textContent = guess;
guessesListEl.appendChild(guessItem);
guessInput.value = '';
guessInput.focus();
if (attemptsLeft <= 0 && guess !== targetNumber) {
gameOver = true;
showMessage(`游戏结束！幸运数字是 ${targetNumber}。点击"重新开始"再试一次！`, 'error');
targetNumberEl.textContent = targetNumber;
}
}
function showMessage(text, type = '') {
messageEl.textContent = text;
messageEl.className = 'message';
if (type) {
messageEl.classList.add(type);
}
}
function celebrate() {
for (let i = 0; i < 50; i++) {
setTimeout(() => {
createFirework();
}, i * 50);
}
playVictorySound();
}
function createFirework() {
const firework = document.createElement('div');
firework.className = 'firework';
const colors = ['#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#9900ff'];
const color = colors[Math.floor(Math.random() * colors.length)];
firework.style.backgroundColor = color;
const x = Math.random() * 100;
const y = Math.random() * 100;
firework.style.left = `${x}%`;
firework.style.top = `${y}%`;
document.querySelector('.container').appendChild(firework);
const size = Math.random() * 30 + 10;
firework.animate([
{ width: '10px', height: '10px', opacity: 1 },
{ width: `${size}px`, height: `${size}px`, opacity: 0 }
], {
duration: 1000,
easing: 'ease-out'
});
setTimeout(() => {
firework.remove();
}, 1000);
}
function createFireworks() {
}
function playVictorySound() {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime);
oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1);
oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2);
oscillator.frequency.setValueAtTime(1046.50, audioContext.currentTime + 0.3);
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.5);
} catch (e) {
console.log("音频播放失败，但不影响游戏体验");
}
}
guessBtn.addEventListener('click', makeGuess);
resetBtn.addEventListener('click', initGame);
guessInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
makeGuess();
}
});
window.addEventListener('load', initGame);
</script>
</body>
</html>
浙公网安备 33010602011771号