Chotto.app

App Name kuyawa / 2048

App Icon in SVG

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="tileShadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#000000" flood-opacity="0.15"/>
    </filter>
    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#F2D77D" />
      <stop offset="100%" stop-color="#EDC22E" />
    </linearGradient>
  </defs>
  <rect width="512" height="512" rx="115" fill="#BBADA0" />
  <rect x="34" y="34" width="205" height="205" rx="16" fill="#EEE4DA" filter="url(#tileShadow)" />
  <text x="136.5" y="136.5" dy="0.35em" font-family="'Clear Sans', 'Helvetica Neue', Arial, sans-serif" font-size="110" font-weight="900" fill="#776E65" text-anchor="middle">2</text>
  <rect x="273" y="34" width="205" height="205" rx="16" fill="#F2B179" filter="url(#tileShadow)" />
  <text x="375.5" y="136.5" dy="0.35em" font-family="'Clear Sans', 'Helvetica Neue', Arial, sans-serif" font-size="110" font-weight="900" fill="#F9F6F2" text-anchor="middle">8</text>
  <rect x="34" y="273" width="205" height="205" rx="16" fill="#F65E3B" filter="url(#tileShadow)" />
  <text x="136.5" y="373" dy="0.35em" font-family="'Clear Sans', 'Helvetica Neue', Arial, sans-serif" font-size="95" font-weight="900" fill="#F9F6F2" text-anchor="middle">64</text>
  <rect x="273" y="273" width="205" height="205" rx="16" fill="url(#goldGradient)" filter="url(#tileShadow)" />
  <text x="375.5" y="373" dy="0.35em" font-family="'Clear Sans', 'Helvetica Neue', Arial, sans-serif" font-size="65" font-weight="900" fill="#F9F6F2" text-anchor="middle">2048</text>
</svg>

