<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>挑战版小猫饲养指南</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #f5e1ff, #d4f0ff);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #4a3c5f;
}
.container {
background: rgba(255, 255, 255, 0.9);
width: 100%;
max-width: 500px;
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
overflow: hidden;
padding: 30px;
text-align: center;
position: relative;
}
.header {
margin-bottom: 25px;
position: relative;
}
.header h1 {
color: #7a5c9a;
font-size: 28px;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.header p {
color: #8b6ca8;
font-size: 16px;
}
.cat-container {
position: relative;
margin: 20px auto;
width: 200px;
height: 200px;
}
.cat-image {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 6px solid #ffcfea;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
.mood-indicator {
position: absolute;
top: -10px;
right: -10px;
background: #ff6bb8;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 10px rgba(255, 107, 184, 0.4);
border: 2px solid white;
}
.stats {
display: flex;
justify-content: space-between;
margin: 20px 0;
background: #f9f4ff;
padding: 15px;
border-radius: 15px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.stat-item {
text-align: center;
}
.stat-label {
font-size: 14px;
color: #8b6ca8;
margin-bottom: 5px;
}
.stat-value {
font-size: 18px;
font-weight: bold;
color: #7a5c9a;
}
.progress-container {
margin: 25px 0;
}
.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.progress-bar {
height: 25px;
background: #f0e0ff;
border-radius: 15px;
overflow: hidden;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, #ff9de0, #ff6bb8);
border-radius: 15px;
width: 0%;
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 25px 0;
}
.action-btn {
padding: 15px;
border: none;
border-radius: 15px;
background: linear-gradient(to bottom, #a486c2, #8b6ca8);
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(142, 108, 168, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.action-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(142, 108, 168, 0.4);
}
.action-btn:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(142, 108, 168, 0.3);
}
.action-btn i {
font-size: 20px;
}
.response-box {
background: #f9f4ff;
padding: 20px;
border-radius: 15px;
min-height: 80px;
margin-top: 20px;
border: 2px dashed #d8c4e8;
font-style: italic;
color: #5c4b75;
position: relative;
text-align: center;
}
.response-box::before {
content: """;
position: absolute;
top: -25px;
left: 15px;
font-size: 60px;
color: #d8c4e8;
}
.cooldown {
opacity: 0.6;
pointer-events: none;
}
.special-action {
background: linear-gradient(to bottom, #ff9de0, #ff6bb8);
grid-column: span 2;
margin-top: 10px;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #ff6bb8;
color: white;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 100;
}
.notification.show {
transform: translateX(0);
}
@media (max-width: 500px) {
.actions {
grid-template-columns: 1fr;
}
.special-action {
grid-column: span 1;
}
.container {
padding: 20px 15px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>挑战版小猫饲养指南</h1>
<p>小心！这只小猫比看起来更难讨好</p>
</div>
<div class="cat-container">
<img class="cat-image" src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="傲娇小猫">
<div class="mood-indicator">😼</div>
</div>
<div class="stats">
<div class="stat-item">
<div class="stat-label">好感度</div>
<div class="stat-value" id="love-value">0%</div>
</div>
<div class="stat-item">
<div class="stat-label">心情值</div>
<div class="stat-value" id="mood-value">50%</div>
</div>
<div class="stat-item">
<div class="stat-label">饱食度</div>
<div class="stat-value" id="hunger-value">50%</div>
</div>
</div>
<div class="progress-container">
<div class="progress-label">
<span>谢瞻的好感度❤️</span>
<span id="progress-percent">0%</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="love-meter">0%</div>
</div>
</div>
<div class="actions">
<button class="action-btn" onclick="interact('pet')">
<i class="fas fa-hand"></i>
<span>摸摸头</span>
</button>
<button class="action-btn" onclick="interact('scratch')">
<i class="fas fa-paw"></i>
<span>挠下巴</span>
</button>
<button class="action-btn" onclick="interact('treat')">
<i class="fas fa-fish"></i>
<span>喂猫条</span>
</button>
<button class="action-btn" onclick="interact('play')">
<i class="fas fa-yarn"></i>
<span>玩玩具</span>
</button>
<button class="action-btn special-action" onclick="interact('love')">
<i class="fas fa-heart"></i>
<span>表达爱意 (冷却中)</span>
</button>
</div>
<div class="response-box" id="response-box">
<p>（他正用浅蓝色的眼睛面无表情地看着你，尾巴在身后轻轻摇晃。）</p>
</div>
</div>
<div class="notification" id="notification">
小猫心情不好，不想理你...
</div>
<script>
// 游戏状态
const gameState = {
love: 0,
mood: 50,
hunger: 50,
cooldowns: {
love: 0
}
};
// 元素引用
const loveMeter = document.getElementById('love-meter');
const progressPercent = document.getElementById('progress-percent');
const responseBox = document.getElementById('response-box');
const loveValue = document.getElementById('love-value');
const moodValue = document.getElementById('mood-value');
const hungerValue = document.getElementById('hunger-value');
const notification = document.getElementById('notification');
const catImage = document.querySelector('.cat-image');
const moodIndicator = document.querySelector('.mood-indicator');
const loveButton = document.querySelector('.special-action');
// 小猫图片数组
const catImages = [
"https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80",
"https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
"https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=843&q=80",
"https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
];
// 响应消息
const responses = {
pet: [
"嗯...勉强让你摸一下。",
"手拿开，我现在不想被摸。",
"（躲开你的手）现在不想理你。",
"（舒服地眯起眼睛）算你会摸。"
],
scratch: [
"......（喉咙里发出细微的咕噜声）",
"（突然咬你的手）轻点！",
"这边，再往左边一点。",
"（享受地抬起头）继续，不准停。"
],
treat: [
"（瞥了一眼）这种廉价猫条也敢拿来给我？",
"算你识相，我正好饿了。",
"不吃，刚刚吃过了。",
"（闻了闻）味道还行，下次多买点。"
],
play: [
"（瞥了一眼玩具）幼稚，不玩。",
"（追着玩具跑）才不是我想玩呢！",
"（无视玩具）你当我是普通猫吗？",
"（玩了一会儿就失去兴趣）无聊。"
],
love: [
"......知道了。",
"哼，现在才说爱我？",
"（脸微微发红）笨...笨蛋。",
"我也...（小声）爱你。"
]
};
// 初始化游戏
function initGame() {
updateUI();
setInterval(updateStats, 3000); // 每3秒更新一次状态
setInterval(updateCooldowns, 1000); // 每秒更新冷却时间
}
// 交互处理
function interact(action) {
// 检查冷却
if (action === 'love' && gameState.cooldowns.love > 0) {
showNotification("表达爱意技能还在冷却中！");
return;
}
// 根据心情决定成功率
const successChance = gameState.mood / 100;
const isSuccess = Math.random() < successChance;
if (!isSuccess) {
showNotification("小猫心情不好，不想理你...");
decreaseMood(5);
updateUI();
return;
}
// 处理不同操作
let loveIncrease = 0;
let message = "";
switch(action) {
case 'pet':
loveIncrease = Math.random() * 3 + 2;
message = getRandomResponse(responses.pet);
decreaseMood(2);
break;
case 'scratch':
loveIncrease = Math.random() * 4 + 3;
message = getRandomResponse(responses.scratch);
decreaseMood(3);
break;
case 'treat':
loveIncrease = Math.random() * 5 + 3;
message = getRandomResponse(responses.treat);
increaseHunger(15);
decreaseMood(1);
break;
case 'play':
loveIncrease = Math.random() * 4 + 2;
message = getRandomResponse(responses.play);
decreaseMood(4);
break;
case 'love':
loveIncrease = Math.random() * 8 + 5;
message = getRandomResponse(responses.love);
gameState.cooldowns.love = 30; // 30秒冷却
increaseMood(10);
break;
}
// 增加好感度
increaseLove(loveIncrease);
// 显示响应消息
responseBox.innerHTML = `<p>${message}</p>`;
// 更新UI
updateUI();
}
// 增加好感度
function increaseLove(amount) {
gameState.love = Math.min(100, gameState.love + amount);
}
// 减少心情值
function decreaseMood(amount) {
gameState.mood = Math.max(0, gameState.mood - amount);
}
// 增加心情值
function increaseMood(amount) {
gameState.mood = Math.min(100, gameState.mood + amount);
}
// 增加饱食度
function increaseHunger(amount) {
gameState.hunger = Math.min(100, gameState.hunger + amount);
}
// 更新状态
function updateStats() {
// 自然减少心情和饱食度
gameState.mood = Math.max(0, gameState.mood - 1);
gameState.hunger = Math.max(0, gameState.hunger - 2);
// 如果饱食度过低，心情也会下降
if (gameState.hunger < 20) {
gameState.mood = Math.max(0, gameState.mood - 3);
}
// 更新UI
updateUI();
}
// 更新冷却时间
function updateCooldowns() {
if (gameState.cooldowns.love > 0) {
gameState.cooldowns.love--;
if (gameState.cooldowns.love > 0) {
loveButton.innerHTML = `<i class="fas fa-heart"></i><span>表达爱意 (${gameState.cooldowns.love}s)</span>`;
loveButton.classList.add('cooldown');
} else {
loveButton.innerHTML = `<i class="fas fa-heart"></i><span>表达爱意</span>`;
loveButton.classList.remove('cooldown');
}
}
}
// 更新UI
function updateUI() {
// 更新进度条
loveMeter.style.width = `${gameState.love}%`;
loveMeter.textContent = `${Math.round(gameState.love)}%`;
progressPercent.textContent = `${Math.round(gameState.love)}%`;
// 更新数值显示
loveValue.textContent = `${Math.round(gameState.love)}%`;
moodValue.textContent = `${Math.round(gameState.mood)}%`;
hungerValue.textContent = `${Math.round(gameState.hunger)}%`;
// 根据好感度更新小猫图片
if (gameState.love >= 80) {
catImage.src = catImages[3];
moodIndicator.textContent = "😻";
} else if (gameState.love >= 50) {
catImage.src = catImages[2];
moodIndicator.textContent = "😺";
} else if (gameState.love >= 20) {
catImage.src = catImages[1];
moodIndicator.textContent = "😼";
} else {
catImage.src = catImages[0];
moodIndicator.textContent = "😾";
}
// 检查游戏胜利条件
if (gameState.love >= 100) {
responseBox.innerHTML = `<p><strong>好感度满了！</strong><br>奖励是...今天晚上可以抱着我睡觉，一整晚，不准松手。</p>`;
}
}
// 显示通知
function showNotification(message) {
notification.textContent = message;
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 2000);
}
// 获取随机响应
function getRandomResponse(responseArray) {
return responseArray[Math.floor(Math.random() * responseArray.length)];
}
// 初始化游戏
window.onload = initGame;
</script>
</body>
</html>