Code a game of dots red green and blue red dots chase blue dots green dots chase blue dots all dots run away from red ones and blue dots chase other blue dots's game

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

No:48028

←

Prev Next

→

Code a game of dots red green and blue red dots ch..ALL
Developer User20679｜Date and time 24/3/1 7:38:53
Build time 9.094 sec｜Game capacity 1.711KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<html>
<head>
  <title>Dot Chase Game</title>
  <style>
    #redDot {
      background-color: red;
    }

#greenDot {
      background-color: green;
    }

#blueDot {
      background-color: blue;
    }

#gameArea {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      position: relative;
    }

.dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="redDot" class="dot"></div>
    <div id="greenDot" class="dot"></div>
    <div id="blueDot" class="dot"></div>
  </div>

const moveDot = (dot) => {
      const randomX = Math.floor(Math.random() * 280);
      const randomY = Math.floor(Math.random() * 280);

dot.style.left = `${randomX}px`;
      dot.style.top = `${randomY}px`;
    }

const chaseDot = (chaser, target) => {
      const chaserRect = chaser.getBoundingClientRect();
      const targetRect = target.getBoundingClientRect();

if(chaserRect.top < targetRect.top) {
        chaser.style.top = `${chaserRect.top + 1}px`;
      } else {
        chaser.style.top = `${chaserRect.top - 1}px`;
      }

if(chaserRect.left < targetRect.left) {
        chaser.style.left = `${chaserRect.left + 1}px`;
      } else {
        chaser.style.left = `${chaserRect.left - 1}px`;
      }
    }

setInterval(() => {
      chaseDot(redDot, blueDot);
      chaseDot(greenDot, blueDot);
      moveDot(blueDot);
    }, 1000);
  </script>
</body>
</html>
```