A game like candy crush's game

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

No:9366

135

←

Prev Next

→

A game like candy crush
Developer User4342｜Date and time 23/7/23 23:37:59
Build time 33.504 sec｜Game capacity 4.925KB｜

Script

Sure! Here's a simple game similar to Candy Crush using JavaScript and pictograms. It is implemented as a single HTML file enclosed within script tags.

You can save the above code into an HTML file (e.g., `game.html`) and open it in any web browser on your smartphone to play the game. The game board is displayed with various pictograms, and you can swap adjacent pictograms by clicking on them. The goal is to match at least three pictograms of the same type horizontally or vertically, which will cause them to be replaced with new random pictograms. The game continuously checks for matches and removes them, creating a dynamic gameplay experience.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's a simple game similar to Candy Crush using JavaScript and pictograms. It is implemented as a single HTML file enclosed within script tags.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .game-container {
      display: flex;
      flex-wrap: wrap;
      width: 240px;
      height: 320px;
    }

.game-item {
      width: 40px;
      height: 40px;
      margin: 2px;
      background-size: cover;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="game-container"></div>

// Number of rows and columns
    const numRows = 8;
    const numCols = 6;

let selectedPictogram = null;

function createGameBoard() {
      const container = document.querySelector(".game-container");

for (let i = 0; i < numRows * numCols; i++) {
        const gameItem = document.createElement("div");
        gameItem.classList.add("game-item");
        gameItem.addEventListener("click", () => handleClick(i));
        container.appendChild(gameItem);
      }
    }

function getRandomPictogram() {
      return pictograms[Math.floor(Math.random() * pictograms.length)];
    }

function handleClick(index) {
      const gameItems = document.querySelectorAll(".game-item");

if (!selectedPictogram) {
        selectedPictogram = gameItems[index].innerText;
        gameItems[index].classList.add("selected");
      } else {
        const previousIndex = Array.from(gameItems).findIndex(
          (item) => item.innerText === selectedPictogram
        );

if (isAdjacent(index, previousIndex)) {
          swapPictograms(index, previousIndex);

if (!checkForMatches()) {
            swapPictograms(index, previousIndex);
          }
        }

gameItems[previousIndex].classList.remove("selected");
        selectedPictogram = null;
      }
    }

function swapPictograms(indexA, indexB) {
      const gameItems = document.querySelectorAll(".game-item");

const pictogramA = gameItems[indexA].innerText;
      gameItems[indexA].innerText = gameItems[indexB].innerText;
      gameItems[indexB].innerText = pictogramA;
    }

function isAdjacent(indexA, indexB) {
      const aRow = Math.floor(indexA / numCols);
      const aCol = indexA % numCols;
      const bRow = Math.floor(indexB / numCols);
      const bCol = indexB % numCols;

return Math.abs(aRow - bRow) + Math.abs(aCol - bCol) === 1;
    }

function checkForMatches() {
      const gameItems = document.querySelectorAll(".game-item");
      let matched = false;

for (let i = 0; i < numRows * numCols; i++) {
        const pictogram = gameItems[i].innerText;
        let count = 1;

// Check horizontally
        for (let j = i + 1; j < numRows * numCols; j++) {
          if (gameItems[j].innerText === pictogram) {
            count++;
          } else {
            break;
          }
        }
        
        if (count >= 3) {
          for (let j = i; j < i + count; j++) {
            gameItems[j].classList.add("matched");
          }
          
          matched = true;
        }

// Check vertically
        count = 1;
        for (let j = i + numCols; j < numRows * numCols; j += numCols) {
          if (gameItems[j].innerText === pictogram) {
            count++;
          } else {
            break;
          }
        }
        
        if (count >= 3) {
          for (let j = i; j < i + count * numCols; j += numCols) {
            gameItems[j].classList.add("matched");
          }
          
          matched = true;
        }
      }

return matched;
    }

function removeMatches() {
      const gameItems = document.querySelectorAll(".game-item");

for (let i = 0; i < numRows * numCols; i++) {
        if (gameItems[i].classList.contains("matched")) {
          gameItems[i].innerText = getRandomPictogram();
          gameItems[i].classList.remove("matched");
        }
      }
    }

function startGame() {
      createGameBoard();
      const gameItems = document.querySelectorAll(".game-item");

gameItems.forEach((item) => {
        item.innerText = getRandomPictogram();
      });

setInterval(() => {
        removeMatches();
        checkForMatches();
      }, 200);
    }

// Start the game
    startGame();
  </script>
</body>
</html>
```