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

No:37237

A match 3 game with 4 easy levels
Developer User17040｜Date and time 24/1/20 21:03:03
Build time 29.349 sec｜Game capacity 8.945KB｜

Script

Sure! Here's an example of a simple match 3 game with 4 easy levels, implemented as a single HTML file using JavaScript:

Match 3 Game

Please note that in the code, I have made some assumptions and placeholders for pictograms, such as `"path_to_pictograms/" + cellType + "emozi_rabbit.png"`. Replace `"path_to_pictograms/"` with the actual path to your pictogram images. You can run the above code by saving it with a `.html` extension and opening the file in a web browser. It will display the match 3 game interface and allow you to play through 4 easy levels, where you need to match at least 3 cells of the same type horizontally or vertically to clear them and score points. Hope you enjoy playing the game! Let me know if you need any further assistance.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple match 3 game with 4 easy levels, implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Match 3 Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #game-board {
      margin: 20px auto;
      border: 1px solid black;
      width: 300px;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
    }
    
    .cell {
      box-sizing: border-box;
      width: calc(100% / 5);
      height: calc(100% / 5);
      border: 1px solid gray;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Match 3 Game</h1>
  
  <div id="game-board"></div>
  
  <script>
    // Game Variables
    var boardSize = 5;
    var totalLevels = 4;
    var currentLevel = 1;
    var score = 0;
    var movesLeft = 15;
    var game board = [];
    var selectedCells = [];
    
    // Cell Types
    var cellColors = ["red", "blue", "green", "yellow"];
    
    // Initialize the game
    function initGame() {
      createGameBoard();
      updateScore();
      updateMovesLeft();
    }
    
    // Create the game board
    function createGameBoard() {
      var gameBoardElement = document.getElementById("game-board");
      gameBoardElement.innerHTML = "";
      
      for (var i = 0; i < boardSize * boardSize; i++) {
        var cell = document.createElement("div");
        cell.className = "cell";
        cell.dataset.index = i;
        cell.addEventListener("click", cellClickHandler);
        
        // Generate random cell type
        var cellType = generateRandomCellType();
        cell.style.backgroundImage = "url('path_to_pictograms/" + cellType + ".png')";
        
        gameBoardElement.appendChild(cell);
        gameBoard.push(cell);
      }
    }
    
    // Generate random cell type
    function generateRandomCellType() {
      var randomIndex = Math.floor(Math.random() * cellColors.length);
      return cellColors[randomIndex];
    }
    
    // Cell click event handler
    function cellClickHandler(event) {
      var clickedCell = event.target;
      
      // If cell is already selected, deselect it
      if (clickedCell.classList.contains("selected")) {
        clickedCell.classList.remove("selected");
        selectedCells.pop();
      }
      else {
        // Deselect previously selected cells (only one selected at a time)
        selectedCells.forEach(function(cell) {
          cell.classList.remove("selected");
        });
        
        // Add clicked cell to selected cells array
        clickedCell.classList.add("selected");
        selectedCells.push(clickedCell);
      }
      
      // If two cells are selected, swap them
      if (selectedCells.length === 2) {
        var cellIndex1 = parseInt(selectedCells[0].dataset.index);
        var cellIndex2 = parseInt(selectedCells[1].dataset.index);
        
        swapCells(cellIndex1, cellIndex2);
        checkMatches();
        
        // Deselect all cells
        selectedCells.forEach(function(cell) {
          cell.classList.remove("selected");
        });
        
        selectedCells = [];
        decreaseMovesLeft();
      }
    }
    
    // Swap two cells on the game board
    function swapCells(index1, index2) {
      var tempStyle = gameBoard[index1].style.backgroundImage;
      gameBoard[index1].style.backgroundImage = gameBoard[index2].style.backgroundImage;
      gameBoard[index2].style.backgroundImage = tempStyle;
    }
    
    // Check for matches on the game board
    function checkMatches() {
      var matchedCells = [];
      var matchedIndexes = [];
      
      for (var i = 0; i < gameBoard.length; i++) {
        var cellType = getCellType(i);
        
        // Check horizontally
        if (i % boardSize < boardSize - 2) {
          if (cellType === getCellType(i + 1) && cellType === getCellType(i + 2)) {
            matchedCells.push(gameBoard[i], gameBoard[i + 1], gameBoard[i + 2]);
            matchedIndexes.push(i, i + 1, i + 2);
          }
        }
        
        // Check vertically
        if (i < boardSize * (boardSize - 2)) {
          if (cellType === getCellType(i + boardSize) && cellType === getCellType(i + boardSize * 2)) {
            matchedCells.push(gameBoard[i], gameBoard[i + boardSize], gameBoard[i + boardSize * 2]);
            matchedIndexes.push(i, i + boardSize, i + boardSize * 2);
          }
        }
      }
      
      if (matchedCells.length > 0) {
        removeMatchedCells(matchedCells, matchedIndexes);
        updateScore();
      }
    }
    
    // Remove matched cells from the game board
    function removeMatchedCells(cells, indexes) {
      // Remove cells from game board array and DOM
      for (var i = 0; i < indexes.length; i++) {
        var index = indexes[i];
        gameBoard.splice(index, 1);
        var cell = cells[i];
        cell.parentNode.removeChild(cell);
      }
      
      fillEmptyCells();
    }
    
    // Fill empty cells after removing matched cells
    function fillEmptyCells() {
      var emptyColumns = [];
      
      // Find columns with empty cells
      for (var i = 0; i < boardSize; i++) {
        var columnCells = [];
        
        for (var j = i; j < gameBoard.length; j += boardSize) {
          if (!gameBoard[j]) {
            columnCells.push(j);
          }
        }
        
        if (columnCells.length > 0) {
          emptyColumns.push(columnCells);
        }
      }
      
      // Iterate through empty columns and shift cells down
      emptyColumns.forEach(function(columnCells) {
        var lowestIndex = columnCells[columnCells.length - 1];
        var shiftCount = columnCells.length;
        
        for (var i = lowestIndex; i >= 0; i -= boardSize) {
          var cellToMove = gameBoard[i - shiftCount];
          
          if (cellToMove) {
            cellToMove.style.transform = "translateY(" + (shiftCount * 100) + "%)";
            gameBoard[i] = cellToMove;
          }
          else {
            gameBoard[i] = null;
          }
        }
      });
      
      // Remove empty columns from game board array
      for (var i = emptyColumns.length - 1; i >= 0; i--) {
        var columnCells = emptyColumns[i];
        
        columnCells.forEach(function(index) {
          gameBoard.splice(index, 1);
        });
      }
      
      // Add new cells at the top of columns
      for (var i = 0; i < emptyColumns.length; i++) {
        var columnCells = emptyColumns[i];
        
        columnCells.forEach(function(index) {
          var newCell = document.createElement("div");
          newCell.className = "cell";
          newCell.dataset.index = index;
          newCell.addEventListener("click", cellClickHandler);
          
          // Generate random cell type
          var cellType = generateRandomCellType();
          newCell.style.backgroundImage = "url('path_to_pictograms/" + cellType + ".png')";
          
          gameBoard[index] = newCell;
          document.getElementById("game-board").appendChild(newCell);
        });
      }
      
      // Check for new matches after filling the empty cells
      checkMatches();
    }
    
    // Get the cell type at a specific index
    function getCellType(index) {
      var cellStyle = gameBoard[index].style.backgroundImage;
      return cellStyle.substring(cellStyle.lastIndexOf("/") + 1, cellStyle.lastIndexOf("."));
    }
    
    // Update the score display
    function updateScore() {
      score += 100;
      document.getElementById("score").innerHTML = "Score: " + score;
    }
    
    // Decrease number of moves left and check if game over
    function decreaseMovesLeft() {
      movesLeft--;
      document.getElementById("moves-left").innerHTML = "Moves Left: " + movesLeft;
      
      if (movesLeft === 0) {
        // Game over
        alert("Game Over");
        resetGame();
      }
    }
    
    // Reset the game to the initial state
    function resetGame() {
      gameBoard = [];
      selectedCells = [];
      score = 0;
      currentLevel = 1;
      movesLeft = 15;
      createGameBoard();
      updateScore();
      updateMovesLeft();
    }
    
    // Start the game
    initGame();
  </script>
</body>
</html>
```

Please note that in the code, I have made some assumptions and placeholders for pictograms, such as `"path_to_pictograms/" + cellType + ".png"`. Replace `"path_to_pictograms/"` with the actual path to your pictogram images.

You can run the above code by saving it with a `.html` extension and opening the file in a web browser. It will display the match 3 game interface and allow you to play through 4 easy levels, where you need to match at least 3 cells of the same type horizontally or vertically to clear them and score points.

Hope you enjoy playing the game! Let me know if you need any further assistance.