Create a playable game's game

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

No:22192

←

Prev Next

→

Create a playable game
Developer User10266｜Date and time 23/10/21 11:57:53
Build time 69.362 sec｜Game capacity 3.201KB｜

Script

Sure! Here's a simple example of a playable game implemented as a single HTML file using JavaScript:

This game creates a grid of emoji cards, and the goal is to match all the pairs of emojis. When a card is clicked, it flips over to reveal the emoji. If two flipped cards have the same emoji, they stay flipped. If they don't match, they flip back over. The game ends when all the pairs are matched, and a congratulations message is displayed. Please note that these are simplified code snippets, and additional modifications can be made to enhance the game further.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple example of a playable game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Emoji Match Game</title>
  <style>
    #gameboard {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
    }
    .card {
      width: 90px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
      background-color: #f2f2f2;
      margin: 5px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="gameboard"></div>

// Shuffle function to randomize the emojis
    const shuffle = (array) => {
      let currentIndex = array.length, temporaryValue, randomIndex;

while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

return array;
    };

// Create a new game board
    const createGameBoard = () => {
      const gameboard = document.getElementById('gameboard');
      gameboard.innerHTML = '';

const shuffledEmojis = shuffle([...emojis, ...emojis]); // Duplicate emojis and shuffle them

shuffledEmojis.forEach((emoji) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.textContent = emoji;
        card.addEventListener('click', () => {
          flipCard(card, emoji);
        });
        
        gameboard.appendChild(card);
      });
    };

// Flip the card and check for a match
    const flipCard = (card, emoji) => {
      card.classList.add('flipped');

const flippedCards = document.querySelectorAll('.flipped');

if (flippedCards.length === 2) {
        const [card1, card2] = flippedCards;
        
        if (card1.textContent === card2.textContent) {
          card1.classList.remove('flipped');
          card2.classList.remove('flipped');
          
          if (document.querySelectorAll('.card:not(.flipped)').length === 0) {
            setTimeout(() => {
              alert('Congratulations! You matched all the emojis!');
              createGameBoard();
            }, 500);
          }
        } else {
          setTimeout(() => {
            card1.classList.remove('flipped');
            card2.classList.remove('flipped');
          }, 500)
        }
      }
    };

createGameBoard(); // Initial game board creation
  </script>
</body>
</html>
```

Please note that these are simplified code snippets, and additional modifications can be made to enhance the game further.