HTML2048小游戏

睿智的海鸥
已于 2024-07-17 06:11:00 修改
阅读量548
点赞数 7
文章标签： html css 前端 javascript css3
于 2024-07-17 06:01:35 首次发布
本文链接：https://blog.csdn.net/w11111xxxl/article/details/140482883
版权
源代码在效果图后面

效果图

源代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2048 Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f7f7f7;
      font-family: Arial, sans-serif;
    }

   .game-container {
      width: 400px;
      height: 400px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

   .tile {
      width: 25%;
      height: 25%;
      box-sizing: border-box;
      position: relative;
      background: #fff;
      border: 1px solid #eaeaea;
      margin: 0;
      float: left;
      text-align: center;
      line-height: 100px;
      font-size: 48px;
      color: #776e65;
      border-radius: 10px;
      transition: transform 0.2s;
    }

   .tile:after {
      content: '';
      display: block;
      padding-top: 100%;
    }

   .tile.new {
      animation: slideIn 0.5s;
    }

   .tile.tile-2 {
      background: #eee4da;
    }

   .tile.tile-4 {
      background: #ede0c8;
    }

   .tile.tile-8 {
      background: #f2b47b;
    }

   .tile.tile-16 {
      background: #f59563;
    }

   .tile.tile-32 {
      background: #f67c5f;
    }

   .tile.tile-64 {
      background: #f65e3b;
    }

   .tile.tile-128 {
      background: #edcf72;
    }

   .tile.tile-256 {
      background: #edcc61;
    }

   .tile.tile-512 {
      background: #edc850;
    }

   .tile.tile-1024 {
      background: #edc53f;
    }

   .tile.tile-2048 {
      background: #edc22e;
    }

    @keyframes slideIn {
      0% {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      100% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }
  </style>
</head>

<body>
  <div class="game-container" id="game-container"></div>
  <div style="margin-top: 20px;">
    <button onclick="moveUp()">上</button>
    <button onclick="moveDown()">下</button>
    <button onclick="moveLeft()">左</button>
    <button onclick="moveRight()">右</button>
  </div>
  <script>
    const container = document.getElementById('game-container');
    let grid = [];
    let score = 0;

    function createGrid() {
      for (let i = 0; i < 4; i++) {
        const row = [];
        for (let j = 0; j < 4; j++) {
          const tile = document.createElement('div');
          tile.classList.add('tile');
          tile.dataset.row = i;
          tile.dataset.col = j;
          container.appendChild(tile);
          row.push(tile);
        }
        grid.push(row);
      }
    }

    function addRandomTile() {
      const emptyCells = [];
      grid.forEach((row, rowIndex) => {
        row.forEach((tile, colIndex) => {
          if (!tile.classList.contains('tile-2') &&!tile.classList.contains('tile-4') &&!tile.classList.contains('tile-8') &&!tile.classList.contains('tile-16') &&!tile.classList.contains('tile-32') &&!tile.classList.contains('tile-64') &&!tile.classList.contains('tile-128') &&!tile.classList.contains('tile-256') &&!tile.classList.contains('tile-512') &&!tile.classList.contains('tile-1024') &&!tile.classList.contains('tile-2048')) {
            emptyCells.push({ row: rowIndex, col: colIndex });
          }
        });
      });
      if (emptyCells.length) {
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const cell = emptyCells[randomIndex];
        const value = Math.random() > 0.5? 2 : 4;
        addTile(cell.row, cell.col, value);
      }
    }

    function addTile(row, col, value) {
      const tile = grid[row][col];
      tile.classList.add(`tile-${value}`);
      tile.textContent = value;
    }

    function removeTile(row, col) {
      const tile = grid[row][col];
      tile.classList.remove('tile-2', 'tile-4', 'tile-8', 'tile-16', 'tile-32', 'tile-64', 'tile-128', 'tile-256', 'tile-512', 'tile-1024', 'tile-2048');
      tile.textContent = '';
    }

    function moveUp() {
      for (let col = 0; col < 4; col++) {
        let merged = false;
        let newRow = [];
        for (let row = 0; row < 4; row++) {
          const tile = grid[row][col];
          if (tile.textContent === '') continue;
          let currentValue = parseInt(tile.textContent);
          if (newRow.length === 0) {
            newRow.push(currentValue);
          } else {
            const lastValue = newRow[newRow.length - 1];
            if (lastValue === currentValue &&!merged) {
              newRow[newRow.length - 1] = currentValue * 2;
              score += currentValue * 2;
              merged = true;
            } else {
              newRow.push(currentValue);
              merged = false;
            }
          }
        }
        for (let row = 0; row < 4; row++) {
          if (row < newRow.length) {
            addTile(row, col, newRow[row]);
          } else {
            removeTile(row, col);
          }
        }
      }
      addRandomTile();
    }

    function moveDown() {
      for (let col = 0; col < 4; col++) {
        let merged = false;
        let newRow = [];
        for (let row = 3; row >= 0; row--) {
          const tile = grid[row][col];
          if (tile.textContent === '') continue;
          let currentValue = parseInt(tile.textContent);
          if (newRow.length === 0) {
            newRow.push(currentValue);
          } else {
            const lastValue = newRow[newRow.length - 1];
            if (lastValue === currentValue &&!merged) {
              newRow[newRow.length - 1] = currentValue * 2;
              score += currentValue * 2;
              merged = true;
            } else {
              newRow.push(currentValue);
              merged = false;
            }
          }
        }
        for (let row = 3; row >= 0; row--) {
          if (3 - row < newRow.length) {
            addTile(row, col, newRow[3 - row]);
          } else {
            removeTile(row, col);
          }
        }
      }
      addRandomTile();
    }

    function moveLeft() {
      for (let row = 0; row < 4; row++) {
        let merged = false;
        let newCol = [];
        for (let col = 0; col < 4; col++) {
          const tile = grid[row][col];
          if (tile.textContent === '') continue;
          let currentValue = parseInt(tile.textContent);
          if (newCol.length === 0) {
            newCol.push(currentValue);
          } else {
            const lastValue = newCol[newCol.length - 1];
            if (lastValue === currentValue &&!merged) {
              newCol[newCol.length - 1] = currentValue * 2;
              score += currentValue * 2;
              merged = true;
            } else {
              newCol.push(currentValue);
              merged = false;
            }
          }
        }
        for (let col = 0; col < 4; col++) {
          if (col < newCol.length) {
            addTile(row, col, newCol[col]);
          } else {
            removeTile(row, col);
          }
        }
      }
      addRandomTile();
    }

    function moveRight() {
      for (let row = 0; row < 4; row++) {
        let merged = false;
        let newCol = [];
        for (let col = 3; col >= 0; col--) {
          const tile = grid[row][col];
          if (tile.textContent === '') continue;
          let currentValue = parseInt(tile.textContent);
          if (newCol.length === 0) {
            newCol.push(currentValue);
          } else {
            const lastValue = newCol[newCol.length - 1];
            if (lastValue === currentValue &&!merged) {
              newCol[newCol.length - 1] = currentValue * 2;
              score += currentValue * 2;
              merged = true;
            } else {
              newCol.push(currentValue);
              merged = false;
            }
          }
        }
        for (let col = 3; col >= 0; col--) {
          if (3 - col < newCol.length) {
            addTile(row, col, newCol[3 - col]);
          } else {
            removeTile(row, col);
          }
        }
      }
      addRandomTile();
    }

    function checkGameEnd() {
      // 检查是否无法再进行移动
      let canMove = false;
      for (let row = 0; row < 4; row++) {
        for (let col = 0; col < 4; col++) {
          const tile = grid[row][col];
          if (tile.textContent === '') {
            canMove = true;
            break;
          }
          if (row > 0 && parseInt(grid[row - 1][col].textContent) === parseInt(tile.textContent)) {
            canMove = true;
            break;
          }
          if (row < 3 && parseInt(grid[row + 1][col].textContent) === parseInt(tile.textContent)) {
            canMove = true;
            break;
          }
          if (col > 0 && parseInt(grid[row][col - 1].textContent) === parseInt(tile.textContent)) {
            canMove = true;
            break;
          }
          if (col < 3 && parseInt(grid[row][col + 1].textContent) === parseInt(tile.textContent)) {
            canMove = true;
            break;
          }
        }
        if (canMove) break;
      }
      if (!canMove) {
        alert('游戏结束！你的得分是：' + score);
      }
    }

    document.addEventListener('keydown', (e) => {
      switch (e.key) {
        case 'ArrowUp':
          moveUp();
          break;
        case 'ArrowDown':
          moveDown();
          break;
        case 'ArrowLeft':
          moveLeft();
          break;
        case 'ArrowRight':
          moveRight();
          break;
      }
    });

    createGrid();
    addRandomTile();
    addRandomTile();
  </script>
</body>

</html>