HTML Content

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

    body {
      background: linear-gradient(145deg, #0b0e14 0%, #141a24 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      padding: 1rem;
      margin: 0;
    }

    .game-container {
      background: rgba(22, 28, 40, 0.7);
      backdrop-filter: blur(4px);
      border-radius: 48px;
      padding: 2rem 2rem 2.2rem;
      box-shadow: 0 25px 50px -8px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.03);
      max-width: 550px;
      width: 100%;
      transition: all 0.2s ease;
    }

    /* header */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    .title {
      font-size: 2.5rem;
      font-weight: 700;
      letter-spacing: -1px;
      background: linear-gradient(135deg, #f6e9a6, #f0d87a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 2px 10px rgba(240, 216, 122, 0.2);
    }

    .score-box {
      background: rgba(12, 17, 26, 0.7);
      backdrop-filter: blur(2px);
      padding: 0.5rem 1.4rem;
      border-radius: 60px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
    }

    .score-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #8e9bb0;
      display: block;
      text-align: center;
      font-weight: 500;
    }

    .score-value {
      font-size: 2.2rem;
      font-weight: 700;
      color: #f0f4fa;
      line-height: 1.2;
      text-align: center;
      letter-spacing: 1px;
    }

    /* controls */
    .controls {
      display: flex;
      justify-content: flex-end;
      gap: 0.7rem;
      margin-bottom: 1.2rem;
    }

    .btn {
      background: rgba(30, 38, 52, 0.8);
      backdrop-filter: blur(2px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: #d6e0ee;
      font-weight: 600;
      font-size: 0.9rem;
      padding: 0.5rem 1.2rem;
      border-radius: 40px;
      cursor: pointer;
      transition: 0.2s ease;
      box-shadow: 0 4px 8px rgba(0,0,0,0.4);
      letter-spacing: 0.3px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn:hover {
      background: rgba(50, 62, 82, 0.9);
      color: white;
      transform: scale(0.97);
      border-color: rgba(255, 215, 100, 0.2);
    }

    .btn:active {
      transform: scale(0.92);
    }

    .btn-icon {
      font-size: 1.2rem;
      line-height: 1;
    }

    /* grid */
    .grid-wrapper {
      background: rgba(10, 14, 22, 0.6);
      border-radius: 32px;
      padding: 0.9rem;
      box-shadow: inset 0 6px 12px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
      border: 1px solid rgba(255, 255, 255, 0.02);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.8rem;
      aspect-ratio: 1 / 1;
    }

    .cell {
      background: rgba(26, 34, 48, 0.7);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      font-size: 2.4rem;
      color: #f0f4fa;
      transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.15s ease;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
      aspect-ratio: 1 / 1;
      will-change: transform, background;
      text-shadow: 0 2px 6px rgba(0,0,0,0.3);
      position: relative;
    }

    /* tile colors – modern pastel + jewel tones */
    .tile-2    { background: #3c4559; color: #eef3fc; }
    .tile-4    { background: #4e5b77; color: #f0f6ff; }
    .tile-8    { background: #7a6b5c; color: #fef7ed; }
    .tile-16   { background: #a67c5b; color: #fff3e4; }
    .tile-32   { background: #c28f6b; color: #fff4e8; }
    .tile-64   { background: #daa06a; color: #fff7ed; }
    .tile-128  { background: #c9b37a; color: #fcf6e6; }
    .tile-256  { background: #b8b17a; color: #fcf9e8; }
    .tile-512  { background: #a8ae7a; color: #f6f9e8; }
    .tile-1024 { background: #8fa07a; color: #f3f9ea; }
    .tile-2048 { background: #6e8f7a; color: #f0f9ef; }
    .tile-super { background: #4d6b7a; color: #eef7fc; }

    /* animation for new tile */
    .cell.pop {
      animation: pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes pop {
      0% { transform: scale(0.6); opacity: 0.6; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* merge animation (gentle pulse) */
    .cell.merge {
      animation: mergePulse 0.25s ease-out;
    }

    @keyframes mergePulse {
      0% { transform: scale(1); }
      40% { transform: scale(1.12); background: rgba(255, 215, 100, 0.25); }
      100% { transform: scale(1); }
    }

    /* game over overlay */
    .game-overlay {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      border-radius: 32px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 10;
      color: white;
      padding: 1.5rem;
      text-align: center;
    }

    .game-overlay.show {
      display: flex;
    }

    .game-overlay h2 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 0.2rem;
      background: linear-gradient(135deg, #f6e9a6, #f0d87a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .game-overlay p {
      font-size: 1.1rem;
      opacity: 0.7;
      margin-bottom: 1.5rem;
    }

    .grid-relative {
      position: relative;
    }

    /* mobile */
    @media (max-width: 500px) {
      .game-container { padding: 1.2rem; border-radius: 32px; }
      .title { font-size: 2rem; }
      .score-value { font-size: 1.8rem; }
      .grid-wrapper { padding: 0.6rem; border-radius: 24px; }
      .grid { gap: 0.5rem; }
      .cell { font-size: 1.8rem; border-radius: 14px; }
      .btn { padding: 0.3rem 1rem; font-size: 0.8rem; }
      .controls { gap: 0.4rem; }
    }

    @media (max-width: 400px) {
      .cell { font-size: 1.4rem; }
    }

    /* swipe hint */
    .footer-note {
      margin-top: 1rem;
      text-align: center;
      color: #5d6b7e;
      font-size: 0.75rem;
      letter-spacing: 0.5px;
      font-weight: 400;
      opacity: 0.6;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div class="header">
      <span class="title">2048</span>
      <div class="score-box">
        <span class="score-label">Score</span>
        <span class="score-value" id="scoreDisplay">0</span>
      </div>
    </div>

    <div class="controls">
      <button class="btn" id="newGameBtn"><span class="btn-icon">↻</span> New</button>
      <button class="btn" id="undoBtn"><span class="btn-icon">↩</span> Undo</button>
    </div>

    <div class="grid-wrapper">
      <div class="grid-relative">
        <div class="grid" id="gridContainer"></div>
        <!-- game over overlay -->
        <div class="game-overlay" id="gameOverlay">
          <h2>Game Over</h2>
          <p>you reached <span id="finalScoreDisplay">0</span></p>
          <button class="btn" id="retryBtn" style="background: #f0d87a; color: #141a24; font-weight: 700; border: none; padding: 0.7rem 2.2rem;">Try again</button>
        </div>
      </div>
    </div>
    <div class="footer-note">arrow keys · swipe · undo</div>
  </div>

  <script>
    (function(){
      const SIZE = 4;
      let grid = [];
      let score = 0;
      let gameOver = false;
      let history = []; // for undo (stores { grid, score })

      const gridEl = document.getElementById('gridContainer');
      const scoreDisplay = document.getElementById('scoreDisplay');
      const finalScoreDisplay = document.getElementById('finalScoreDisplay');
      const gameOverlay = document.getElementById('gameOverlay');

      // ---------- helpers ----------
      function createEmptyGrid() {
        return Array.from({ length: SIZE }, () => Array(SIZE).fill(0));
      }

      // deep clone
      function cloneGrid(g) {
        return g.map(row => [...row]);
      }

      // ---------- core ----------
      function initGame() {
        grid = createEmptyGrid();
        score = 0;
        gameOver = false;
        history = [];
        addRandomTile();
        addRandomTile();
        updateUI();
        gameOverlay.classList.remove('show');
      }

      // add random tile (2 or 4)
      function addRandomTile() {
        const empty = [];
        for (let r = 0; r < SIZE; r++) {
          for (let c = 0; c < SIZE; c++) {
            if (grid[r][c] === 0) empty.push([r, c]);
          }
        }
        if (empty.length === 0) return false;
        const [row, col] = empty[Math.floor(Math.random() * empty.length)];
        grid[row][col] = Math.random() < 0.9 ? 2 : 4;
        return { row, col, value: grid[row][col] };
      }

      // save state for undo
      function saveState() {
        history.push({ grid: cloneGrid(grid), score: score });
        if (history.length > 20) history.shift(); // limit undo stack
      }

      // undo
      function undo() {
        if (history.length === 0 || gameOver) return false;
        const prev = history.pop();
        grid = prev.grid;
        score = prev.score;
        updateUI();
        gameOverlay.classList.remove('show');
        gameOver = false;
        return true;
      }

      // slide & merge (main logic)
      function slideRow(row) {
        // remove zeros
        let filtered = row.filter(v => v !== 0);
        let merged = [];
        let newScore = 0;
        for (let i = 0; i < filtered.length; i++) {
          if (i + 1 < filtered.length && filtered[i] === filtered[i+1]) {
            const val = filtered[i] * 2;
            merged.push(val);
            newScore += val;
            i++; // skip next
          } else {
            merged.push(filtered[i]);
          }
        }
        while (merged.length < SIZE) merged.push(0);
        return { row: merged, scoreGain: newScore };
      }

      function moveLeft() {
        let moved = false;
        let totalGain = 0;
        for (let r = 0; r < SIZE; r++) {
          const { row, scoreGain } = slideRow(grid[r]);
          if (row.join(',') !== grid[r].join(',')) moved = true;
          grid[r] = row;
          totalGain += scoreGain;
        }
        return { moved, scoreGain: totalGain };
      }

      function moveRight() {
        let moved = false;
        let totalGain = 0;
        for (let r = 0; r < SIZE; r++) {
          const reversed = [...grid[r]].reverse();
          const { row, scoreGain } = slideRow(reversed);
          const newRow = row.reverse();
          if (newRow.join(',') !== grid[r].join(',')) moved = true;
          grid[r] = newRow;
          totalGain += scoreGain;
        }
        return { moved, scoreGain: totalGain };
      }

      function moveUp() {
        let moved = false;
        let totalGain = 0;
        for (let c = 0; c < SIZE; c++) {
          const col = [];
          for (let r = 0; r < SIZE; r++) col.push(grid[r][c]);
          const { row, scoreGain } = slideRow(col);
          const newCol = row;
          for (let r = 0; r < SIZE; r++) {
            if (grid[r][c] !== newCol[r]) moved = true;
            grid[r][c] = newCol[r];
          }
          totalGain += scoreGain;
        }
        return { moved, scoreGain: totalGain };
      }

      function moveDown() {
        let moved = false;
        let totalGain = 0;
        for (let c = 0; c < SIZE; c++) {
          const col = [];
          for (let r = SIZE-1; r >= 0; r--) col.push(grid[r][c]);
          const { row, scoreGain } = slideRow(col);
          const newCol = row.reverse();
          for (let r = 0; r < SIZE; r++) {
            if (grid[r][c] !== newCol[r]) moved = true;
            grid[r][c] = newCol[r];
          }
          totalGain += scoreGain;
        }
        return { moved, scoreGain: totalGain };
      }

      // check if game over
      function isGameOver() {
        for (let r = 0; r < SIZE; r++) {
          for (let c = 0; c < SIZE; c++) {
            if (grid[r][c] === 0) return false;
            if (c < SIZE-1 && grid[r][c] === grid[r][c+1]) return false;
            if (r < SIZE-1 && grid[r][c] === grid[r+1][c]) return false;
          }
        }
        return true;
      }

      // ---------- move handler ----------
      function handleMove(direction) {
        if (gameOver) return;
        saveState();
        let result;
        switch(direction) {
          case 'left': result = moveLeft(); break;
          case 'right': result = moveRight(); break;
          case 'up': result = moveUp(); break;
          case 'down': result = moveDown(); break;
          default: return;
        }
        if (result.moved) {
          score += result.scoreGain;
          const added = addRandomTile();
          updateUI(added ? added : null);
          if (isGameOver()) {
            gameOver = true;
            finalScoreDisplay.textContent = score;
            gameOverlay.classList.add('show');
          }
        } else {
          // no move, discard saved state
          history.pop();
        }
      }

      // ---------- UI rendering ----------
      function updateUI(addedTile = null) {
        scoreDisplay.textContent = score;
        // clear grid
        gridEl.innerHTML = '';
        for (let r = 0; r < SIZE; r++) {
          for (let c = 0; c < SIZE; c++) {
            const val = grid[r][c];
            const cell = document.createElement('div');
            cell.className = 'cell';
            if (val !== 0) {
              cell.textContent = val;
              // assign color class
              let cls = '';
              if (val <= 2048) cls = `tile-${val}`;
              else cls = 'tile-super';
              cell.classList.add(cls);
            } else {
              cell.textContent = '';
              cell.style.background = 'rgba(26, 34, 48, 0.5)';
            }
            // pop animation for new tile
            if (addedTile && addedTile.row === r && addedTile.col === c) {
              cell.classList.add('pop');
            }
            gridEl.appendChild(cell);
          }
        }
        // after render, add merge animation class (we'll handle via a separate flag)
      }

      // apply merge animation (call after move)
      function animateMerge() {
        // simple: re-apply a pulse to all non-zero cells – subtle effect
        const cells = gridEl.querySelectorAll('.cell');
        cells.forEach((cell, index) => {
          if (cell.textContent !== '') {
            cell.classList.add('merge');
            setTimeout(() => cell.classList.remove('merge'), 300);
          }
        });
      }

      // override handleMove to include merge animation
      const originalHandleMove = handleMove;
      handleMove = function(direction) {
        if (gameOver) return;
        saveState();
        let result;
        switch(direction) {
          case 'left': result = moveLeft(); break;
          case 'right': result = moveRight(); break;
          case 'up': result = moveUp(); break;
          case 'down': result = moveDown(); break;
          default: return;
        }
        if (result.moved) {
          score += result.scoreGain;
          const added = addRandomTile();
          updateUI(added);
          // trigger merge animation after a tiny delay to let DOM settle
          setTimeout(() => animateMerge(), 50);
          if (isGameOver()) {
            gameOver = true;
            finalScoreDisplay.textContent = score;
            gameOverlay.classList.add('show');
          }
        } else {
          history.pop();
        }
      };

      // ---------- keyboard + swipe ----------
      document.addEventListener('keydown', (e) => {
        const key = e.key;
        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
          e.preventDefault();
          const map = {
            'ArrowLeft': 'left',
            'ArrowRight': 'right',
            'ArrowUp': 'up',
            'ArrowDown': 'down'
          };
          handleMove(map[key]);
        }
      });

      // touch swipe support
      let startX = 0, startY = 0;
      const container = document.querySelector('.grid-wrapper');
      container.addEventListener('touchstart', (e) => {
        const t = e.touches[0];
        startX = t.clientX;
        startY = t.clientY;
      }, { passive: true });

      container.addEventListener('touchmove', (e) => {
        e.preventDefault();
      }, { passive: false });

      container.addEventListener('touchend', (e) => {
        if (startX === 0 && startY === 0) return;
        const endX = e.changedTouches[0].clientX;
        const endY = e.changedTouches[0].clientY;
        const dx = endX - startX;
        const dy = endY - startY;
        const absDx = Math.abs(dx);
        const absDy = Math.abs(dy);
        if (Math.max(absDx, absDy) < 20) return; // too small
        let dir = '';
        if (absDx > absDy) {
          dir = dx > 0 ? 'right' : 'left';
        } else {
          dir = dy > 0 ? 'down' : 'up';
        }
        handleMove(dir);
        startX = 0; startY = 0;
      }, { passive: true });

      // ---------- buttons ----------
      document.getElementById('newGameBtn').addEventListener('click', () => {
        initGame();
      });
      document.getElementById('retryBtn').addEventListener('click', () => {
        initGame();
      });
      document.getElementById('undoBtn').addEventListener('click', () => {
        undo();
      });

      // ---------- start ----------
      initGame();

      // additional: if window resize, no-op, but grid is responsive
    })();
  </script>
</body>
</html>

Cancel