三科合并版

小学三科消消乐

选择英语、语文词语拼音、语文汉字拼音、语文成语接龙或数学后开始游戏。配对玩法会隐藏正确卡片，成语接龙会滑动连出四字成语并接龙消除。

点击用户名查看积分获取列表；积分按当前用户分别累计。

英语年级学期

数学年级题型

题量 / 目标

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水果消消乐</title>
  <style>
    :root {
      --bg: #fff7df;
      --ink: #243326;
      --muted: #6c7868;
      --card: rgba(255, 255, 255, 0.78);
      --line: rgba(52, 78, 46, 0.14);
      --accent: #f07f3c;
      --accent-deep: #c14f20;
      --leaf: #23895a;
      --leaf-deep: #126144;
      --sun: #ffd75e;
      --danger: #c73d2e;
      --shadow: 0 22px 52px rgba(47, 68, 39, 0.18);
      --size: 7;
    }

* { box-sizing: border-box; }

body {
      min-height: 100vh;
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 14% 8%, rgba(255, 215, 94, 0.55), transparent 27%),
        radial-gradient(circle at 88% 12%, rgba(240, 127, 60, 0.35), transparent 24%),
        radial-gradient(circle at 25% 92%, rgba(35, 137, 90, 0.26), transparent 32%),
        linear-gradient(135deg, #fff8df 0%, #f2f7da 52%, #e2f2d5 100%);
      font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }

button, select {
      font: inherit;
    }

.shell {
      width: min(1120px, calc(100% - 28px));
      margin: 0 auto;
      padding: 20px 0 28px;
    }

.hero {
      position: relative;
      overflow: hidden;
      display: block;
      border: 1px solid var(--line);
      border-radius: 32px;
      padding: 22px;
      background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54)),
        repeating-linear-gradient(45deg, rgba(35, 137, 90, 0.06) 0 1px, transparent 1px 18px);
      box-shadow: var(--shadow);
    }

.hero::after {
      content: "FRUIT";
      position: absolute;
      right: -18px;
      bottom: -28px;
      color: rgba(35, 137, 90, 0.08);
      font-size: clamp(70px, 14vw, 150px);
      font-weight: 1000;
      letter-spacing: -8px;
      pointer-events: none;
    }

.hero-main {
      position: relative;
      z-index: 1;
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      border-radius: 999px;
      padding: 7px 12px;
      color: var(--leaf-deep);
      background: rgba(35, 137, 90, 0.12);
      font-size: 13px;
      font-weight: 900;
    }

h1 {
      margin: 0 0 10px;
      color: #173324;
      font-size: clamp(38px, 7vw, 72px);
      line-height: 0.95;
      letter-spacing: -2px;
    }

.layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      margin-top: 16px;
      align-items: start;
    }

.panel {
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 16px;
      background: var(--card);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

.controls {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      align-items: end;
      margin-bottom: 14px;
    }

.controls-toggle {
      display: none;
      width: 100%;
      min-height: 36px;
      margin-bottom: 10px;
      border: 1px solid rgba(35, 137, 90, 0.18);
      border-radius: 999px;
      color: var(--leaf-deep);
      background: rgba(255, 255, 255, 0.82);
      font-weight: 1000;
    }

body.controls-collapsed .controls {
      display: none;
    }

body.controls-collapsed .controls-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

body.game-running .controls,
    body.game-running .status,
    body.game-running .controls-toggle {
      display: none;
    }

label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

select,
    .btn {
      min-height: 44px;
      border: 1px solid rgba(35, 137, 90, 0.18);
      border-radius: 15px;
      padding: 9px 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.82);
      outline: none;
    }

.btn {
      cursor: pointer;
      color: white;
      background: linear-gradient(135deg, var(--leaf), var(--leaf-deep));
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(18, 97, 68, 0.2);
      transition: transform 0.15s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }

.btn.secondary {
      color: var(--leaf-deep);
      background: rgba(255, 255, 255, 0.86);
      box-shadow: none;
    }

.btn:active {
      transform: translateY(1px) scale(0.99);
    }

.stats {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

.stat {
      border: 1px solid rgba(52, 78, 46, 0.12);
      border-radius: 18px;
      padding: 11px 12px;
      background: rgba(255, 255, 255, 0.7);
    }

.stat span {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

.stat b {
      font-size: clamp(19px, 3vw, 26px);
      line-height: 1;
    }

.status {
      min-height: 42px;
      margin: 0 0 14px;
      border-radius: 16px;
      padding: 10px 13px;
      color: var(--leaf-deep);
      background: rgba(35, 137, 90, 0.1);
      font-weight: 900;
      line-height: 1.45;
    }

.board-wrap {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(52, 78, 46, 0.16);
      border-radius: 26px;
      padding: 12px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 222, 0.76)),
        repeating-linear-gradient(90deg, rgba(35, 137, 90, 0.05) 0 1px, transparent 1px 38px);
    }

.board {
      display: grid;
      grid-template-columns: repeat(var(--size), minmax(0, 1fr));
      gap: clamp(5px, 1.1vw, 9px);
      touch-action: manipulation;
      user-select: none;
    }

