AI game creator

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

No:43626

←

Prev Next

→

mobile 2048 game
Developer Bowgray｜Date and time 24/2/16 5:49:25
Build time 27.541 sec｜Game capacity 7.279KB｜

Script

Sure! Here's a simple implementation of the mobile game 2048 using JavaScript and HTML. The game is designed to be played on a smartphone and uses pictograms as requested. Remember to save the code in a single HTML file.

Score: 0

To play the game, simply open the HTML file on your smartphone's browser. You can use the arrow keys on the on-screen keyboard to move the cells and try to reach the 2048 tile. The game will keep track of your score, and if you cannot make any more moves, it will display a "Game Over" alert.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>2048 Mobile Game</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      background-color: #faf8ef;
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
    }
    
    .header {
      font-size: 32px;
      margin-bottom: 20px;
    }
    
    .score {
      font-size: 20px;
      margin-bottom: 10px;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
    }
    
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      background-color: #cdc1b4;
      color: #776e65;
      font-size: 28px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">2048</div>
    <div class="score">Score: 0</div>
    <div class="grid">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
  </div>
  
  <script>
    // Game logic
    
    const gridCells = Array.from(document.getElementsByClassName("cell"));
    let gameGrid = [];
    let score = 0;
    
    function startGame() {
      gameGrid = Array(16).fill(0);
      addNewNumber();
      addNewNumber();
      updateGrid();
    }
    
    function addNewNumber() {
      const emptyCells = gameGrid.reduce((acc, cell, index) => {
        if (cell === 0) {
          acc.push(index);
        }
        return acc;
      }, []);
      
      if (emptyCells.length > 0) {
        const randomCellIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        gameGrid[randomCellIndex] = Math.random() < 0.9 ? 2 : 4;
      }
    }
    
    function updateGrid() {
      gridCells.forEach((cell, index) => {
        cell.textContent = gameGrid[index] !== 0 ? gameGrid[index] : '';
        cell.style.backgroundColor = getCellColor(gameGrid[index]);
        cell.style.color = getTextColor(gameGrid[index]);
      });
      
      document.querySelector(".score").textContent = `Score: ${score}`;
    }
    
    function getCellColor(cellValue) {
      const colorMap = {
        0: "#cdc1b4",
        2: "#eee4da",
        4: "#ede0c8",
        8: "#f2b179",
        16: "#f59563",
        32: "#f67c5f",
        64: "#f65e3b",
        128: "#edcf72",
        256: "#edcc61",
        512: "#edc850",
        1024: "#edc53f",
        2048: "#edc22e",
      };
      return colorMap[cellValue];
    }
    
    function getTextColor(cellValue) {
      return cellValue >= 8 ? "#f9f6f2" : "#776e65";
    }
    
    function moveCells(direction) {
      const oldGrid = [...gameGrid];
      
      switch (direction) {
        case "up":
          for (let col = 0; col < 4; col++) {
            const column = getGridColumn(col);
            const mergedColumn = mergeCells(column);
            setGridColumn(col, mergedColumn);
          }
          break;
        case "right":
          for (let row = 0; row < 4; row++) {
            const rowValues = getGridRow(row).reverse();
            const mergedRow = mergeCells(rowValues);
            setGridRow(row, mergedRow.reverse());
          }
          break;
        case "down":
          for (let col = 0; col < 4; col++) {
            const column = getGridColumn(col).reverse();
            const mergedColumn = mergeCells(column);
            setGridColumn(col, mergedColumn.reverse());
          }
          break;
        case "left":
          for (let row = 0; row < 4; row++) {
            const rowValues = getGridRow(row);
            const mergedRow = mergeCells(rowValues);
            setGridRow(row, mergedRow);
          }
          break;
      }
      
      if (!arraysEqual(gameGrid, oldGrid)) {
        addNewNumber();
        updateGrid();
      }
      
      if (gameOver()) {
        alert("Game Over!");
      }
    }
    
    function getGridColumn(col) {
      return [gameGrid[col], gameGrid[col + 4], gameGrid[col + 8], gameGrid[col + 12]];
    }
    
    function setGridColumn(col, column) {
      gameGrid[col] = column[0];
      gameGrid[col + 4] = column[1];
      gameGrid[col + 8] = column[2];
      gameGrid[col + 12] = column[3];
    }
    
    function getGridRow(row) {
      return [gameGrid[row * 4], gameGrid[row * 4 + 1], gameGrid[row * 4 + 2], gameGrid[row * 4 + 3]];
    }
    
    function setGridRow(row, newRow) {
      gameGrid[row * 4] = newRow[0];
      gameGrid[row * 4 + 1] = newRow[1];
      gameGrid[row * 4 + 2] = newRow[2];
      gameGrid[row * 4 + 3] = newRow[3];
    }
    
    function mergeCells(cells) {
      const newCells = [];
      let shouldMerge = false;
      
      for (let i = 0; i < 4; i++) {
        if (cells[i] === 0) {
          continue;
        }
        
        if (i < 3 && cells[i] === cells[i + 1] && !shouldMerge) {
          newCells.push(cells[i] * 2);
          score += cells[i] * 2;
          shouldMerge = true;
        } else {
          newCells.push(cells[i]);
          shouldMerge = false;
        }
      }
      
      return [...newCells, ...Array(4 - newCells.length).fill(0)];
    }
    
    function arraysEqual(arr1, arr2) {
      return JSON.stringify(arr1) === JSON.stringify(arr2);
    }
    
    function gameOver() {
      return (
        !gameGrid.includes(0) &&
        !checkIfMergeable(getAllColumns()) &&
        !checkIfMergeable(getAllRows())
      );
    }
    
    function getAllColumns() {
      return [
        getGridColumn(0),
        getGridColumn(1),
        getGridColumn(2),
        getGridColumn(3),
      ];
    }
    
    function getAllRows() {
      return [
        getGridRow(0),
        getGridRow(1),
        getGridRow(2),
        getGridRow(3),
      ];
    }
    
    // Event listeners
    
    document.addEventListener("DOMContentLoaded", startGame);
    document.addEventListener("keydown", handleKeyDown);
    
    function handleKeyDown(event) {
      event.preventDefault();
      
      if (event.key === "ArrowUp") {
        moveCells("up");
      } else if (event.key === "ArrowRight") {
        moveCells("right");
      } else if (event.key === "ArrowDown") {
        moveCells("down");
      } else if (event.key === "ArrowLeft") {
        moveCells("left");
      }
    }
  </script>
</body>
</html>
```