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

No:21772

←

Prev Next

→

Three friends
Developer User10067｜Date and time 23/10/18 7:57:05
Build time 83.687 sec｜Game capacity 3.473KB｜

Script

Three friends

Three Friends

The game has ended!

This is a game called "Three Friends". It can be played on a smartphone and uses pictograms to represent the friends. The game is implemented in a single HTML file enclosed in script tags. When the page loads, it displays the title "Three Friends" and shows three pictograms representing friends. There is also a "Start Game" button. When the "Start Game" button is clicked, the game begins. The button is hidden, and the friends' positions are randomly generated. Each friend can be in one of three positions. The game checks if all three friends are in the same position. If they are, it displays a message saying "Congratulations! You won!" If they are not, it displays a message saying "Better luck next time!" The game can be played multiple times by clicking the "Start Game" button again after a result is displayed.

←

Prev　Next

→ 　

Back　

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

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

Three friends

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Three Friends</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 100px;
      }

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

.button {
        display: inline-block;
        padding: 15px 20px;
        margin-top: 20px;
        background-color: #333;
        color: white;
        font-size: 18px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
      }

.button:hover {
        background-color: #555;
      }

.result {
        font-size: 20px;
        margin-top: 40px;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Three Friends</h1>
    <img src="friend-1.png" id="friend1" alt="Friend 1">
    <img src="friend-2.png" id="friend2" alt="Friend 2">
    <img src="friend-3.png" id="friend3" alt="Friend 3">
    <h1 id="resultText" class="result">The game has ended!</h1>
    <button id="startButton" class="button">Start Game</button>

startButton.addEventListener("click", startGame);

function startGame() {
          // Hide start button
          startButton.style.display = "none";

// Randomly generate friend positions
          const friend1Position = Math.floor(Math.random() * 3) + 1;
          const friend2Position = Math.floor(Math.random() * 3) + 1;
          const friend3Position = Math.floor(Math.random() * 3) + 1;

// Set friend positions
          friend1.style.display = "inline-block";
          friend2.style.display = "inline-block";
          friend3.style.display = "inline-block";
          friend1.style.marginLeft = `${friend1Position * 100}px`;
          friend2.style.marginLeft = `${friend2Position * 100}px`;
          friend3.style.marginLeft = `${friend3Position * 100}px`;

// Determine winner
          if (friend1Position === friend2Position && friend2Position === friend3Position) {
            resultText.innerHTML = "Congratulations! You won!";
          } else {
            resultText.innerHTML = "Better luck next time!";
          }

// Show result
          resultText.style.display = "block";
        }
      };
    </script>
  </body>
</html>
```

This is a game called "Three Friends". It can be played on a smartphone and uses pictograms to represent the friends. The game is implemented in a single HTML file enclosed in script tags.

When the page loads, it displays the title "Three Friends" and shows three pictograms representing friends. There is also a "Start Game" button.

When the "Start Game" button is clicked, the game begins. The button is hidden, and the friends' positions are randomly generated. Each friend can be in one of three positions. The game checks if all three friends are in the same position. If they are, it displays a message saying "Congratulations! You won!" If they are not, it displays a message saying "Better luck next time!"

The game can be played multiple times by clicking the "Start Game" button again after a result is displayed.