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

No:27208

←

Prev Next

→

Word Creator
Developer User7816｜Date and time 23/12/5 1:58:01
Build time 69.349 sec｜Game capacity 3.395KB｜

Script

Word Creator Game

Click on the icons to create a word!

🌞

🌈

🌺

⭐

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
  <title>Word Creator Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f2f2f2;
      margin-top: 50px;
    }

h1 {
      color: #333;
      font-size: 28px;
    }

#word {
      font-size: 36px;
      font-weight: bold;
    }

#controls {
      margin-top: 40px;
    }

button {
      font-size: 18px;
      padding: 10px 20px;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

button:disabled {
      background-color: #aaa;
      cursor: not-allowed;
    }

#message {
      margin-top: 30px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

#icons {
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

.icon {
      font-size: 48px;
      margin: 0 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>Word Creator Game</h1>
  <p>Click on the icons to create a word!</p>
  <div id="word"></div>
  <div id="controls">
    <button id="startButton">Start</button>
    <button id="resetButton" disabled>Reset</button>
  </div>
  <div id="message"></div>
  <div id="icons">
    <div class="icon">🌞</div>
    <div class="icon">🌈</div>
    <div class="icon">🌺</div>
    <div class="icon">⭐</div>
  </div>

// Define the word creation logic
    const createWord = () => {
      const selectedIcons = [...icons].filter(icon => icon.classList.contains('selected'));
      const word = selectedIcons.map(icon => icon.innerText).join('');
      wordContainer.innerText = word;
      if (word.length === 0) {
        messageContainer.innerText = '';
        resetButton.disabled = true;
      } else {
        const isPalindrome = word.toLowerCase() === word.toLowerCase().split('').reverse().join('');
        messageContainer.innerText = isPalindrome ? 'It\'s a palindrome!' : 'Not a palindrome';
        resetButton.disabled = false;
      }
    }

// Add click event listeners to icons
    for (let i = 0; i < icons.length; i++) {
      const icon = icons[i];
      icon.addEventListener('click', () => {
        icon.classList.toggle('selected');
        createWord();
      });
    }

// Reset the game
    const resetGame = () => {
      wordContainer.innerText = '';
      messageContainer.innerText = '';
      const selectedIcons = [...icons].filter(icon => icon.classList.contains('selected'));
      selectedIcons.forEach(icon => icon.classList.remove('selected'));
      resetButton.disabled = true;
    }

// Start the game when the start button is clicked
    startButton.addEventListener('click', () => {
      for (let i = 0; i < icons.length; i++) {
        icons[i].classList.add('selected');
      }
      createWord();
      startButton.disabled = true;
    });

// Reset the game when the reset button is clicked
    resetButton.addEventListener('click', resetGame);
  </script>
</body>

</html>