js+css实现小学成语对对碰消消乐教学游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现小学成语对对碰消消乐教学游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>成语对对碰</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<style>
:root{
  --bg:#FAF3E6;--fg:#3A2F25;--accent:#C94C4C;--accent2:#D4940A;
  --success:#3A7D5C;--card:#FFFCF0;--border:#E0D4BF;--muted:#A89880;
  --slot-bg:#FFF8E1;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'ZCOOL KuaiLe',cursive;background:var(--bg);color:var(--fg);
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;overflow-x:hidden;position:relative;
}
/* 水墨背景装饰 */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 10% 20%,rgba(201,76,76,.05) 0%,transparent 55%),
    radial-gradient(ellipse at 90% 80%,rgba(212,148,10,.05) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 10%,rgba(58,125,92,.04) 0%,transparent 50%);
}
.bg-deco{
  position:fixed;pointer-events:none;opacity:.035;color:var(--accent);
  font-size:60px;animation:bgDrift linear infinite;
}
@keyframes bgDrift{
  0%{transform:translateY(110vh) rotate(0deg)}
  100%{transform:translateY(-80px) rotate(360deg)}
}
/* 顶部 */
.top-bar{
  width:100%;max-width:500px;padding:10px 14px 2px;
  display:flex;justify-content:space-between;align-items:center;z-index:10;
}
.game-title{font-size:24px;color:var(--accent);letter-spacing:3px;
  text-shadow:1px 1px 0 rgba(201,76,76,.12)}
.top-btns{display:flex;gap:6px}
.btn-icon{
  width:36px;height:36px;border-radius:10px;border:2px solid var(--border);
  background:var(--card);color:var(--fg);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.btn-icon:hover{transform:scale(1.1);border-color:var(--accent);color:var(--accent)}
/* 状态栏 */
.status-bar{
  width:100%;max-width:500px;padding:4px 14px 6px;
  display:flex;gap:6px;z-index:10;
}
.stat{
  flex:1;background:var(--card);border:2px solid var(--border);border-radius:11px;
  padding:5px 6px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.03);
}
.stat-label{font-size:11px;color:var(--muted)}
.stat-val{font-size:20px;line-height:1.2}
.v-level{color:var(--success)}.v-score{color:var(--accent)}
.v-time{color:var(--accent2)}.v-combo{color:#E17055}
/* 成语进度 */
.idiom-progress{
  width:100%;max-width:500px;padding:2px 14px 4px;z-index:10;
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:28px;
}
.idiom-tag{
  font-size:13px;padding:2px 10px;border-radius:8px;
  border:1.5px solid var(--border);background:var(--card);color:var(--muted);
  transition:.3s;position:relative;overflow:hidden;
}
.idiom-tag.done{
  border-color:var(--success);color:var(--success);
  background:rgba(58,125,92,.08);
}
.idiom-tag.done::after{
  content:'✓';margin-left:4px;font-size:11px;
}
/* 游戏板 */
.board-wrap{z-index:10;padding:6px 0}
.board{
  background:var(--card);border:3px solid var(--border);border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.03);
  padding:10px;display:grid;gap:7px;
}
.tile{
  aspect-ratio:1;border-radius:10px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;font-weight:bold;
  border:2px solid var(--border);background:#FFFEF5;
  transition:transform .15s,border-color .15s,box-shadow .15s,opacity .25s;
  user-select:none;-webkit-tap-highlight-color:transparent;
  text-shadow:1px 1px 0 rgba(255,255,255,.5);position:relative;
}
.tile:hover{transform:scale(1.06);z-index:5}
.tile.selected{
  border-color:var(--accent2);background:var(--slot-bg);
  box-shadow:0 0 0 2px var(--accent2),0 0 14px rgba(212,148,10,.25);
  transform:scale(1.08);z-index:10;
}
.tile.hint-glow{
  animation:hintPulse .7s ease infinite alternate;
}
@keyframes hintPulse{
  0%{box-shadow:0 0 0 0 transparent;transform:s.........完整代码请登录后点击上方下载按钮下载查看