.fruit-cell {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      min-width: 0;
      border: 1px solid rgba(52, 78, 46, 0.13);
      border-radius: clamp(12px, 2.2vw, 20px);
      padding: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(180deg, #fffdf1, #f3e6b8);
      box-shadow: inset 0 -5px 0 rgba(60, 52, 32, 0.05), 0 9px 18px rgba(47, 68, 39, 0.13);
      cursor: pointer;
      font-size: clamp(25px, 6.5vw, 50px);
      line-height: 1;
      transition: transform 0.16s ease, opacity 0.18s ease, box-shadow 0.16s ease, filter 0.16s ease;
      -webkit-tap-highlight-color: transparent;
    }

.fruit-cell.is-selected {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 0 0 4px rgba(240, 127, 60, 0.2), 0 16px 24px rgba(47, 68, 39, 0.18);
      filter: saturate(1.12);
    }

.fruit-cell.is-clearing {
      opacity: 0;
      transform: scale(0.35) rotate(14deg);
    }

.fruit-cell.is-hint {
      box-shadow: 0 0 0 4px rgba(255, 215, 94, 0.58), 0 16px 24px rgba(47, 68, 39, 0.18);
      animation: hintPulse 0.7s ease-in-out infinite alternate;
    }

.fruit-cell.is-wrong {
      animation: shake 0.24s ease;
    }

.fruit-cell[disabled] {
      cursor: wait;
    }

.toast {
      position: fixed;
      left: 50%;
      top: 18px;
      z-index: 20;
      max-width: min(92vw, 520px);
      border: 1px solid rgba(240, 127, 60, 0.28);
      border-radius: 999px;
      padding: 12px 18px;
      color: white;
      background: linear-gradient(135deg, var(--accent), var(--accent-deep));
      box-shadow: 0 18px 38px rgba(193, 79, 32, 0.24);
      font-weight: 1000;
      opacity: 0;
      transform: translate(-50%, -18px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

.toast.is-visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

@keyframes hintPulse {
      from { transform: scale(1); }
      to { transform: scale(1.06); }
    }

@keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }

@media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
    }

@media (max-width: 640px) {
      .shell {
        width: min(100% - 14px, 1120px);
        padding: 8px 0 16px;
      }

.hero,
      .panel {
        border-radius: 22px;
        padding: 12px;
      }

.hero::after {
        right: -8px;
        bottom: -14px;
        font-size: 78px;
        letter-spacing: -5px;
      }

.eyebrow {
        margin-bottom: 8px;
        padding: 5px 10px;
        font-size: 12px;
      }

h1 {
        max-width: 78%;
        margin-bottom: 8px;
        font-size: clamp(34px, 12vw, 48px);
      }

.layout { margin-top: 10px; }

.controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
      }

label {
        font-size: 12px;
      }

select,
      .btn {
        min-height: 42px;
        border-radius: 13px;
        padding: 8px 10px;
        font-size: 14px;
      }

.stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 10px;
      }

.stat {
        border-radius: 13px;
        padding: 8px 5px;
        text-align: center;
      }

.stat span {
        margin-bottom: 3px;
        font-size: 10px;
      }

.stat b {
        font-size: 17px;
      }

.status {
        min-height: 38px;
        margin-bottom: 10px;
        border-radius: 13px;
        padding: 8px 10px;
        font-size: 13px;
      }

.board-wrap {
        border-radius: 18px;
        padding: 7px;
      }

.board {
        gap: 5px;
      }

.fruit-cell {
        border-radius: 12px;
        font-size: clamp(22px, 8.2vw, 38px);
      }

}
  </style>
</head>
<body>
  <div class="toast" id="toast" aria-live="polite"></div>

<p class="status" id="statusText">选择难度后点击“开始游戏”。</p>

</section>
  </main>

disableLongPressAndContextMenu();

const FRUITS = {
        easy: ["🍎", "🍊", "🍋", "🍇", "🍓"],
        normal: ["🍎", "🍊", "🍋", "🍇", "🍓", "🍉"],
        hard: ["🍎", "🍊", "🍋", "🍇", "🍓", "🍉", "🍍"]
      };

const CONFIGS = {
        easy: { label: "简单", size: 6, moves: 30, target: 800 },
        normal: { label: "普通", size: 7, moves: 26, target: 1200 },
        hard: { label: "挑战", size: 8, moves: 24, target: 1700 }
      };

const STORAGE_KEY = "fruitMatchBestScores";
      const sleep = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));

const difficultySelect = document.getElementById("difficultySelect");
      const controlsToggle = document.getElementById("controlsToggle");
      const startBtn = document.getElementById("startBtn");
      const hintBtn = document.getElementById("hintBtn");
      const shuffleBtn = document.getElementById("shuffleBtn");
      const board = document.getElementById("board");
      const scoreStat = document.getElementById("scoreStat");
      const targetStat = document.getElementById("targetStat");
      const movesStat = document.getElementById("movesStat");
      const comboStat = document.getElementById("comboStat");
      const bestStat = document.getElementById("bestStat");
      const statusText = document.getElementById("statusText");
      const toast = document.getElementById("toast");

const state = {
        difficulty: "normal",
        size: CONFIGS.normal.size,
        fruits: FRUITS.normal,
        grid: [],
        selected: null,
        clearing: new Set(),
        hintCells: [],
        wrongCells: [],
        score: 0,
        moves: CONFIGS.normal.moves,
        target: CONFIGS.normal.target,
        combo: 0,
        lock: false,
        started: false,
        completed: false,
        toastTimer: null
      };

function setControlsCollapsed(collapsed) {
        document.body.classList.toggle("controls-collapsed", collapsed);
        controlsToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
      }

