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

No:24742

76

4096
Developer User11816｜Date and time 23/11/11 22:14:41
Build time 132.057 sec｜Game capacity 6.13KB｜

4096 Game

→ 　

0　

0　

　
　
　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>4096 Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #gameboard {
      display: inline-block;
    }
    
    .tile {
      width: 100px;
      height: 100px;
      margin: 4px;
      background-color: #eee4da;
      border-radius: 6px;
      font-size: 30px;
      font-weight: bold;
      line-height: 100px;
      text-align: center;
      float: left;
    }
  </style>
</head>
<body>
  <h1>4096 Game</h1>
  <div id="gameboard"></div>

<script>
    // Initialize game
    var gameboard = document.getElementById("gameboard");
    var tiles = [];
  
    // Generate initial tiles
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 4; j++) {
        var tile = createTile(0);
        gameboard.appendChild(tile);
        tiles.push(tile);
      }
    }
  
    // Place 2 random tiles
    addRandomTile();
    addRandomTile();
  
    // Handle keyboard events
    document.addEventListener("keydown", function(event) {
      var key = event.keyCode;
      if (key === 37 || key === 38 || key === 39 || key === 40) {
        event.preventDefault();
        moveTiles(key);
        addRandomTile();
      }
    });
  
    // Create a tile with the given value
    function createTile(value) {
      var tile = document.createElement("div");
      tile.className = "tile";
      tile.textContent = value || "";
      return tile;
    }
  
    // Add a random tile to the gameboard
    function addRandomTile() {
      var availableTiles = tiles.filter(function(tile) {
        return tile.textContent === "";
      });
  
      if (availableTiles.length > 0) {
        var randomTile = availableTiles[Math.floor(Math.random() * availableTiles.length)];
        randomTile.textContent = Math.random() < 0.9 ? 2 : 4;
      }
    }
  
    // Move tiles in the specified direction
    function moveTiles(direction) {
      var movesMade = false;
  
      switch (direction) {
        case 37: // Left
          for (var i = 0; i < 4; i++) {
            for (var j = 1; j < 4; j++) {
              var tile = tiles[i * 4 + j];
              if (tile.textContent !== "") {
                var k = j - 1;
                while (k >= 0 && tiles[i * 4 + k].textContent === "") {
                  k--;
                }
  
                if (k >= 0 && tiles[i * 4 + k].textContent === tile.textContent) {
                  mergeTiles(tile, tiles[i * 4 + k]);
                  movesMade = true;
                } else {
                  moveTile(tile, tiles[i * 4 + k + 1]);
                  movesMade = true;
                }
              }
            }
          }
          break;
  
        case 38: // Up
          for (var i = 0; i < 4; i++) {
            for (var j = 1; j < 4; j++) {
              var tile = tiles[j * 4 + i];
              if (tile.textContent !== "") {
                var k = j - 1;
                while (k >= 0 && tiles[k * 4 + i].textContent === "") {
                  k--;
                }
  
                if (k >= 0 && tiles[k * 4 + i].textContent === tile.textContent) {
                  mergeTiles(tile, tiles[k * 4 + i]);
                  movesMade = true;
                } else {
                  moveTile(tile, tiles[(k + 1) * 4 + i]);
                  movesMade = true;
                }
              }
            }
          }
          break;
  
        case 39: // Right
          for (var i = 0; i < 4; i++) {
            for (var j = 2; j >= 0; j--) {
              var tile = tiles[i * 4 + j];
              if (tile.textContent !== "") {
                var k = j + 1;
                while (k < 4 && tiles[i * 4 + k].textContent === "") {
                  k++;
                }
  
                if (k < 4 && tiles[i * 4 + k].textContent === tile.textContent) {
                  mergeTiles(tile, tiles[i * 4 + k]);
                  movesMade = true;
                } else {
                  moveTile(tile, tiles[i * 4 + k - 1]);
                  movesMade = true;
                }
              }
            }
          }
          break;
  
        case 40: // Down
          for (var i = 0; i < 4; i++) {
            for (var j = 2; j >= 0; j--) {
              var tile = tiles[j * 4 + i];
              if (tile.textContent !== "") {
                var k = j + 1;
                while (k < 4 && tiles[k * 4 + i].textContent === "") {
                  k++;
                }
  
                if (k < 4 && tiles[k * 4 + i].textContent === tile.textContent) {
                  mergeTiles(tile, tiles[k * 4 + i]);
                  movesMade = true;
                } else {
                  moveTile(tile, tiles[(k - 1) * 4 + i]);
                  movesMade = true;
                }
              }
            }
          }
          break;
      }
  
      // Check if the game is over
      if (movesMade && !canMove()) {
        alert("Game Over!");
        resetGame();
      }
    }
  
    // Merge two tiles into one
    function mergeTiles(tile1, tile2) {
      var value = parseInt(tile1.textContent) + parseInt(tile2.textContent);
      tile1.textContent = value;
      tile2.textContent = "";
    }
  
    // Move tile to a new position
    function moveTile(tile, position) {
      position.textContent = tile.textContent;
      tile.textContent = "";
    }
  
    // Check if there are any possible moves left
    function canMove() {
      for (var i = 0; i < tiles.length; i++) {
        if (tiles[i].textContent === "") {
          return true;
        }
  
        if (i % 4 !== 3 && tiles[i].textContent === tiles[i + 1].textContent) {
          return true;
        }
  
        if (i < 12 && tiles[i].textContent === tiles[i + 4].textContent) {
          return true;
        }
      }
  
      return false;
    }
  
    // Reset the game
    function resetGame() {
      tiles.forEach(function(tile) {
        tile.textContent = "";
      });
      addRandomTile();
      addRandomTile();
    }
  </script>
</body>
</html>