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

No:8589

5523

←

Prev Next

→

A Merge game
Developer anonymous｜Date and time 70/1/1 10:02:35
Build time unknown sec｜Game capacity 3.755KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file with JavaScript. Please note that this is a basic implementation and can be further customized and enhanced as per your requirements.

Merge Game

To play the game, open the HTML file in a web browser (e.g., Chrome) and use the arrow keys or 'WASD' keys to move the tiles in the corresponding direction. The goal is to merge tiles with the same number to form larger numbers and achieve the highest possible score.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Merge Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 0 auto;
      max-width: 340px;
      padding: 10px;
      background-color: #eee;
      border-radius: 5px;
    }
    .grid-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      background-color: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      border-radius: 5px;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Merge Game</h1>
  <div class="grid"></div>
  
  <script>
    // Define the game logic
    const game = {
      gridSize: 4,
      score: 0,
      grid: [],
      
      start() {
        for (let i = 0; i < this.gridSize; i++) {
          const row = [];
          for (let j = 0; j < this.gridSize; j++) {
            row.push(null);
          }
          this.grid.push(row);
        }
        
        this.spawnRandomTile();
        this.spawnRandomTile();
        
        this.renderGrid();
      },
      
      spawnRandomTile() {
        const availableCells = [];
        for (let i = 0; i < this.gridSize; i++) {
          for (let j = 0; j < this.gridSize; j++) {
            if (!this.grid[i][j]) {
              availableCells.push({ x: i, y: j });
            }
          }
        }
        
        if (availableCells.length > 0) {
          const randomIndex = Math.floor(Math.random() * availableCells.length);
          const { x, y } = availableCells[randomIndex];
          const newValue = Math.random() < 0.9 ? 2 : 4;
          this.grid[x][y] = newValue;
        }
      },
      
      renderGrid() {
        const gridContainer = document.querySelector('.grid');
        gridContainer.innerHTML = '';
        
        for (let i = 0; i < this.gridSize; i++) {
          for (let j = 0; j < this.gridSize; j++) {
            const cell = document.createElement('div');
            cell.className = 'grid-cell';
            cell.textContent = this.grid[i][j] ? this.grid[i][j] : '';
            gridContainer.appendChild(cell);
          }
        }
      },
      
      moveTiles(direction) {
        // Implement the logic to move the tiles in the given direction
        // Update the grid and score accordingly
        // Check if the game is over (no more available moves)
        // Update the grid UI by calling this.renderGrid()
        // Update the score UI by adjusting the score variable
        
        console.log(`Moving tiles ${direction}`);
      }
    };
    
    // Handle keyboard inputs for game controls
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowUp' || event.key === 'w') {
        game.moveTiles('up');
      } else if (event.key === 'ArrowDown' || event.key === 's') {
        game.moveTiles('down');
      } else if (event.key === 'ArrowLeft' || event.key === 'a') {
        game.moveTiles('left');
      } else if (event.key === 'ArrowRight' || event.key === 'd') {
        game.moveTiles('right');
      }
    });
    
    // Start the game
    game.start();
  </script>
</body>
</html>
```