function notifyHost(running) {
        try {
          if (window.parent && window.parent !== window) {
            window.parent.postMessage({
              source: "merged-arcade",
              game: "fruit",
              running: !!running
            }, "*");
          }
        } catch (error) {
        }
      }

function setRunningUi(running) {
        document.body.classList.toggle("game-running", !!running);
        notifyHost(running);
      }

function saveBestScores(scores) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(scores));
      }

function bestScoreFor(difficulty) {
        const scores = loadBestScores();
        return Number(scores[difficulty] || 0);
      }

function updateBestScore() {
        const scores = loadBestScores();
        const current = Number(scores[state.difficulty] || 0);
        if (state.score > current) {
          scores[state.difficulty] = state.score;
          saveBestScores(scores);
          showToast("刷新最佳记录：" + state.score + " 分");
        }
      }

function randomFruit() {
        return state.fruits[Math.floor(Math.random() * state.fruits.length)];
      }

function indexOf(row, col) {
        return row * state.size + col;
      }

function rowOf(index) {
        return Math.floor(index / state.size);
      }

function colOf(index) {
        return index % state.size;
      }

function isAdjacent(a, b) {
        const dr = Math.abs(rowOf(a) - rowOf(b));
        const dc = Math.abs(colOf(a) - colOf(b));
        return dr + dc === 1;
      }

function swap(grid, a, b) {
        const temp = grid[a];
        grid[a] = grid[b];
        grid[b] = temp;
      }

function wouldMakeInitialMatch(grid, index, fruit) {
        const row = rowOf(index);
        const col = colOf(index);
        if (col >= 2 && grid[index - 1] === fruit && grid[index - 2] === fruit) return true;
        if (row >= 2 && grid[index - state.size] === fruit && grid[index - state.size * 2] === fruit) return true;
        return false;
      }

function findMatches(grid) {
        const matches = new Set();
        const groups = [];

for (let row = 0; row < state.size; row += 1) {
          let start = 0;
          while (start < state.size) {
            const fruit = grid[indexOf(row, start)];
            let end = start + 1;
            while (end < state.size && grid[indexOf(row, end)] === fruit) end += 1;
            if (fruit && end - start >= 3) {
              const group = [];
              for (let col = start; col < end; col += 1) {
                const index = indexOf(row, col);
                matches.add(index);
                group.push(index);
              }
              groups.push(group);
            }
            start = end;
          }
        }

for (let col = 0; col < state.size; col += 1) {
          let start = 0;
          while (start < state.size) {
            const fruit = grid[indexOf(start, col)];
            let end = start + 1;
            while (end < state.size && grid[indexOf(end, col)] === fruit) end += 1;
            if (fruit && end - start >= 3) {
              const group = [];
              for (let row = start; row < end; row += 1) {
                const index = indexOf(row, col);
                matches.add(index);
                group.push(index);
              }
              groups.push(group);
            }
            start = end;
          }
        }

return { cells: matches, groups: groups };
      }

function scoreFor(matches, groups, combo) {
        let extra = 0;
        groups.forEach(function(group) {
          if (group.length >= 4) extra += 20;
          if (group.length >= 5) extra += 40;
        });
        return matches * 10 * combo + extra;
      }

function showToast(message) {
        toast.textContent = message;
        toast.classList.add("is-visible");
        if (state.toastTimer) clearTimeout(state.toastTimer);
        state.toastTimer = window.setTimeout(function() {
          toast.classList.remove("is-visible");
        }, 1600);
      }

function updateStats() {
        scoreStat.textContent = String(state.score);
        targetStat.textContent = String(state.target);
        movesStat.textContent = String(state.moves);
        comboStat.textContent = String(state.combo);
        bestStat.textContent = String(bestScoreFor(state.difficulty));
      }

async function resolveMatches(firstMatches) {
        let result = firstMatches || findMatches(state.grid);
        state.combo = 0;

while (result.cells.size > 0) {
          state.combo += 1;
          const gained = scoreFor(result.cells.size, result.groups, state.combo);
          state.score += gained;
          state.clearing = new Set(result.cells);
          state.hintCells = [];
          statusText.textContent = "消除 " + result.cells.size + " 个水果，连锁 " + state.combo + "，获得 " + gained + " 分。";
          if (state.combo >= 2) showToast("连锁 " + state.combo + " 次，+" + gained + " 分");
          renderBoard();
          await sleep(260);

state.clearing.forEach(function(index) {
            state.grid[index] = null;
          });
          state.clearing = new Set();
          applyGravity();
          renderBoard();
          await sleep(170);

result = findMatches(state.grid);
        }

state.combo = 0;
        state.selected = null;
        state.lock = false;

if (state.score >= state.target) {
          finishGame(true);
          return;
        }

if (state.moves <= 0) {
          finishGame(false);
          return;
        }

if (!findHint()) {
          statusText.textContent = "当前没有可消除交换，已自动重新洗牌。";
          reshuffleBoard(false);
          return;
        }

statusText.textContent = "继续交换水果，目标还差 " + Math.max(0, state.target - state.score) + " 分。";
        renderBoard();
      }

