AI game creator

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

No:23806

←

Prev Next

→

Shooting Game
Developer User11149｜Date and time 23/11/3 17:30:51
Build time 101.062 sec｜Game capacity 5.259KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript.

Please note that this is a basic implementation, and you can modify it to fit your needs or add additional features as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: #f1f1f1;
    }
    
    #player {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: blue;
    }
    
    .bullet {
      position: absolute;
      width: 5px;
      height: 20px;
      background-color: red;
    }
    
    .target {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
  </div>

// Add score display
    Scoreboard.innerText = 'Score: ' + score;
    Scoreboard.style.position = 'absolute';
    Scoreboard.style.top = '10px';
    Scoreboard.style.left = '10px';
    gameContainer.appendChild(Scoreboard);

// Game loop
    setInterval(function() {
      // Update player position
      if (rightPressed) {
        var currentPlayerLeft = parseInt(player.style.left);
        player.style.left = (currentPlayerLeft + PlayerSpeed) + 'px';
      } else if (leftPressed) {
        var currentPlayerLeft = parseInt(player.style.left);
        player.style.left = (currentPlayerLeft - PlayerSpeed) + 'px';
      }

// Update bullet positions
      bullets.forEach(function(bullet, index) {
        var currentBulletTop = parseInt(bullet.style.top);
        bullet.style.top = (currentBulletTop - BulletSpeed) + 'px';
        
        // Check if bullet hit any targets
        targets.forEach(function(target, targetIndex) {
          if (isColliding(bullet, target)) {
            gameContainer.removeChild(bullet);
            bullets.splice(index, 1);
            gameContainer.removeChild(target);
            targets.splice(targetIndex, 1);
            score += 10;
            Scoreboard.innerText = 'Score: ' + score;
          }
        });

// Remove bullets when they leave the game container
        if (currentBulletTop < 0) {
          gameContainer.removeChild(bullet);
          bullets.splice(index, 1);
        }
      });

// Create new targets
      if (Math.random() < 0.01) {
        var target = createTarget();
        gameContainer.appendChild(target);
        targets.push(target);
      }

// Update target positions
      targets.forEach(function(target, index) {
        var currentTargetTop = parseInt(target.style.top);
        target.style.top = (currentTargetTop + TargetSpeed) + 'px';

// Check if a target reached the player
        if (isColliding(target, player)) {
          gameContainer.removeChild(target);
          targets.splice(index, 1);
          score -= 10;
          Scoreboard.innerText = 'Score: ' + score;
        }

// Remove targets when they leave the game container
        if (currentTargetTop > window.innerHeight) {
          gameContainer.removeChild(target);
          targets.splice(index, 1);
        }
      });
    }, 16);

// Player movement control
    var rightPressed = false;
    var leftPressed = false;

// Helper functions
    function createBullet() {
      var bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = (parseInt(player.style.left) + 22) + 'px';
      bullet.style.top = (parseInt(player.style.bottom) + 50) + 'px';
      return bullet;
    }

function createTarget() {
      var target = document.createElement('div');
      target.className = 'target';
      target.style.left = Math.random() * (window.innerWidth - 50) + 'px';
      target.style.top = '-50px';
      return target;
    }

function isColliding(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
    }
  </script>
</body>
</html>
```

Please note that this is a basic implementation, and you can modify it to fit your needs or add additional features as per your requirements.