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

No:9252

1024

←

Prev Next

→

FPV Drone
Developer User4298｜Date and time 23/7/23 1:14:22
Build time 28.126 sec｜Game capacity 3.723KB｜

Script

Drone FPV

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }

.drone {
        width: 100px;
        height: 100px;
        background-image: url('drone.png');
        background-size: cover;
        position: relative;
        margin-top: 150px;
      }

.obstacle {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
      }

#score {
        font-size: 24px;
      }

.game-over {
        font-size: 32px;
        color: red;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Drone FPV</h1>
    <div id="score">Score: 0</div>
    <div id="game-over" style="display: none" class="game-over">Game Over!</div>
    <div class="drone"></div>
    <script>
      // Get the drone element
      const drone = document.querySelector('.drone');

// Get the score element
      const scoreElement = document.getElementById('score');

// Initialize game variables
      let score = 0;
      let gameSpeed = 2;
      let isGameOver = false;

// Function to create obstacles
      function createObstacle() {
        // Create a new obstacle element
        const obstacle = document.createElement('div');
        obstacle.className = 'obstacle';

// Set its initial position
        obstacle.style.left = '100%';
        obstacle.style.top = Math.floor(Math.random() * 250) + 'px';

// Append the obstacle to the body
        document.body.appendChild(obstacle);

// Move the obstacle
        const obstacleMoveInterval = setInterval(() => {
          if (!isGameOver) {
            obstacle.style.left = parseInt(obstacle.style.left) - gameSpeed + 'px';

// If the obstacle collides with the drone, end the game
            if (checkCollision(obstacle, drone)) {
              endGame();
              clearInterval(obstacleMoveInterval);
            }

// If the obstacle moves off the left side of the screen, increase the score
            if (parseInt(obstacle.style.left) + obstacle.offsetWidth < 0) {
              score++;
              scoreElement.innerText = 'Score: ' + score;
              obstacle.remove();
              clearInterval(obstacleMoveInterval);
            }
          }
        }, 10);
      }

// Function to check collision between two elements
      function checkCollision(obj1, obj2) {
        const rect1 = obj1.getBoundingClientRect();
        const rect2 = obj2.getBoundingClientRect();
        return (
          rect1.top < rect2.bottom &&
          rect1.bottom > rect2.top &&
          rect1.left < rect2.right &&
          rect1.right > rect2.left
        );
      }

// Function to handle the game over scenario
      function endGame() {
        isGameOver = true;
        document.getElementById('game-over').style.display = 'block';
      }

// Function to handle the drone movement
      function moveDrone(e) {
        if (!isGameOver) {
          if (e.keyCode === 38 && drone.offsetTop > 0) {
            // Up Arrow
            drone.style.top = drone.offsetTop - 10 + 'px';
          } else if (e.keyCode === 40 && drone.offsetTop + drone.offsetHeight < 300) {
            // Down Arrow
            drone.style.top = drone.offsetTop + 10 + 'px';
          }
        }
      }

// Event listener to start the game and handle the drone movement
      document.addEventListener('keydown', (e) => {
        if (!isGameOver && e.keyCode === 32) {
          // Spacebar
          setInterval(() => {
            createObstacle();
          }, 2000);
        }
        moveDrone(e);
      });
    </script>
  </body>
</html>