2048 게임, 19세 개발자가 주말에 만든 400만 다운로드의 비밀

추천 배치 예시:

[1024][512][128][64]
[  8 ][16 ][32 ][  ]
[  4 ][  2][   ][  ]
[  2 ][   ][   ][  ]

이상적인 배열:

[2048][1024][512][256]
[  8 ][ 16 ][32 ][128]
[  4 ][   ][   ][ 64]
[  2 ][   ][   ][   ]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나만의 2048</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      background: #faf8ef;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    h1 {
      color: #776e65;
      font-size: 48px;
      margin-bottom: 20px;
    }

    .score-container {
      background: #bbada0;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      margin-bottom: 20px;
      font-size: 18px;
    }

    .grid-container {
      background: #bbada0;
      padding: 15px;
      border-radius: 10px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 100px);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }

    .cell {
      width: 100px;
      height: 100px;
      background: #cdc1b4;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: bold;
      color: #776e65;
      transition: all 0.15s ease;
    }

    /* 숫자별 색상 */
    .cell[data-value="2"] { background: #eee4da; }
    .cell[data-value="4"] { background: #ede0c8; }
    .cell[data-value="8"] { background: #f2b179; color: white; }
    .cell[data-value="16"] { background: #f59563; color: white; }
    .cell[data-value="32"] { background: #f67c5f; color: white; }
    .cell[data-value="64"] { background: #f65e3b; color: white; }
    .cell[data-value="128"] { background: #edcf72; color: white; font-size: 28px; }
    .cell[data-value="256"] { background: #edcc61; color: white; font-size: 28px; }
    .cell[data-value="512"] { background: #edc850; color: white; font-size: 28px; }
    .cell[data-value="1024"] { background: #edc53f; color: white; font-size: 24px; }
    .cell[data-value="2048"] { background: #edc22e; color: white; font-size: 24px; }

    .game-message {
      margin-top: 20px;
      font-size: 24px;
      color: #776e65;
    }

    button {
      margin-top: 20px;
      padding: 15px 30px;
      font-size: 18px;
      background: #8f7a66;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background: #9f8b77;
    }

    .instructions {
      margin-top: 20px;
      color: #776e65;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>2048</h1>
  <div class="score-container">점수: <span id="score">0</span></div>
  <div class="grid-container">
    <div class="grid" id="grid"></div>
  </div>
  <div class="game-message" id="message"></div>
  <button onclick="initGame()">새 게임</button>
  <p class="instructions">화살표 키로 타일을 움직이세요!</p>

  <script>
    // 게임 상태 변수
    let grid = [];
    let score = 0;

    // 게임 초기화
    function initGame() {
      grid = [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
      ];
      score = 0;
      document.getElementById('message').textContent = '';
      addRandomTile();
      addRandomTile();
      renderGrid();
    }

    // 랜덤 타일 추가
    function addRandomTile() {
      let emptyCells = [];
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          if (grid[i][j] === 0) {
            emptyCells.push({row: i, col: j});
          }
        }
      }

      if (emptyCells.length > 0) {
        let randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4;
      }
    }

    // 그리드 렌더링
    function renderGrid() {
      const gridElement = document.getElementById('grid');
      gridElement.innerHTML = '';

      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          const cell = document.createElement('div');
          cell.className = 'cell';
          const value = grid[i][j];
          if (value !== 0) {
            cell.textContent = value;
            cell.setAttribute('data-value', value);
          }
          gridElement.appendChild(cell);
        }
      }

      document.getElementById('score').textContent = score;
    }

    // 한 줄 밀기 (왼쪽으로)
    function slideRow(row) {
      // 0이 아닌 숫자만 추출
      let filtered = row.filter(num => num !== 0);

      // 같은 숫자 합치기
      for (let i = 0; i < filtered.length - 1; i++) {
        if (filtered[i] === filtered[i + 1]) {
          filtered[i] *= 2;
          score += filtered[i];
          filtered[i + 1] = 0;

          // 2048 달성 확인
          if (filtered[i] === 2048) {
            document.getElementById('message').textContent = '🎉 축하합니다! 2048 달성!';
          }
        }
      }

      // 다시 0 제거
      filtered = filtered.filter(num => num !== 0);

      // 빈 칸 채우기
      while (filtered.length < 4) {
        filtered.push(0);
      }

      return filtered;
    }

    // 그리드 회전 (시계 방향 90도)
    function rotateGrid(grid) {
      let newGrid = [];
      for (let i = 0; i < 4; i++) {
        newGrid[i] = [];
        for (let j = 0; j < 4; j++) {
          newGrid[i][j] = grid[3 - j][i];
        }
      }
      return newGrid;
    }

    // 이동 처리
    function move(direction) {
      let rotations = {
        'left': 0,
        'up': 1,
        'right': 2,
        'down': 3
      };

      let oldGrid = JSON.stringify(grid);

      // 해당 방향으로 회전
      for (let i = 0; i < rotations[direction]; i++) {
        grid = rotateGrid(grid);
      }

      // 왼쪽으로 밀기
      for (let i = 0; i < 4; i++) {
        grid[i] = slideRow(grid[i]);
      }

      // 원래 방향으로 복원
      for (let i = 0; i < (4 - rotations[direction]) % 4; i++) {
        grid = rotateGrid(grid);
      }

      // 이동이 있었으면 새 타일 추가
      if (JSON.stringify(grid) !== oldGrid) {
        addRandomTile();
        renderGrid();

        // 게임 오버 확인
        if (isGameOver()) {
          document.getElementById('message').textContent = '게임 오버! 다시 도전해보세요.';
        }
      }
    }

    // 게임 오버 확인
    function isGameOver() {
      // 빈 칸이 있으면 게임 계속
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          if (grid[i][j] === 0) return false;
        }
      }

      // 합칠 수 있는 타일이 있으면 게임 계속
      for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
          if (j < 3 && grid[i][j] === grid[i][j + 1]) return false;
          if (i < 3 && grid[i][j] === grid[i + 1][j]) return false;
        }
      }

      return true;
    }

    // 키보드 입력 처리
    document.addEventListener('keydown', (e) => {
      switch(e.key) {
        case 'ArrowLeft':
          e.preventDefault();
          move('left');
          break;
        case 'ArrowRight':
          e.preventDefault();
          move('right');
          break;
        case 'ArrowUp':
          e.preventDefault();
          move('up');
          break;
        case 'ArrowDown':
          e.preventDefault();
          move('down');
          break;
      }
    });

    // 게임 시작
    initGame();
  </script>
</body>
</html>