Click here for free DL of the app version that can save data.

No:13793

135

←

Prev Next

→

Make a 2048 game
Developer User6030｜Date and time 23/8/30 3:25:40
Build time 35.467 sec｜Game capacity 5.093KB｜

Script

2048 Game

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>2048 Game</title>
<style>
  /* CSS styles for the game */
  body {
    font-family: Arial, sans-serif;
    background-color: #faf8ef;
  }

h1 {
    text-align: center;
    margin-top: 40px;
    color: #776e65;
  }

.game-container {
    width: 400px;
    margin: 0 auto;
  }

.grid {
    background-color: #bbada0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
  }

.cell {
    width: 90px;
    height: 90px;
    background-color: #cdc1b4;
    border-radius: 6px;
    margin: 5px;
    line-height: 90px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #776e65;
    position: absolute;
  }

.score {
    text-align: center;
    font-size: 18px;
    color: #776e65;
  }
</style>
</head>
<body>
<h1>2048 Game</h1>
<div class="game-container">
  <div class="score">Score: 0</div>
  <div class="grid"></div>
  <button onclick="restartGame()">Restart</button>
</div>

function startGame() {
    createGrid();
    generateRandomCell();
    generateRandomCell();
    updateGrid();
  }

function updateGrid() {
    const container = document.querySelector('.grid');
    const cells = container.querySelectorAll('.cell');
    cells.forEach((cell, index) => {
      const row = Math.floor(index / SIZE);
      const col = index % SIZE;
      const value = grid[row][col];
      cell.innerHTML = value !== null ? value : '';
      cell.style.backgroundColor = getColor(value);
    });
    updateScore();
  }

function restartGame() {
    const container = document.querySelector('.grid');
    container.innerHTML = '';
    grid = [];
    score = 0;
    startGame();
  }

function getColor(value) {
    const colors = {
      2: '#eee4da',
      4: '#ede0c8',
      8: '#f2b179',
      16: '#f59563',
      32: '#f67c5f',
      64: '#f65e3b',
      128: '#edcf72',
      256: '#edcc61',
      512: '#edc850',
      1024: '#edc53f',
      2048: '#edc22e'
    };
    return colors[value] || '#3c3a32';
  }

function updateScore() {
    const scoreElement = document.querySelector('.score');
    scoreElement.innerText = 'Score: ' + score;
  }

// Check if there are any moves left
    for (let row = 0; row < SIZE; row++) {
      for (let col = 0; col < SIZE; col++) {
        if (grid[row][col] === null) {
          return;
        }
        if (row > 0 && grid[row - 1][col] === grid[row][col]) {
          return;
        }
        if (row < SIZE - 1 && grid[row + 1][col] === grid[row][col]) {
          return;
        }
        if (col > 0 && grid[row][col - 1] === grid[row][col]) {
          return;
        }
        if (col < SIZE - 1 && grid[row][col + 1] === grid[row][col]) {
          return;
        }
      }
    }

alert('Game Over! Your score: ' + score);
  }

// Start the game
  startGame();
</script>
</body>
</html>