async function attemptSwap(a, b) {
        if (state.lock || state.completed || !state.started) return;
        state.lock = true;
        state.hintCells = [];
        state.wrongCells = [];
        swap(state.grid, a, b);
        state.selected = null;
        renderBoard();
        await sleep(110);

const result = findMatches(state.grid);
        if (!result.cells.size) {
          swap(state.grid, a, b);
          state.wrongCells = [a, b];
          statusText.textContent = "没有连成 3 个，换个位置试试。";
          renderBoard();
          await sleep(260);
          state.wrongCells = [];
          state.lock = false;
          renderBoard();
          return;
        }

state.moves -= 1;
        await resolveMatches(result);
      }

function handleCellClick(index) {
        if (state.lock || state.completed || !state.started) return;
        if (state.selected === null) {
          state.selected = index;
          state.hintCells = [];
          statusText.textContent = "已选择一个水果，再点相邻水果交换。";
          renderBoard();
          return;
        }

if (state.selected === index) {
          state.selected = null;
          renderBoard();
          return;
        }

if (!isAdjacent(state.selected, index)) {
          state.selected = index;
          statusText.textContent = "只能和上下左右相邻的水果交换。";
          renderBoard();
          return;
        }

attemptSwap(state.selected, index);
      }

function startGame() {
        const difficulty = difficultySelect.value;
        const config = CONFIGS[difficulty];
        state.difficulty = difficulty;
        state.size = config.size;
        state.fruits = FRUITS[difficulty];
        state.score = 0;
        state.moves = config.moves;
        state.target = config.target;
        state.combo = 0;
        state.selected = null;
        state.clearing = new Set();
        state.hintCells = [];
        state.wrongCells = [];
        state.lock = false;
        state.started = true;
        state.completed = false;
        state.grid = makeGrid();
        setRunningUi(true);
        setControlsCollapsed(true);
        statusText.textContent = "本局目标 " + state.target + " 分，剩余 " + state.moves + " 步。";
        renderBoard();
      }

function reshuffleBoard(useMove) {
        if (!state.started || state.completed || state.lock) return;
        state.selected = null;
        state.hintCells = [];
        state.clearing = new Set();
        state.wrongCells = [];
        if (useMove && state.moves > 0) state.moves -= 1;
        state.grid = makeGrid();
        statusText.textContent = useMove
          ? "已重新洗牌，消耗 1 步。"
          : "棋盘已重新洗牌。";
        if (state.moves <= 0) {
          finishGame(false);
          return;
        }
        renderBoard();
      }

difficultySelect.addEventListener("change", function() {
        const config = CONFIGS[difficultySelect.value];
        state.difficulty = difficultySelect.value;
        state.size = config.size;
        state.moves = config.moves;
        state.target = config.target;
        setControlsCollapsed(false);
        updateStats();
        statusText.textContent = "已选择" + config.label + "难度，点击“开始游戏”。";
      });

controlsToggle.addEventListener("click", function() {
        setControlsCollapsed(false);
      });
      startBtn.addEventListener("click", startGame);
      hintBtn.addEventListener("click", showHint);
      shuffleBtn.addEventListener("click", function() {
        reshuffleBoard(true);
      });

updateStats();
      state.grid = makeGrid();
      renderBoard();
      setRunningUi(false);
    })();
  </script>
</body>
</html>

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>俄罗斯方块游戏机</title>
  <style>
    :root {
      --bg-a: #d8e2b9;
      --bg-b: #eef0c8;
      --shell: #21313a;
      --shell-deep: #121d23;
      --screen: #b9c99a;
      --screen-dark: #5f704d;
      --ink: #243124;
      --muted: #708166;
      --line: rgba(21, 33, 31, 0.18);
      --button: #e45b45;
      --button-deep: #9e2e27;
      --blue: #326f9f;
      --blue-deep: #1d466a;
      --shadow: 0 24px 58px rgba(17, 29, 27, 0.26);
      --cols: 10;
      --rows: 20;
    }

* { box-sizing: border-box; }

body {
      min-height: 100vh;
      min-height: 100svh;
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.58), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(228, 91, 69, 0.22), transparent 22%),
        radial-gradient(circle at 22% 86%, rgba(50, 111, 159, 0.18), transparent 26%),
        linear-gradient(135deg, var(--bg-a), var(--bg-b));
      font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
    }

button {
      font: inherit;
      -webkit-tap-highlight-color: transparent;
    }

html,
    body {
      overscroll-behavior: none;
    }

.page {
      width: min(1120px, calc(100% - 28px));
      margin: 0 auto;
      padding: 18px 0 28px;
    }

.hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      margin-bottom: 16px;
      border: 1px solid rgba(33, 49, 58, 0.14);
      border-radius: 28px;
      padding: 18px 20px;
      background: rgba(255, 255, 255, 0.52);
      box-shadow: 0 18px 42px rgba(17, 29, 27, 0.16);
      backdrop-filter: blur(14px);
    }

.eyebrow {
      display: inline-flex;
      align-items: center;
      margin-bottom: 8px;
      border-radius: 999px;
      padding: 6px 12px;
      color: #f2f6db;
      background: linear-gradient(135deg, var(--shell), var(--shell-deep));
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 1px;
    }

h1 {
      margin: 0 0 8px;
      color: var(--shell-deep);
      font-size: clamp(34px, 6vw, 66px);
      line-height: 0.95;
      letter-spacing: -2px;
    }

.hero p {
      max-width: 780px;
      margin: 0;
      color: #596650;
      font-size: 15px;
      line-height: 1.7;
    }

.key-help {
      display: grid;
      gap: 8px;
      min-width: 230px;
      border-radius: 20px;
      padding: 14px;
      color: #f2f6db;
      background: linear-gradient(150deg, var(--shell), var(--shell-deep));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      font-size: 13px;
      line-height: 1.5;
    }

