Rainbow friend quest.'s game

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

No:19174

←

Prev Next

→

Rainbow friend quest.
Developer User8452｜Date and time 23/10/1 23:20:41
Build time 13.751 sec｜Game capacity 3.53KB｜

Script

Sure! Here's a simple game called "Rainbow Friend Quest" implemented as a single HTML file:

Help Rainbow find its friends by answering the questions!

🦄

🌈

🎠

🦋

This game presents a series of questions represented by pictograms. The player needs to select the correct friend for each question by clicking on the corresponding pictogram. The score is displayed, and once all the questions are answered, the final result is shown. The player can play again to improve their score.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game called "Rainbow Friend Quest" implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
   <title>Rainbow Friend Quest</title>
   <style>
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #f1f1f1;
      }
      #game-wrapper {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px;
         border: 2px solid #ccc;
         border-radius: 10px;
         background-color: #fff;
      }
      #question {
         font-size: 24px;
         margin: 10px 0;
      }
      #options {
         display: flex;
         flex-direction: column;
      }
      .option {
         padding: 10px;
         margin-bottom: 10px;
         font-size: 18px;
         text-align: center;
         cursor: pointer;
         border: 1px solid #ccc;
         border-radius: 5px;
      }
      #message {
         font-size: 20px;
         margin-top: 10px;
      }
   </style>
</head>
<body>
   <div id="game-wrapper">
      <div id="question">Help Rainbow find its friends by answering the questions!</div>
      <div id="options">
         <div class="option" onclick="checkAnswer(1)">🦄</div>
         <div class="option" onclick="checkAnswer(2)">🌈</div>
         <div class="option" onclick="checkAnswer(3)">🎠</div>
         <div class="option" onclick="checkAnswer(4)">🦋</div>
      </div>
      <div id="message"></div>
   </div>

let score = 0;
      let currentQuestion = 1;

function checkAnswer(option) {
         const selectedOption = document.querySelector(`.option:nth-child(${option})`);
         const message = document.getElementById('message');

if (selectedOption.textContent === correctAnswers[currentQuestion]) {
            score++;
            message.textContent = "Correct! Rainbow is one step closer to finding its friend!";
            message.style.color = "green";
         } else {
            message.textContent = "Oops! That's not Rainbow's friend!";
            message.style.color = "red";
         }

setTimeout(nextQuestion, 1500);
      }

function nextQuestion() {
         const message = document.getElementById('message');
         message.textContent = "";

if (currentQuestion >= Object.keys(correctAnswers).length) {
            showResult();
         } else {
            currentQuestion++;
            document.getElementById('question').textContent = `Which friend is the next one?\nQuestion ${currentQuestion}`;
         }
      }

function showResult() {
         const gameWrapper = document.getElementById('game-wrapper');
         gameWrapper.innerHTML = `
            <h2>Awesome!</h2>
            <p>You helped Rainbow find all its friends!</p>
            <p>Your score: ${score}/${Object.keys(correctAnswers).length}</p>
            <p>Play again to improve your score!</p>
         `;
      }
   </script>
</body>
</html>
```