<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>彩色情绪盲盒</title>
<style>
:root {
--card-width: 160px;
--card-height: 200px;
--primary-color: #6C5B7B;
--font-size: 18px;
}
body {
font-family: '微软雅黑', sans-serif;
background: #F5F5F5;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.card-pool {
min-height: 420px;
border: 2px dashed var(--primary-color);
padding: 15px;
border-radius: 10px;
background: white;
}
.card {
width: var(--card-width);
height: var(--card-height);
background: #FFF;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 10px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
font-size: var(--font-size);
text-align: center;
padding: 10px;
color: #333; /* 默认文字颜色 */
}
.card.selected {
transform: translateY(-10px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
border: 3px solid var(--primary-color);
}
.controls {
grid-column: 1 / -1;
background: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
#timer {
font-size: 24px;
color: var(--primary-color);
text-align: center;
margin: 20px 0;
}
.param-group {
margin: 10px 0;
display: inline-block;
margin-right: 30px;
}
button {
background: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="controls">
<div class="param-group">
<label>卡片宽度：<input type="range" id="width" min="120" max="240" value="160"></label>
</div>
<div class="param-group">
<label>卡片高度：<input type="range" id="height" min="160" max="280" value="200"></label>
</div>
<div class="param-group">
<label>主色调：<input type="color" id="mainColor" value="#6C5B7B"></label>
</div>
<button onclick="startGame()">开始游戏</button>
<button onclick="showResults()">显示配对</button>
</div>
<div id="timer">⏳ 剩余时间：90秒</div>
<div class="container">
<div class="card-pool" id="images">
<h3>意象卡池</h3>
<div class="card">黄河</div>
<div class="card">青丝</div>
<div class="card">金樽</div>
<div class="card">明月</div>
</div>
<div class="card-pool" id="emotions">
<h3>情绪卡池</h3>
<div class="card">悲怆</div>
<div class="card">焦灼</div>
<div class="card">狂放</div>
<div class="card">虚无</div>
</div>
</div>
<script>
let timeLeft = 90;
let timerId = null;
let selectedCard = null;
const pairings = new Map();
const colorMap = new Map();
// 生成组合颜色
function generateColor(combination) {
// 如果已有颜色则直接返回
if(colorMap.has(combination)) return colorMap.get(combination);
// 生成HSL颜色（保证色彩差异）
const hue = Math.floor(Math.random() * 360);
const saturation = 60 + Math.floor(Math.random() * 20);
const lightness = 50 + Math.floor(Math.random() * 40);
const color = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
colorMap.set(combination, color);
return color;
}
// 卡片点击处理
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', () => {
if (timeLeft <= 0) return;
document.querySelectorAll('.selected').forEach(c => {
if (c !== card) c.classList.remove('selected');
});
card.classList.toggle('selected');
if (card.parentElement.id === 'images') {
selectedCard = {type: 'image', element: card};
} else {
if (selectedCard?.type === 'image') {
createPairing(selectedCard.element, card);
}
selectedCard = null;
}
});
});
function createPairing(imageCard, emotionCard) {
// 移除旧的配色
if (pairings.has(imageCard)) {
const oldEmotion = pairings.get(imageCard);
oldEmotion.style.removeProperty('background-color');
oldEmotion.style.removeProperty('color');
}
imageCard.style.removeProperty('background-color');
imageCard.style.removeProperty('color');
// 生成新颜色
const combination = `${imageCard.textContent}+${emotionCard.textContent}`;
const color = generateColor(combination);
// 应用颜色
imageCard.style.backgroundColor = color;
emotionCard.style.backgroundColor = color;
imageCard.style.color = 'white';
emotionCard.style.color = 'white';
pairings.set(imageCard, emotionCard);
}
function startGame() {
resetGame();
timerId = setInterval(() => {
timeLeft--;
document.getElementById('timer').textContent = `⏳ 剩余时间：${timeLeft}秒`;
if (timeLeft <= 0) endGame();
}, 1000);
}
function endGame() {
clearInterval(timerId);
showResults();
}
function resetGame() {
clearInterval(timerId);
timeLeft = 90;
pairings.clear();
colorMap.clear();
document.getElementById('timer').textContent = '⏳ 剩余时间：90秒';
document.querySelectorAll('.card').forEach(card => {
card.classList.remove('selected');
card.style.removeProperty('background-color');
card.style.removeProperty('color');
});
}
function showResults() {
let result = "当前配对结果：\n";
pairings.forEach((emotionCard, imageCard) => {
result += `${imageCard.textContent} → ${emotionCard.textContent}\n`;
});
alert(result);
}
// 参数调整
document.getElementById('width').addEventListener('input', e => {
document.documentElement.style.setProperty('--card-width', `${e.target.value}px`);
});
document.getElementById('height').addEventListener('input', e => {
document.documentElement.style.setProperty('--card-height', `${e.target.value}px`);
});
document.getElementById('mainColor').addEventListener('input', e => {
document.documentElement.style.setProperty('--primary-color', e.target.value);
});
</script>
</body>
</html>
</html>
index.html
index.html