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

No:38487

Blue Maker there's many blue emojis you have to ma..ALL
Developer User17401｜Date and time 24/1/24 23:34:45
Build time 16.016 sec｜Game capacity 3.658KB｜

Script

Sure! Here's a basic implementation of the game "Blue Maker" using HTML, CSS, and JavaScript. The game consists of 10 rounds, and in each round, you need to find the two emojis that will make the correct blue color when clicked. The emoji set will refresh at the start of each round. You can play this game on a smartphone. Please note that this is a simple implementation, and you can enhance it further to add more features and design elements. Here's the code:

Blue Maker

To play the game, copy the code into a new HTML file and open it in a browser. The game board will display a grid of emojis. Click on two emojis that you think will create the correct blue color, and a message will pop up indicating whether you guessed correctly or not. The game will reset for the next round with a new set of emojis. Please note that the emojis used in the game are fetched from the Twemoji CDN, so an internet connection is required to load the emoji images.

←

Prev　Next

→ 　

Back　

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

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

Here's the code:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Blue Maker Game</title>
    <style>
      body {
        text-align: center;
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
      }

h1 {
        color: #333;
      }

#game-board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
      }

.emoji {
        width: 100px;
        height: 100px;
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center;
        margin: 10px;
        cursor: pointer;
      }

.emoji.is-selected {
        border: 4px solid #00f;
      }
    </style>
  </head>

<body>
    <h1>Blue Maker</h1>
    <div id="game-board"></div>

let selectedEmojis = [];

// Function to check if the selected emojis create the correct blue color
      function checkForBlue() {
        const blueCodes = ['0033cc', '0000ff'];
        const selectedCodes = selectedEmojis.map((emoji) => {
          const codePoint = emoji.codePointAt(0).toString(16);
          return codePoint.padStart(6, '0');
        });

return blueCodes.includes(selectedCodes.join(''));
      }

// Function to update UI with emojis
      function renderEmojis() {
        const gameBoard = document.getElementById('game-board');
        gameBoard.innerHTML = '';

emojis.forEach((emoji) => {
          const emojiElement = document.createElement('div');
          emojiElement.className = 'emoji';
          emojiElement.style.backgroundImage = `url('https://twemoji.maxcdn.com/v/latest/72x72/${emoji.codePointAt(0).toString(16)}.png')`;

emojiElement.addEventListener('click', () => {
            emojiElement.classList.toggle('is-selected');

if (emojiElement.classList.contains('is-selected')) {
              selectedEmojis.push(emoji);
            } else {
              const index = selectedEmojis.indexOf(emoji);
              selectedEmojis.splice(index, 1);
            }

if (selectedEmojis.length === 2) {
              if (checkForBlue()) {
                alert('Congratulations! You made the correct blue color!');
              } else {
                alert('Oops! Try again!');
              }

selectedEmojis = [];
              renderEmojis();
            }
          });

gameBoard.appendChild(emojiElement);
        });
      }

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

Please note that the emojis used in the game are fetched from the Twemoji CDN, so an internet connection is required to load the emoji images.