AI game creator

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

No:24791

←

Prev Next

→

2048
Developer User11816｜Date and time 23/11/12 6:09:31
Build time 192.632 sec｜Game capacity 6.7KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2048</title>
    <style>
      body {
        font-family: "Arial", sans-serif;
        background-color: #faf8ef;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

#game-board {
        width: 400px;
        height: 400px;
        background-color: #bbada0;
        border-radius: 6px;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

.cell {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: #776e65;
        background-color: #cdc1b4;
        border-radius: 6px;
        transition: background-color 0.2s ease-in-out;
      }

.cell span {
        display: none;
      }

.cell span.pictogram {
        display: inline-block;
        font-family: "Segoe UI Emoji", sans-serif;
        font-size: 48px;
      }

.winning {
        font-size: 64px;
        text-align: center;
        margin: auto;
      }

@media only screen and (max-width: 450px) {
        body {
          overflow-x: hidden;
        }

#game-board {
          width: 90vw;
          height: 90vw;
        }
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

const cells = [];

function initializeGame() {
        const gameBoard = document.getElementById("game-board");

// Generate cells
        for (let i = 0; i < 16; i++) {
          const cell = document.createElement("div");
          cell.classList.add("cell");
          cell.innerHTML = "<span></span>";
          gameBoard.appendChild(cell);
          cells.push(cell);
        }

addNewRandomNumber();
        addNewRandomNumber();

document.addEventListener("keydown", handleKeydown);
      }

function handleKeydown(event) {
        if (event.key === "ArrowUp" || event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "ArrowLeft") {
          event.preventDefault();
          handleMove(event.key);
        }
      }

function handleMove(direction) {
        const [xOffset, yOffset, startCell, endCell] = getMovementOffsets(direction);
        let moved = false;

for (let x = 0; x < 4; x++) {
          for (let y = 0; y < 4; y++) {
            const cell = cells[x * 4 + y];
            const value = cell.textContent;

if (value !== "") {
              let currentX = x;
              let currentY = y;

while (
                currentX + xOffset >= 0 &&
                currentX + xOffset < 4 &&
                currentY + yOffset >= 0 &&
                currentY + yOffset < 4
              ) {
                const nextCell = cells[(currentX + xOffset) * 4 + (currentY + yOffset)];
                const nextValue = nextCell.textContent;

if (nextValue === "") {
                  nextCell.textContent = value;
                  cell.textContent = "";
                  currentX += xOffset;
                  currentY += yOffset;
                  moved = true;
                } else if (nextValue === value && !nextCell.classList.contains("merged")) {
                  nextCell.textContent = parseInt(nextValue) * 2;
                  cell.textContent = "";
                  nextCell.classList.add("merged");
                  moved = true;
                  break;
                } else {
                  break;
                }
              }
            }
          }
        }

cells.forEach(cell => cell.classList.remove("merged"));

if (moved) {
          addNewRandomNumber();

if (isGameWon()) {
            setTimeout(() => {
              showWinningMessage();
            }, 300);
          }
        }
      }

function getMovementOffsets(direction) {
        let xOffset = 0;
        let yOffset = 0;
        let startCell = 0;
        let endCell = 16;

switch (direction) {
          case "ArrowUp":
            xOffset = -1;
            startCell = 4;
            endCell = 16;
            break;
          case "ArrowRight":
            yOffset = 1;
            startCell = 15;
            endCell = -1;
            break;
          case "ArrowDown":
            xOffset = 1;
            startCell = 11;
            endCell = -1;
            break;
          case "ArrowLeft":
            yOffset = -1;
            startCell = 0;
            endCell = 16;
            break;
          default:
            break;
        }

return [xOffset, yOffset, startCell, endCell];
      }

function addNewRandomNumber() {
        const emptyCells = [];

for (let i = 0; i < cells.length; i++) {
          if (cells[i].textContent === "") {
            emptyCells.push(i);
          }
        }

if (emptyCells.length > 0) {
          const randomIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];
          const randomNumber = Math.random() < 0.9 ? 2 : 4;
          cells[randomIndex].textContent = randomNumber;

if (isGameOver()) {
            setTimeout(() => {
              showGameOverMessage();
            }, 300);
          }
        }
      }

function isGameOver() {
        for (let i = 0; i < cells.length; i++) {
          if (cells[i].textContent === "") {
            return false;
          }

const x = Math.floor(i / 4);
          const y = i % 4;

if (
            (x > 0 && cells[(x - 1) * 4 + y].textContent === cells[i].textContent) ||
            (x < 3 && cells[(x + 1) * 4 + y].textContent === cells[i].textContent) ||
            (y > 0 && cells[x * 4 + (y - 1)].textContent === cells[i].textContent) ||
            (y < 3 && cells[x * 4 + (y + 1)].textContent === cells[i].textContent)
          ) {
            return false;
          }
        }

return true;
      }

function isGameWon() {
        for (let i = 0; i < cells.length; i++) {
          if (cells[i].textContent === "2048") {
            return true;
          }
        }

return false;
      }

function showGameOverMessage() {
        const gameBoard = document.getElementById("game-board");
        gameBoard.innerHTML = "<p class='winning'>Игра окончена!</p>";
      }

function showWinningMessage() {
        const gameBoard = document.getElementById("game-board");
        gameBoard.innerHTML = "<p class='winning'>Победа!</p>";
      }

initializeGame();
    </script>
  </body>
</html>