生成提示词
生成网页代码html，为一个中英文单词消消乐游戏.
游戏最上方为状态栏，1.计时2.得分3.步数4.撤销5.错误步数
设置随机浅色背景，每次重开游戏更新
生成配对的 中文和英文单词卡片，区分游戏背景画布颜色 和卡牌颜色
中文和英文单词卡片内容不能重复
每次重开游戏随机一种基础浅颜色，赋予给所有卡片，所有都是同一种浅颜色，点击卡片后效果为填充一个独特醒目颜色
卡片配对后消除，不在显示，
要打乱卡片位置
页面加载后自动开始游戏
卡牌显示逻辑，让卡牌不再需要翻转，而是直接显示文字内容
游戏上方有两个滑块：卡片方框大小和卡片内文字大小
卡片方框大小要求不影响卡片内文字大小，和卡片内文字大小相互独立
卡片方框大小缩小放大时相当于调整了整个游戏画布的大小范围，这样缩小卡片，卡片直接的间距才会缩小
增加两个滑动条，调整显示卡片行数目 和 列数目，
单词库备多一点，起码要上千条
增加单词难度选择（小学、初中、高中、大学），点击难度按钮后立即重新开始游戏。
滑块调整范围，设置到最小值和最大值，无极调整
游戏最后只剩最后一对时自动消除，要做一个放大移动合并消失的动画然后弹出胜利提示
设置更改后都是立马重开游戏
游戏上方所有选项设置 可以为一个弹出设置卡片，鼠标移动到上面设置方块时弹出卡片，鼠标移出设置卡片范围时，隐藏设置卡片，
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>中英文单词消消乐</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { width: 100%; height: 100%; font-family: sans-serif; overflow: hidden; }
#status { display: flex; gap:10px; padding:10px; background: rgba(255,255,255,0.8); position: relative; z-index:10; }
#status div { flex: none; }
#settings-btn { position: absolute; right:10px; top:10px; cursor:pointer; }
#settings-panel {
position: absolute; top:40px; right:10px; background: #fff;
border:1px solid #ccc; padding:10px; display:none; z-index:20;
box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
#board-wrapper { width: 100%; height: calc(100% - 50px); overflow: hidden; transform-origin: 0 0; }
#board { display: grid; width: 100%; height: 100%; padding:10px; }
.card {
display:flex; align-items:center; justify-content:center;
border:2px solid #aaa; cursor:pointer; user-select:none;
transition: background 0.3s, transform 0.3s;
}
.removed { visibility:hidden; }
@keyframes lastPair {
0% { transform: scale(1) translate(0,0); opacity:1; }
100% { transform: scale(4) translate(50px,-50px); opacity:0; }
}
</style>
</head>
<body>
<div id="status">
<div>计时: <span id="timer">00:00</span></div>
<div>得分: <span id="score">0</span></div>
<div>步数: <span id="moves">0</span></div>
<div>撤销: <button id="undo">撤销</button></div>
<div>错误: <span id="wrong">0</span></div>
<div id="settings-btn">⚙</div>
<div id="settings-panel">
<div>卡片框大小:<input type="range" id="card-size" min="50" max="200" value="100"></div>
<div>文字大小:<input type="range" id="font-size" min="12" max="48" value="24"></div>
<div>行数:<input type="range" id="rows" min="2" max="10" value="4"></div>
<div>列数:<input type="range" id="cols" min="2" max="10" value="5"></div>
<div>整体缩放:<input type="range" id="scale" min="50" max="150" value="100">%</div>
<div>
难度:
<button class="diff-btn" data-level="小学">小学</button>
<button class="diff-btn" data-level="初中">初中</button>
<button class="diff-btn" data-level="高中">高中</button>
<button class="diff-btn" data-level="大学">大学</button>
</div>
</div>
</div>
<div id="board-wrapper">
<div id="board"></div>
</div>
<script>
// 内置常用词库示例（可扩展至上千条）
const allWords = [
{ cn: "我", en: "I" },
{ cn: "你", en: "you" },
{ cn: "他", en: "he" },
{ cn: "她", en: "she" },
{ cn: "我们", en: "we" },
{ cn: "你们", en: "you (pl.)" },
{ cn: "他们", en: "they" },
{ cn: "这", en: "this" },
{ cn: "那", en: "that" },
{ cn: "是", en: "is/are" },
{ cn: "有", en: "have" },
{ cn: "在", en: "at/in/on" },
{ cn: "来", en: "come" },
{ cn: "去", en: "go" },
{ cn: "看", en: "see/watch" },
{ cn: "说", en: "say" },
{ cn: "吃", en: "eat" },
{ cn: "喝", en: "drink" },
{ cn: "喜欢", en: "like" },
{ cn: "想", en: "want/think" },
{ cn: "知道", en: "know" },
{ cn: "会", en: "can/know how to" },
{ cn: "能", en: "be able to" },
{ cn: "要", en: "need/want" },
{ cn: "可以", en: "may/can" },
{ cn: "现在", en: "now" },
{ cn: "今天", en: "today" },
{ cn: "明天", en: "tomorrow" },
{ cn: "昨天", en: "yesterday" },
{ cn: "年", en: "year" },
{ cn: "月", en: "month" },
{ cn: "日", en: "day" },
{ cn: "时间", en: "time" },
{ cn: "人", en: "person" },
{ cn: "朋友", en: "friend" },
{ cn: "先生", en: "Mr." },
{ cn: "女士", en: "Ms." },
{ cn: "家", en: "home/family" },
{ cn: "爱", en: "love" },
{ cn: "学校", en: "school" },
{ cn: "老师", en: "teacher" },
{ cn: "学生", en: "student" },
{ cn: "工作", en: "work/job" },
{ cn: "公司", en: "company" },
{ cn: "钱", en: "money" },
{ cn: "水", en: "water" },
{ cn: "饭", en: "meal/rice" },
{ cn: "茶", en: "tea" },
{ cn: "狗", en: "dog" },
{ cn: "猫", en: "cat" },
{ cn: "书", en: "book" },
{ cn: "电影", en: "movie" },
{ cn: "音乐", en: "music" },
{ cn: "车", en: "car" },
{ cn: "飞机", en: "airplane" },
{ cn: "火车", en: "train" },
{ cn: "自行车", en: "bicycle" },
{ cn: "手机", en: "mobile phone" },
{ cn: "电脑", en: "computer" },
{ cn: "问题", en: "question" },
{ cn: "回答", en: "answer" },
{ cn: "帮助", en: "help" },
{ cn: "练习", en: "practice" },
{ cn: "地方", en: "place" },
{ cn: "东西", en: "thing" },
{ cn: "生活", en: "life" },
{ cn: "天气", en: "weather" },
{ cn: "东", en: "east" },
{ cn: "西", en: "west" },
{ cn: "南", en: "south" },
{ cn: "北", en: "north" },
{ cn: "上", en: "up" },
{ cn: "下", en: "down" },
{ cn: "左", en: "left" },
{ cn: "右", en: "right" },
{ cn: "大", en: "big" },
{ cn: "小", en: "small" },
{ cn: "高", en: "high/tall" },
{ cn: "低", en: "low" },
{ cn: "快", en: "fast" },
{ cn: "慢", en: "slow" },
{ cn: "好", en: "good" },
{ cn: "坏", en: "bad" },
{ cn: "新", en: "new" },
{ cn: "旧", en: "old" }
];
let state = {
rows:4, cols:5, level:'小学',
timer:0, score:0, moves:0, wrong:0,
firstCard:null, busy:false,
undoStack:[], pairsLeft:0,
interval:null,
bgColor:'', cardColor:'', scale:1
};
function randLightColor(){ return `rgb(${200+Math.random()*55|0},${200+Math.random()*55|0},${200+Math.random()*55|0})`; }
function randAccent(){ return `rgb(${50+Math.random()*200|0},${50+Math.random()*200|0},${50+Math.random()*200|0})`; }
function shuffle(arr){ for(let i=arr.length-1;i>0;i--){ let j=Math.random()*(i+1)|0; [arr[i],arr[j]]=[arr[j],arr[i]]; }}
function startGame(){
clearInterval(state.interval);
state.timer=0; state.score=0; state.moves=0; state.wrong=0; state.firstCard=null;
state.undoStack=[]; updateStatus();
const total = state.rows * state.cols / 2 | 0;
state.pairsLeft = total;
// 随机背景色和卡片色
state.bgColor = randLightColor();
state.cardColor = randLightColor();
document.body.style.background = state.bgColor;
// 选词
const pool = allWords.slice().sort(()=>Math.random()-0.5).slice(0, total);
const cards = [];
pool.forEach(p=>{ cards.push({...p, type:'cn'}); cards.push({...p, type:'en'}); });
shuffle(cards);
renderBoard(cards);
state.interval = setInterval(()=>{ state.timer++; updateTimer(); },1000);
}
function renderBoard(cards){
const board = document.getElementById('board'); board.innerHTML='';
board.style.gridTemplateRows = `repeat(${state.rows},1fr)`;
board.style.gridTemplateColumns = `repeat(${state.cols},1fr)`;
// 间距基于卡片大小
const size = +document.getElementById('card-size').value;
board.style.gap = (size * 0.05) + 'px';
cards.forEach(c=>{
const d = document.createElement('div');
d.className = 'card';
d.textContent = c.type==='cn'?c.cn:c.en;
d.dataset.cn = c.cn; d.dataset.en = c.en; d.dataset.type = c.type;
d.style.background = state.cardColor;
applySizes(d);
d.onclick = ()=> onCardClick(d);
board.appendChild(d);
});
applyScale();
}
function applySizes(d){
const s = document.getElementById('card-size').value;
const f = document.getElementById('font-size').value;
d.style.width = d.style.height = s + 'px';
d.style.fontSize = f + 'px';
}
function applyScale(){
const wrapper = document.getElementById('board-wrapper');
wrapper.style.transform = `scale(${state.scale})`;
}
function updateStatus(){ /* 同前 */ document.getElementById('score').textContent=state.score; document.getElementById('moves').textContent=state.moves; document.getElementById('wrong').textContent=state.wrong; }
function updateTimer(){ const m=String((state.timer/60|0)).padStart(2,'0'), s=String(state.timer%60).padStart(2,'0'); document.getElementById('timer').textContent=`${m}:${s}`; }
function onCardClick(card){ if(state.busy||card.classList.contains('removed')) return; card.style.background = randAccent(); if(!state.firstCard) state.firstCard = card; else { state.busy=true; state.moves++; updateStatus(); const a=state.firstCard,b=card; const match=a.dataset.cn===b.dataset.cn&&a.dataset.type!==b.dataset.type; if(match){ state.score+=10; state.pairsLeft--; state.undoStack.push([a,b]); setTimeout(()=>{ if(state.pairsLeft===1){ [a,b].forEach(x=>x.style.animation='lastPair 0.8s forwards'); setTimeout(()=>alert('恭喜，你赢了！'),800);} else { a.classList.add('removed'); b.classList.add('removed'); } state.firstCard=null; state.busy=false; updateStatus(); },300);} else { state.wrong++; state.undoStack.push(['miss',a,b]); setTimeout(()=>{ a.style.background=state.cardColor; b.style.background=state.cardColor; state.firstCard=null; state.busy=false; updateStatus(); },800);} }}
// 事件绑定
['card-size','font-size','rows','cols'].forEach(id=>{ document.getElementById(id).oninput=e=>{ if(id==='rows') state.rows=+e.target.value; if(id==='cols') state.cols=+e.target.value; startGame(); }; });
document.getElementById('scale').oninput=e=>{ state.scale=e.target.value/100; applyScale(); };
document.querySelectorAll('.diff-btn').forEach(b=>b.onclick=()=>{ state.level=b.dataset.level; startGame(); });
document.getElementById('undo').onclick=()=>{ if(!state.undoStack.length||state.busy) return; const last=state.undoStack.pop(); if(last[0]==='miss'){ const[,a,b]=last; a.style.background=state.cardColor; b.style.background=state.cardColor; state.moves--; state.wrong--; updateStatus(); } else { const[a,b]=last; a.classList.remove('removed'); b.classList.remove('removed'); state.score-=10; state.pairsLeft++; state.moves--; updateStatus(); }};
document.getElementById('settings-btn').onmouseover=()=>document.getElementById('settings-panel').style.display='block';
document.getElementById('settings-panel').onmouseleave=()=>document.getElementById('settings-panel').style.display='none';
window.onload=startGame;
</script>
</body>
</html>