A game where you are a bunny and there are arrows falling down from the void and you have to catch all green arrows. The game starts when you tap the screen. If you collect any red arrows then your character falls down and dies and you lose.'s game | AI game creator

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

No:49485

127

A game where you are a bunny and there are arrows ..ALL
Developer User20860｜Date and time 24/3/5 6:54:21
Build time 11.027 sec｜Game capacity 2.13KB｜

→ 　

0　

0　

[PR]現在の売れ筋ゲームランキング

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

(C)2023 HisashiApp

<html>
<head>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  
  #player {
    width: 50px;
    height: 50px;
    background-color: pink;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .arrow {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -30px;
  }
  
  .green {
    background-color: green;
  }
  
  .red {
    background-color: red;
  }
</style>
</head>
<body>
<div id="player"></div>

<script>
  const arrows = ["green", "red"];
  let gameInterval;
  
  function startGame() {
    gameInterval = setInterval(() => {
      const arrow = document.createElement("div");
      const arrowType = arrows[Math.floor(Math.random() * arrows.length)];
      arrow.classList.add("arrow", arrowType);
      arrow.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
      document.body.appendChild(arrow);
      
      moveArrow(arrow);
    }, 1000);
    
    document.body.addEventListener("click", function() {
      document.getElementById("player").style.bottom = "100px";
      setTimeout(() => {
        document.getElementById("player").style.bottom = "20px";
      }, 200);
    });
  }
  
  function moveArrow(arrow) {
    let bottom = -30;
    const arrowInterval = setInterval(() => {
      bottom += 5;
      arrow.style.top = bottom + "px";
      if (bottom > window.innerHeight) {
        clearInterval(arrowInterval);
        document.body.removeChild(arrow);
      }
      if (
        arrow.classList.contains("green") &&
        bottom > 70 &&
        bottom < 120 &&
        Math.abs(arrow.offsetLeft - document.getElementById("player").offsetLeft) < 50
      ) {
        document.body.removeChild(arrow);
      } else if (arrow.classList.contains("red") && bottom > 70 && bottom < 120) {
        clearInterval(arrowInterval);
        document.body.removeChild(arrow);
        clearInterval(gameInterval);
        alert("You lose! Bunny fell down!");
      }
    }, 10);
  }
  
  startGame();
</script>
</body>
</html>