当前位置: 首页 > news >正文

AI生成单词消消乐游戏. HTML代码

 生成提示词

 生成网页代码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>

http://www.xdnf.cn/news/1118413.html

相关文章:

  • Opencv---blobFromImage
  • NO.4数据结构数组和矩阵|一维数组|二维数组|对称矩阵|三角矩阵|三对角矩阵|稀疏矩阵
  • 在conda的环境中安装Jupyter及其他软件包
  • SpringBoot单元测试类拿不到bean报空指针异常
  • python函数快捷的传变量地址
  • C++--红黑树封装实现set和map
  • 极矢量与轴矢量
  • Linux系统移植19:根文件系统的构建
  • leetGPU解题笔记(2)
  • C# 接口(接口可以继承接口)
  • 华为OD 处理器
  • 改进后的 OpenCV 5.x + GStreamer + Python 3.12 编译流程(适用于 Orange Pi / ARM64)
  • vue的优缺点
  • Vue 3 TypeScript 接口(Interface)使用
  • 【基于开源大模型(如deepseek)开发应用及其发展趋势的一点思考】
  • 西藏氆氇新生:牦牛绒混搭液态金属的先锋尝试
  • web:js的三种引用方式
  • MYSQL笔记1
  • 大模型之Langchain篇(二)——RAG
  • SQL的初步学习(二)(以MySQL为例)
  • 《区间dp》
  • Excalidraw:一款颠覆传统思维的免费开源绘图工具
  • DHS及HTTPS工作过程
  • JSON/AJAX/XHR/FetchAPI知识点学习整理
  • 代码随想录算法训练营第三十二天|动态规划理论基础、LeetCode 509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯
  • std::sort的核心设计思想
  • 代码随想录算法训练营第十七天
  • MongoDB数据基本介绍
  • 从 Intel MacBook 迁移到 ARM MacBook 的完整指南
  • Windows怎样同步时间服务器?