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

No:33643

Love Archer Rainbow Monster: Shoot Them Boyfriend ..ALL
Developer User13970｜Date and time 24/1/5 21:55:23
Build time 31.074 sec｜Game capacity 3.284KB｜

Script

Archer Rainbow Monster: Shoot Them

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Archer Rainbow Monster: Shoot Them Game</title>
  <style>
    body {
      background-color: #f3f3f3;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    #game-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    #play-button {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background-color: #37b83b;
      color: white;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    #score {
      font-size: 24px;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <div id="game-container">
    <h1>Archer Rainbow Monster: Shoot Them</h1>
    <img id="character" src="https://example.com/character.png" alt="Character" width="150" height="150">
    <button id="play-button">Tap to Play!</button>
    <p id="score">Score: 0</p>
  </div>

// HTML elements
    var characterElement = document.getElementById("character");
    var playButton = document.getElementById("play-button");
    var scoreElement = document.getElementById("score");

// Event listeners
    playButton.addEventListener("click", startGame);

// Function to start the game
    function startGame() {
      playButton.style.display = "none";
      scoreElement.style.visibility = "visible";
      characterElement.style.transform = "translateX(0px)";
      characterPosition = 0;
      
      // Move the character
      setInterval(moveCharacter, 100);
      
      // Spawn rainbow monsters
      setInterval(spawnRainbowMonster, 2000);
    }

// Function to move the character
    function moveCharacter() {
      characterPosition += characterSpeed;
      characterElement.style.transform = `translateX(${characterPosition}px)`;
    }

// Function to spawn rainbow monsters
    function spawnRainbowMonster() {
      var rainbowMonster = document.createElement("img");
      rainbowMonster.src = "https://example.com/rainbow-monster.png";
      rainbowMonster.width = 100;
      rainbowMonster.height = 100;
      rainbowMonster.style.position = "absolute";
      rainbowMonster.style.top = Math.floor(Math.random() * 300) + "px";
      rainbowMonster.style.left = "100vw";
      rainbowMonster.addEventListener("click", collectRainbowMonster);
      document.body.appendChild(rainbowMonster);

// Move the rainbow monster towards left of the screen
      var interval = setInterval(function() {
        var currentLeft = parseFloat(rainbowMonster.style.left);
        if (currentLeft > -100) {
          rainbowMonster.style.left = (currentLeft - 5) + "px";
        } else {
          clearInterval(interval);
          document.body.removeChild(rainbowMonster);
        }
      }, 30);
    }

// Function to collect rainbow monster
    function collectRainbowMonster(event) {
      var clickedRainbowMonster = event.target;
      document.body.removeChild(clickedRainbowMonster);
      score += 10;
      scoreElement.textContent = "Score: " + score;
    }
  </script>
</body>
</html>