.machine {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 18px;
      border: 1px solid rgba(18, 29, 35, 0.2);
      border-radius: 36px;
      padding: 20px;
      background:
        linear-gradient(145deg, #2c414c 0%, #1d2b33 52%, #111b20 100%);
      box-shadow: var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.08);
    }

.screen-panel {
      border-radius: 28px;
      padding: 16px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 34%),
        #18252b;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

.screen-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 12px;
      color: #eef4d0;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 2px;
    }

.screen {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 150px;
      gap: 14px;
      border: 10px solid #0c1418;
      border-radius: 24px;
      padding: 12px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 25%),
        repeating-linear-gradient(0deg, rgba(36, 49, 36, 0.06) 0 2px, transparent 2px 5px),
        var(--screen);
      box-shadow: inset 0 0 0 2px rgba(95, 112, 77, 0.34), inset 0 0 26px rgba(36, 49, 36, 0.18);
    }

.board-wrap {
      display: grid;
      place-items: center;
    }

.board {
      display: grid;
      width: min(100%, 360px);
      max-height: 72vh;
      aspect-ratio: 10 / 20;
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
      grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
      gap: 2px;
      border: 2px solid rgba(36, 49, 36, 0.45);
      border-radius: 8px;
      padding: 4px;
      background: rgba(79, 93, 63, 0.24);
    }

