zhangjidong
/
aice


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
							<!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: #0f172a;
      --bg-b: #111827;
      --panel: rgba(17, 24, 39, 0.86);
      --line: #334155;
      --text: #e2e8f0;
      --muted: #94a3b8;
      --accent: #22d3ee;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: radial-gradient(circle at 20% 20%, #1e293b 0%, var(--bg-a) 45%, var(--bg-b) 100%);
      display: grid;
      place-items: center;
      padding: 20px;
    }
    .wrap {
      width: min(920px, 100%);
      display: grid;
      grid-template-columns: minmax(280px, 420px) minmax(240px, 1fr);
      gap: 20px;
    }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(2, 6, 23, 0.4);
      overflow: hidden;
    }
    .board {
      padding: 16px;
      display: grid;
      place-items: center;
    }
    #game {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 2;
      background: #020617;
      border: 1px solid #1e293b;
      border-radius: 12px;
      display: block;
    }
    .side {
      padding: 20px;
      display: grid;
      gap: 16px;
      align-content: start;
    }
    h1 {
      margin: 0;
      font-size: 26px;
      letter-spacing: 0.5px;
    }
    .sub {
      color: var(--muted);
      font-size: 14px;
      margin-top: 4px;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 10px;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: rgba(2, 6, 23, 0.35);
    }
    .label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
    .value { font-size: 22px; font-weight: 700; color: #f8fafc; }
    .next-box {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
      background: rgba(2, 6, 23, 0.35);
    }
    #next {
      width: 100%;
      max-width: 180px;
      aspect-ratio: 1 / 1;
      background: #020617;
      border-radius: 10px;
      border: 1px solid #1e293b;
      display: block;
    }
    .btns {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    button {
      cursor: pointer;
      border: 1px solid var(--line);
      background: #0b1220;
      color: var(--text);
      padding: 9px 14px;
      border-radius: 10px;
      font-weight: 600;
    }
    button.primary {
      background: linear-gradient(135deg, #0891b2, #06b6d4);
      color: #062026;
      border-color: #22d3ee;
    }
    .keys {
      border: 1px dashed var(--line);
      border-radius: 12px;
      padding: 12px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
      background: rgba(2, 6, 23, 0.2);
    }
    .status {
      color: var(--accent);
      font-weight: 700;
      font-size: 14px;
      min-height: 20px;
    }
    @media (max-width: 760px) {
      .wrap { grid-template-columns: 1fr; }
      .board { order: 1; }
      .side { order: 2; }
    }
  </style>
</head>
<body>
  <main class="wrap">
    <section class="panel board">
      <canvas id="game" width="300" height="600"></canvas>
    </section>

    <aside class="panel side">
      <div>
        <h1>俄罗斯方块</h1>
        <div class="sub">路径: /admin/game/tetris</div>
      </div>

      <div class="stats">
        <div class="card">
          <div class="label">分数</div>
          <div class="value" id="score">0</div>
        </div>
        <div class="card">
          <div class="label">等级</div>
          <div class="value" id="level">1</div>
        </div>
        <div class="card">
          <div class="label">消除行数</div>
          <div class="value" id="lines">0</div>
        </div>
        <div class="card">
          <div class="label">最高分</div>
          <div class="value" id="best">0</div>
        </div>
      </div>

      <div class="next-box">
        <div class="label">下一个方块</div>
        <canvas id="next" width="160" height="160"></canvas>
      </div>

      <div class="btns">
        <button class="primary" id="startBtn">开始 / 重新开始</button>
        <button id="pauseBtn">暂停</button>
      </div>

      <div class="status" id="status">按“开始”后即可游戏</div>

      <div class="keys">
        ← / → : 左右移动<br>
        ↑ : 旋转<br>
        ↓ : 加速下落<br>
        空格 : 直接落到底<br>
        P : 暂停 / 继续
      </div>
    </aside>
  </main>

  <script>
    (function () {
      const COLS = 10;
      const ROWS = 20;
      const BLOCK = 30;

      const SHAPES = {
        I: [[1, 1, 1, 1]],
        O: [[1, 1], [1, 1]],
        T: [[0, 1, 0], [1, 1, 1]],
        S: [[0, 1, 1], [1, 1, 0]],
        Z: [[1, 1, 0], [0, 1, 1]],
        J: [[1, 0, 0], [1, 1, 1]],
        L: [[0, 0, 1], [1, 1, 1]]
      };

      const COLORS = {
        I: '#38bdf8',
        O: '#facc15',
        T: '#a78bfa',
        S: '#4ade80',
        Z: '#fb7185',
        J: '#60a5fa',
        L: '#fb923c'
      };

      const gameCanvas = document.getElementById('game');
      const gameCtx = gameCanvas.getContext('2d');
      const nextCanvas = document.getElementById('next');
      const nextCtx = nextCanvas.getContext('2d');

      const scoreEl = document.getElementById('score');
      const levelEl = document.getElementById('level');
      const linesEl = document.getElementById('lines');
      const bestEl = document.getElementById('best');
      const statusEl = document.getElementById('status');
      const startBtn = document.getElementById('startBtn');
      const pauseBtn = document.getElementById('pauseBtn');

      const BEST_KEY = 'tetris_best_score_v1';

      let board = [];
      let current = null;
      let next = null;
      let dropCounter = 0;
      let lastTime = 0;
      let isRunning = false;
      let isPaused = false;

      let score = 0;
      let lines = 0;
      let level = 1;
      let best = Number(localStorage.getItem(BEST_KEY) || 0);
      bestEl.textContent = String(best);

      function createBoard() {
        return Array.from({ length: ROWS }, () => Array(COLS).fill(null));
      }

      function pickType() {
        const types = Object.keys(SHAPES);
        return types[Math.floor(Math.random() * types.length)];
      }

      function createPiece(type) {
        return {
          type,
          shape: SHAPES[type].map(row => row.slice()),
          x: Math.floor(COLS / 2) - Math.ceil(SHAPES[type][0].length / 2),
          y: 0
        };
      }

      function rotate(shape) {
        const h = shape.length;
        const w = shape[0].length;
        const out = Array.from({ length: w }, () => Array(h).fill(0));
        for (let y = 0; y < h; y++) {
          for (let x = 0; x < w; x++) {
            out[x][h - y - 1] = shape[y][x];
          }
        }
        return out;
      }

      function collides(piece, dx = 0, dy = 0, shape = piece.shape) {
        for (let y = 0; y < shape.length; y++) {
          for (let x = 0; x < shape[y].length; x++) {
            if (!shape[y][x]) continue;
            const nx = piece.x + x + dx;
            const ny = piece.y + y + dy;
            if (nx < 0 || nx >= COLS || ny >= ROWS) return true;
            if (ny >= 0 && board[ny][nx]) return true;
          }
        }
        return false;
      }

      function merge(piece) {
        for (let y = 0; y < piece.shape.length; y++) {
          for (let x = 0; x < piece.shape[y].length; x++) {
            if (piece.shape[y][x]) {
              const by = piece.y + y;
              const bx = piece.x + x;
              if (by >= 0) board[by][bx] = piece.type;
            }
          }
        }
      }

      function clearLines() {
        let cleared = 0;
        for (let y = ROWS - 1; y >= 0; y--) {
          if (board[y].every(cell => cell !== null)) {
            board.splice(y, 1);
            board.unshift(Array(COLS).fill(null));
            cleared++;
            y++;
          }
        }
        if (cleared > 0) {
          lines += cleared;
          score += [0, 100, 300, 500, 800][cleared] * level;
          level = 1 + Math.floor(lines / 10);
          refreshStats();
        }
      }

      function refreshStats() {
        scoreEl.textContent = String(score);
        linesEl.textContent = String(lines);
        levelEl.textContent = String(level);
      }

      function spawn() {
        if (!next) next = createPiece(pickType());
        current = next;
        current.x = Math.floor(COLS / 2) - Math.ceil(current.shape[0].length / 2);
        current.y = 0;
        next = createPiece(pickType());
        drawNext();

        if (collides(current, 0, 0)) {
          isRunning = false;
          statusEl.textContent = '游戏结束，点击“开始 / 重新开始”再来一局';
          if (score > best) {
            best = score;
            localStorage.setItem(BEST_KEY, String(best));
            bestEl.textContent = String(best);
          }
        }
      }

      function move(dx) {
        if (!current || !isRunning || isPaused) return;
        if (!collides(current, dx, 0)) current.x += dx;
      }

      function softDrop() {
        if (!current || !isRunning || isPaused) return;
        if (!collides(current, 0, 1)) {
          current.y += 1;
        } else {
          lockAndContinue();
        }
      }

      function hardDrop() {
        if (!current || !isRunning || isPaused) return;
        while (!collides(current, 0, 1)) {
          current.y += 1;
          score += 2;
        }
        refreshStats();
        lockAndContinue();
      }

      function lockAndContinue() {
        merge(current);
        clearLines();
        spawn();
      }

      function rotateCurrent() {
        if (!current || !isRunning || isPaused) return;
        const rotated = rotate(current.shape);
        if (!collides(current, 0, 0, rotated)) {
          current.shape = rotated;
          return;
        }
        if (!collides(current, -1, 0, rotated)) {
          current.x -= 1;
          current.shape = rotated;
          return;
        }
        if (!collides(current, 1, 0, rotated)) {
          current.x += 1;
          current.shape = rotated;
        }
      }

      function drawCell(ctx, x, y, color, size) {
        ctx.fillStyle = color;
        ctx.fillRect(x * size, y * size, size, size);
        ctx.strokeStyle = 'rgba(15, 23, 42, 0.8)';
        ctx.lineWidth = 1;
        ctx.strokeRect(x * size + 0.5, y * size + 0.5, size - 1, size - 1);
      }

      function drawBoard() {
        gameCtx.fillStyle = '#020617';
        gameCtx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);

        for (let y = 0; y < ROWS; y++) {
          for (let x = 0; x < COLS; x++) {
            const t = board[y][x];
            if (t) drawCell(gameCtx, x, y, COLORS[t], BLOCK);
          }
        }

        if (current) {
          for (let y = 0; y < current.shape.length; y++) {
            for (let x = 0; x < current.shape[y].length; x++) {
              if (current.shape[y][x]) {
                drawCell(gameCtx, current.x + x, current.y + y, COLORS[current.type], BLOCK);
              }
            }
          }
        }
      }

      function drawNext() {
        nextCtx.fillStyle = '#020617';
        nextCtx.fillRect(0, 0, nextCanvas.width, nextCanvas.height);
        if (!next) return;

        const size = 32;
        const shape = next.shape;
        const offsetX = Math.floor((nextCanvas.width - shape[0].length * size) / 2 / size);
        const offsetY = Math.floor((nextCanvas.height - shape.length * size) / 2 / size);

        for (let y = 0; y < shape.length; y++) {
          for (let x = 0; x < shape[y].length; x++) {
            if (shape[y][x]) drawCell(nextCtx, offsetX + x, offsetY + y, COLORS[next.type], size);
          }
        }
      }

      function getDropInterval() {
        return Math.max(100, 800 - (level - 1) * 60);
      }

      function update(time = 0) {
        const delta = time - lastTime;
        lastTime = time;

        if (isRunning && !isPaused) {
          dropCounter += delta;
          if (dropCounter >= getDropInterval()) {
            softDrop();
            dropCounter = 0;
          }
        }

        drawBoard();
        requestAnimationFrame(update);
      }

      function startGame() {
        board = createBoard();
        score = 0;
        lines = 0;
        level = 1;
        isRunning = true;
        isPaused = false;
        refreshStats();
        statusEl.textContent = '游戏进行中';
        next = createPiece(pickType());
        spawn();
      }

      function togglePause() {
        if (!isRunning) return;
        isPaused = !isPaused;
        statusEl.textContent = isPaused ? '已暂停' : '游戏进行中';
      }

      document.addEventListener('keydown', (e) => {
        if (!isRunning) return;
        if (e.code === 'ArrowLeft') { e.preventDefault(); move(-1); }
        if (e.code === 'ArrowRight') { e.preventDefault(); move(1); }
        if (e.code === 'ArrowDown') { e.preventDefault(); softDrop(); }
        if (e.code === 'ArrowUp') { e.preventDefault(); rotateCurrent(); }
        if (e.code === 'Space') { e.preventDefault(); hardDrop(); }
        if (e.code === 'KeyP') { e.preventDefault(); togglePause(); }
      });

      startBtn.addEventListener('click', startGame);
      pauseBtn.addEventListener('click', togglePause);

      board = createBoard();
      drawBoard();
      drawNext();
      requestAnimationFrame(update);
    })();
  </script>
</body>
</html>