Rainbow Friends is where you need to find 24 blocks around the map without touching blue: the enemy that will walk around the map. The player uses its mouse pointer to move. If the blue enemy sees the player, it will chase the player. If the player touches a block, the block will go to a random position. The goal is to touch the block 24 times without dieing to blue to win!'s game

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

No:11975

←

Prev Next

→

Rainbow Friends is where you need to find 24 block..ALL
Developer User3709｜Date and time 23/8/13 7:05:07
Build time 26.96 sec｜Game capacity 3.946KB｜

Script

Here's an example implementation of the Rainbow Friends game using HTML, JavaScript and pictograms:

Please note that you will need to replace the `emozi_all/player.png`, `emozi_all/block.png`, and `emozi_all/enemy.png` URLs inside the CSS with your actual pictogram image URLs. Also, make sure to save them in the same directory as your HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Here's an example implementation of the Rainbow Friends game using HTML, JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow Friends</title>
    <style>
      #game-container {
        width: 400px;
        height: 400px;
        border: 2px solid black;
        position: relative;
      }
      #player {
        width: 40px;
        height: 40px;
        background-image: url('player.png');
        background-size: cover;
        position: absolute;
      }
      .block {
        width: 40px;
        height: 40px;
        background-image: url('block.png');
        background-size: cover;
        position: absolute;
      }
      .enemy {
        width: 40px;
        height: 40px;
        background-image: url('enemy.png');
        background-size: cover;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="player"></div>
      <div id="enemy" class="enemy"></div>
      <div class="block"></div>
      
    </div>

// Initialize player position
      let playerX = 180;
      let playerY = 180;
      player.style.left = playerX + "px";
      player.style.top = playerY + "px";

// Initialize enemy position
      let enemyX = 0;
      let enemyY = 0;
      enemy.style.left = enemyX + "px";
      enemy.style.top = enemyY + "px";

// Generate random positions for blocks
      function generateBlocks() {
        for (let i = 0; i < blocks.length; i++) {
          let x = Math.floor(Math.random() * 361);
          let y = Math.floor(Math.random() * 361);
          blocks[i].style.left = x + "px";
          blocks[i].style.top = y + "px";
        }
      }

// Update player position based on mouse pointer
      function updatePlayerPosition(event) {
        playerX = event.clientX - gameContainer.offsetLeft - 20;
        playerY = event.clientY - gameContainer.offsetTop - 20;
        player.style.left = playerX + "px";
        player.style.top = playerY + "px";

// Check if the enemy sees the player
        if (
          Math.abs(playerX - enemyX) < 80 &&
          Math.abs(playerY - enemyY) < 80
        ) {
          // Chase the player
          if (playerX > enemyX) {
            enemyX += 1;
          } else {
            enemyX -= 1;
          }
          if (playerY > enemyY) {
            enemyY += 1;
          } else {
            enemyY -= 1;
          }
          enemy.style.left = enemyX + "px";
          enemy.style.top = enemyY + "px";
        }
      }

// Check if the player touches a block
      function checkBlockCollision() {
        for (let i = 0; i < blocks.length; i++) {
          if (
            Math.abs(playerX - parseInt(blocks[i].style.left)) < 40 &&
            Math.abs(playerY - parseInt(blocks[i].style.top)) < 40
          ) {
            let x = Math.floor(Math.random() * 361);
            let y = Math.floor(Math.random() * 361);
            blocks[i].style.left = x + "px";
            blocks[i].style.top = y + "px";
          }
        }
      }

// Event listener to track mouse movement
      gameContainer.addEventListener("mousemove", updatePlayerPosition);

// Generate initial block positions
      generateBlocks();

// Game loop
      setInterval(() => {
        checkBlockCollision();
      }, 100);
    </script>
  </body>
</html>
```

Please note that you will need to replace the `player.png`, `block.png`, and `enemy.png` URLs inside the CSS with your actual pictogram image URLs. Also, make sure to save them in the same directory as your HTML file.