.cell,
    .preview-cell {
      min-width: 0;
      border: 1px solid rgba(36, 49, 36, 0.12);
      border-radius: 4px;
      background: rgba(239, 246, 206, 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

.cell.is-ghost {
      background: rgba(36, 49, 36, 0.2);
      border-color: rgba(36, 49, 36, 0.16);
      box-shadow: inset 0 0 0 2px rgba(36, 49, 36, 0.12);
    }

.cell.is-filled,
    .preview-cell.is-filled {
      border-color: rgba(11, 19, 22, 0.36);
      box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, 0.28),
        inset -3px -3px 0 rgba(0, 0, 0, 0.18),
        0 2px 0 rgba(36, 49, 36, 0.18);
    }

.type-I { background: #32a8b8; }
    .type-J { background: #326f9f; }
    .type-L { background: #d68135; }
    .type-O { background: #d7b842; }
    .type-S { background: #4c9d55; }
    .type-T { background: #8f5aa7; }
    .type-Z { background: #c24b41; }

.lcd-side {
      display: grid;
      align-content: start;
      gap: 10px;
      min-width: 0;
    }

.lcd-card {
      border: 2px solid rgba(36, 49, 36, 0.36);
      border-radius: 14px;
      padding: 10px;
      background: rgba(239, 246, 206, 0.23);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

.lcd-card span {
      display: block;
      margin-bottom: 5px;
      color: var(--screen-dark);
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: 1px;
    }

.lcd-card b {
      display: block;
      color: #233223;
      font-family: Consolas, "Courier New", monospace;
      font-size: 25px;
      line-height: 1;
      letter-spacing: 1px;
    }

.preview {
      display: grid;
      width: 96px;
      height: 96px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 3px;
      margin-top: 6px;
    }

.status {
      margin: 10px 0 0;
      border-radius: 14px;
      padding: 10px 12px;
      color: #eaf1cd;
      background: rgba(12, 20, 24, 0.74);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.55;
    }

.control-panel {
      display: grid;
      align-content: space-between;
      gap: 18px;
      min-height: 100%;
      border-radius: 28px;
      padding: 18px;
      background:
        radial-gradient(circle at 78% 15%, rgba(255, 255, 255, 0.08), transparent 26%),
        linear-gradient(145deg, #263a44, #17242b);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

.brand {
      color: #eef4d0;
      font-size: 22px;
      font-weight: 1000;
      letter-spacing: 3px;
      text-align: center;
    }

.brand small {
      display: block;
      margin-top: 4px;
      color: rgba(238, 244, 208, 0.65);
      font-size: 11px;
      letter-spacing: 1px;
    }

.controls-area {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: center;
    }

.dpad {
      display: grid;
      grid-template-columns: repeat(3, 52px);
      grid-template-rows: repeat(3, 52px);
      justify-content: center;
    }

.pad-btn,
    .round-btn,
    .system-btn {
      border: 0;
      color: #f6f0e6;
      cursor: pointer;
      user-select: none;
      touch-action: none;
    }

.pad-btn {
      background: linear-gradient(145deg, #273840, #111c22);
      box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.06), inset -3px -3px 0 rgba(0, 0, 0, 0.36);
      font-weight: 1000;
      font-size: 16px;
    }

.pad-btn:active,
    .pad-btn.is-pressed {
      filter: brightness(1.28);
      transform: translateY(1px);
    }

.dpad .up { grid-column: 2; grid-row: 1; border-radius: 12px 12px 5px 5px; }
    .dpad .left { grid-column: 1; grid-row: 2; border-radius: 12px 5px 5px 12px; }
    .dpad .center { grid-column: 2; grid-row: 2; border-radius: 5px; pointer-events: none; }
    .dpad .right { grid-column: 3; grid-row: 2; border-radius: 5px 12px 12px 5px; }
    .dpad .down { grid-column: 2; grid-row: 3; border-radius: 5px 5px 12px 12px; }

.action-buttons {
      display: grid;
      grid-template-columns: repeat(2, 76px);
      gap: 14px;
      justify-content: center;
      transform: rotate(-10deg);
    }

.round-btn {
      display: grid;
      place-items: center;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--button), var(--button-deep));
      box-shadow: inset 4px 4px 0 rgba(255, 255, 255, 0.18), inset -5px -5px 0 rgba(0, 0, 0, 0.24), 0 10px 18px rgba(0, 0, 0, 0.26);
      font-size: 18px;
      font-weight: 1000;
    }

.round-btn.secondary {
      margin-top: 28px;
      background: linear-gradient(145deg, var(--blue), var(--blue-deep));
    }

.round-btn:active,
    .round-btn.is-pressed {
      filter: brightness(1.16);
      transform: translateY(2px);
    }

.system-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

.system-btn {
      min-width: 86px;
      border-radius: 999px;
      padding: 9px 14px;
      color: #eaf1cd;
      background: linear-gradient(145deg, #3e535d, #1a2930);
      box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), inset -3px -3px 0 rgba(0, 0, 0, 0.24);
      font-size: 13px;
      font-weight: 1000;
    }

.system-btn:active,
    .system-btn.is-pressed {
      transform: translateY(1px);
      filter: brightness(1.18);
    }

.notes {
      color: rgba(238, 244, 208, 0.72);
      font-size: 12px;
      line-height: 1.65;
      text-align: center;
    }

.toast {
      position: fixed;
      left: 50%;
      top: 18px;
      z-index: 30;
      max-width: min(92vw, 520px);
      border-radius: 999px;
      padding: 11px 18px;
      color: #f4f7dc;
      background: linear-gradient(145deg, #263a44, #121d23);
      box-shadow: 0 18px 42px rgba(17, 29, 27, 0.24);
      font-weight: 1000;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -18px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

.toast.is-visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

@media (max-width: 980px) {
      .hero,
      .machine {
        grid-template-columns: 1fr;
      }

.key-help {
        min-width: 0;
      }

.screen {
        grid-template-columns: minmax(0, 1fr) 132px;
      }

.control-panel {
        min-height: 0;
      }
    }

@media (max-width: 640px) {
      .page {
        width: min(100% - 10px, 1120px);
        padding: 6px 0 10px;
      }

.hero {
        gap: 10px;
        margin-bottom: 8px;
        border-radius: 18px;
        padding: 9px 10px;
      }

.eyebrow {
        margin-bottom: 5px;
        padding: 4px 8px;
        font-size: 10px;
        letter-spacing: 0.5px;
      }

h1 {
        margin-bottom: 4px;
        font-size: clamp(28px, 9vw, 38px);
        letter-spacing: -1px;
      }

.hero p,
      .key-help {
        font-size: 12px;
        line-height: 1.5;
      }

.hero p {
        display: none;
      }

.key-help {
        grid-template-columns: 1fr;
        gap: 4px;
        border-radius: 16px;
        padding: 8px 10px;
      }

.machine {
        gap: 8px;
        border-radius: 22px;
        padding: 8px;
      }

.screen-panel,
      .control-panel {
        border-radius: 17px;
        padding: 8px;
      }

.screen-top {
        margin-bottom: 6px;
        font-size: 10px;
        letter-spacing: 0.8px;
      }

.screen {
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 6px;
        border-width: 6px;
        border-radius: 18px;
        padding: 6px;
      }

.board {
        gap: 1px;
        width: min(100%, 42svh);
        max-height: 54svh;
        padding: 2px;
        border-radius: 6px;
      }

.cell,
      .preview-cell {
        border-radius: 3px;
      }

.lcd-side {
        gap: 5px;
      }

.lcd-card {
        border-radius: 10px;
        padding: 6px;
      }

.lcd-card span {
        margin-bottom: 2px;
        font-size: 9px;
        letter-spacing: 0.4px;
      }

.lcd-card b {
        font-size: 16px;
      }

.preview {
        width: 58px;
        height: 58px;
        gap: 2px;
        margin-top: 3px;
      }

.status {
        margin-top: 6px;
        border-radius: 11px;
        padding: 7px 8px;
        font-size: 12px;
        line-height: 1.35;
      }

.brand {
        display: none;
      }

.controls-area {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

.dpad {
        grid-template-columns: repeat(3, min(14.5vw, 54px));
        grid-template-rows: repeat(3, min(14.5vw, 54px));
      }

.action-buttons {
        grid-template-columns: repeat(2, min(19vw, 72px));
        gap: 10px;
        transform: rotate(-8deg);
      }

.round-btn {
        width: min(19vw, 72px);
        height: min(19vw, 72px);
        font-size: 15px;
      }

.round-btn.secondary {
        margin-top: 16px;
      }

.system-row {
        gap: 8px;
        margin-top: -2px;
      }

.system-btn {
        min-width: 76px;
        padding: 8px 11px;
        font-size: 12px;
      }

.notes {
        display: none;
      }
    }

@media (max-width: 420px) {
      .hero {
        grid-template-columns: 1fr;
      }

.key-help {
        display: none;
      }

.machine {
        gap: 6px;
        padding: 6px;
      }

.screen-panel,
      .control-panel {
        padding: 6px;
      }

.screen {
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 5px;
        border-width: 5px;
        padding: 5px;
      }

.board {
        width: min(100%, 43svh);
        max-height: 53svh;
      }

.lcd-card {
        border-width: 1px;
        padding: 5px;
      }

.lcd-card b {
        font-size: 14px;
      }

.preview {
        width: 48px;
        height: 48px;
      }

.status {
        font-size: 11px;
      }

.control-panel {
        gap: 8px;
      }

.dpad {
        grid-template-columns: repeat(3, min(15.5vw, 50px));
        grid-template-rows: repeat(3, min(15.5vw, 50px));
      }

.action-buttons {
        grid-template-columns: repeat(2, min(19.5vw, 64px));
        gap: 8px;
      }

.round-btn {
        width: min(19.5vw, 64px);
        height: min(19.5vw, 64px);
        font-size: 13px;
      }

.round-btn.secondary {
        margin-top: 14px;
      }

.system-btn {
        min-width: 70px;
        padding: 7px 9px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>
  <div class="toast" id="toast" aria-live="polite"></div>

<main class="page">
    <section class="machine" aria-label="俄罗斯方块掌机">
      <div class="screen-panel">
        <div class="screen-top">
          <span>DOT MATRIX WITH STEREO SOUND</span>
          <span id="speedText">SPEED 1</span>
        </div>

<aside class="lcd-side">
            <div class="lcd-card">
              <span>NEXT</span>
              <div class="preview" id="preview" aria-label="下一个方块"></div>
            </div>
            <div class="lcd-card"><span>SCORE</span><b id="scoreText">0</b></div>
            <div class="lcd-card"><span>LINES</span><b id="linesText">0</b></div>
            <div class="lcd-card"><span>LEVEL</span><b id="levelText">1</b></div>
            <div class="lcd-card"><span>BEST</span><b id="bestText">0</b></div>
          </aside>
        </div>

<aside class="control-panel">
        <div class="brand">
          BLOCK GAME
          <small>HANDHELD CONSOLE</small>
        </div>

<div class="notes">
          长按左右键会连续移动。长按下键会快速下落。方块到顶后游戏结束，最高分会保存在当前浏览器。
        </div>
      </aside>
    </section>
  </main>

disableLongPressAndContextMenu();

const COLS = 10;
      const ROWS = 20;
      const STORAGE_KEY = "retroTetrisMachineBestScore";
      const TYPES = ["I", "J", "L", "O", "S", "T", "Z"];
      const MATRICES = {
        I: [
          [0, 0, 0, 0],
          [1, 1, 1, 1],
          [0, 0, 0, 0],
          [0, 0, 0, 0]
        ],
        J: [
          [1, 0, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        L: [
          [0, 0, 1],
          [1, 1, 1],
          [0, 0, 0]
        ],
        O: [
          [1, 1],
          [1, 1]
        ],
        S: [
          [0, 1, 1],
          [1, 1, 0],
          [0, 0, 0]
        ],
        T: [
          [0, 1, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        Z: [
          [1, 1, 0],
          [0, 1, 1],
          [0, 0, 0]
        ]
      };
      const LINE_SCORES = [0, 100, 300, 500, 800];

const boardEl = document.getElementById("board");
      const previewEl = document.getElementById("preview");
      const scoreText = document.getElementById("scoreText");
      const linesText = document.getElementById("linesText");
      const levelText = document.getElementById("levelText");
      const bestText = document.getElementById("bestText");
      const speedText = document.getElementById("speedText");
      const statusText = document.getElementById("statusText");
      const toast = document.getElementById("toast");
      const muteBtn = document.getElementById("muteBtn");
      const actionButtons = Array.from(document.querySelectorAll("[data-action]"));

const state = {
        board: emptyBoard(),
        current: null,
        next: null,
        bag: [],
        score: 0,
        lines: 0,
        level: 1,
        running: false,
        paused: false,
        over: false,
        muted: false,
        dropCounter: 0,
        lastTime: 0,
        loopId: null,
        toastTimer: null,
        audioContext: null
      };

function notifyHost(running) {
        try {
          if (window.parent && window.parent !== window) {
            window.parent.postMessage({
              source: "merged-arcade",
              game: "tetris",
              running: !!running
            }, "*");
          }
        } catch (error) {
        }
      }

function setRunningUi(running) {
        notifyHost(running);
      }

function emptyBoard() {
        return Array.from({ length: ROWS }, function() {
          return Array(COLS).fill("");
        });
      }

function cloneMatrix(matrix) {
        return matrix.map(function(row) {
          return row.slice();
        });
      }

function shuffle(items) {
        const result = items.slice();
        for (let i = result.length - 1; i > 0; i -= 1) {
          const j = Math.floor(Math.random() * (i + 1));
          const temp = result[i];
          result[i] = result[j];
          result[j] = temp;
        }
        return result;
      }

function refillBag() {
        if (!state.bag.length) {
          state.bag = shuffle(TYPES);
        }
      }

function nextType() {
        refillBag();
        return state.bag.pop();
      }

function createPiece(type) {
        const matrix = cloneMatrix(MATRICES[type]);
        return {
          type: type,
          matrix: matrix,
          row: -getTopPadding(matrix),
          col: Math.floor((COLS - matrix[0].length) / 2)
        };
      }

function getTopPadding(matrix) {
        let padding = 0;
        for (let r = 0; r < matrix.length; r += 1) {
          if (matrix[r].some(Boolean)) break;
          padding += 1;
        }
        return padding;
      }

function isActive() {
        return state.running && !state.paused && !state.over && state.current;
      }

function dropInterval() {
        return Math.max(90, 820 - (state.level - 1) * 58);
      }

function getHighScore() {
        return Number(localStorage.getItem(STORAGE_KEY) || 0);
      }

function setHighScore(score) {
        localStorage.setItem(STORAGE_KEY, String(score));
      }

function showToast(message) {
        toast.textContent = message;
        toast.classList.add("is-visible");
        if (state.toastTimer) clearTimeout(state.toastTimer);
        state.toastTimer = window.setTimeout(function() {
          toast.classList.remove("is-visible");
        }, 1500);
      }

function spawnPiece() {
        state.current = createPiece(state.next || nextType());
        state.next = nextType();
        if (collides(state.current, 0, 0)) {
          endGame();
        }
      }

function movePiece(dx) {
        if (!isActive()) return false;
        if (!collides(state.current, 0, dx)) {
          state.current.col += dx;
          playTone(240, 0.035, "square");
          render();
          return true;
        }
        playTone(110, 0.04, "triangle");
        return false;
      }

function softDrop(manual) {
        if (!isActive()) return false;
        if (!collides(state.current, 1, 0)) {
          state.current.row += 1;
          if (manual) state.score += 1;
          state.dropCounter = 0;
          render();
          return true;
        }
        lockPiece();
        return false;
      }

function hardDrop() {
        if (!isActive()) return;
        let distance = 0;
        while (!collides(state.current, 1, 0)) {
          state.current.row += 1;
          distance += 1;
        }
        state.score += distance * 2;
        playTone(170, 0.08, "sawtooth");
        lockPiece();
      }

function resetGame() {
        state.board = emptyBoard();
        state.current = null;
        state.next = null;
        state.bag = [];
        state.score = 0;
        state.lines = 0;
        state.level = 1;
        state.running = true;
        state.paused = false;
        state.over = false;
        setRunningUi(true);
        state.dropCounter = 0;
        state.lastTime = performance.now();
        state.next = nextType();
        spawnPiece();
        statusText.textContent = "游戏开始。方向键移动，A 旋转，B 直接落下。";
        playTone(520, 0.07, "square");
        render();
      }

function togglePause() {
        if (!state.running || state.over) return;
        state.paused = !state.paused;
        statusText.textContent = state.paused ? "已暂停。再次按暂停继续。" : "继续游戏。";
        playTone(state.paused ? 220 : 440, 0.06, "square");
        render();
      }

function toggleMute() {
        state.muted = !state.muted;
        muteBtn.textContent = state.muted ? "音效关" : "音效开";
        statusText.textContent = state.muted ? "音效已关闭。" : "音效已打开。";
        if (!state.muted) playTone(500, 0.06, "square");
      }

function ghostRow() {
        if (!state.current) return 0;
        let offset = 0;
        while (!collides(state.current, offset + 1, 0)) {
          offset += 1;
        }
        return state.current.row + offset;
      }

function buildDisplayBoard() {
        const display = state.board.map(function(row) {
          return row.slice();
        });
        if (!state.current) return display;

state.current.matrix.forEach(function(row, r) {
          row.forEach(function(value, c) {
            if (!value) return;
            const boardRow = state.current.row + r;
            const boardCol = state.current.col + c;
            if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
              display[boardRow][boardCol] = state.current.type;
            }
          });
        });
        return display;
      }

function renderStats() {
        scoreText.textContent = String(state.score);
        linesText.textContent = String(state.lines);
        levelText.textContent = String(state.level);
        bestText.textContent = String(Math.max(getHighScore(), state.score));
        speedText.textContent = "SPEED " + state.level;
      }

function render() {
        renderBoard();
        renderPreview();
        renderStats();
      }

function bindButton(button) {
        const action = button.dataset.action;
        const repeatable = action === "left" || action === "right" || action === "down";
        let holdTimer = null;
        let repeatTimer = null;

function clearTimers() {
          button.classList.remove("is-pressed");
          if (holdTimer) clearTimeout(holdTimer);
          if (repeatTimer) clearInterval(repeatTimer);
          holdTimer = null;
          repeatTimer = null;
        }

button.addEventListener("pointerdown", function(event) {
          event.preventDefault();
          button.setPointerCapture(event.pointerId);
          button.classList.add("is-pressed");
          handleAction(action);
          if (repeatable) {
            holdTimer = window.setTimeout(function() {
              repeatTimer = window.setInterval(function() {
                handleAction(action);
              }, action === "down" ? 55 : 82);
            }, 180);
          }
        });

button.addEventListener("pointerup", clearTimers);
        button.addEventListener("pointercancel", clearTimers);
        button.addEventListener("pointerleave", clearTimers);
      }

actionButtons.forEach(bindButton);

document.addEventListener("keydown", function(event) {
        const keyMap = {
          ArrowLeft: "left",
          ArrowRight: "right",
          ArrowDown: "down",
          ArrowUp: "rotate",
          KeyX: "rotate",
          Space: "drop",
          Enter: "start",
          KeyP: "pause",
          KeyM: "mute"
        };
        const action = keyMap[event.code];
        if (!action) return;
        event.preventDefault();
        if (event.repeat && (action === "rotate" || action === "drop" || action === "start" || action === "pause" || action === "mute")) return;
        handleAction(action);
      });

render();
      state.loopId = window.requestAnimationFrame(gameLoop);
      setRunningUi(false);
    })();
  </script>
</body>
</html>

配对卡片