AI game creator

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

No:18720

←

Prev Next

→

Shooting Game
Developer User8249｜Date and time 23/9/30 14:29:45
Build time 13.918 sec｜Game capacity 4.519KB｜

Script

Sure, here's an example of a simple shooting game implemented as a single HTML file using JavaScript and enclosed in script tags:

Score: 0

This game allows the player to shoot bullets by clicking on the game container. The goal is to shoot the randomly appearing targets and earn points. The score is displayed at the top. The player is represented by a red square, bullets are yellow rectangles, and targets are green squares. Feel free to modify and enhance the game 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 and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 400px;
      background-color: lightblue;
    }

#player {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: red;
    }

.bullet {
      position: absolute;
      width: 10px;
      height: 20px;
      background-color: yellow;
    }

.target {
      position: absolute;
      width: 40px;
      height: 40px;
      background-color: green;
    }

#score {
      text-align: center;
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
  </div>

<div id="score">Score: 0</div>

// Function to create bullets
    function createBullet() {
      var bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = (player.offsetLeft + player.offsetWidth / 2 - 5) + 'px';
      bullet.style.bottom = player.offsetHeight + 'px';
      gameContainer.appendChild(bullet);
      bullets.push(bullet);
    }

// Function to create targets
    function createTarget() {
      var target = document.createElement('div');
      target.className = 'target';
      target.style.left = Math.random() * (gameContainer.offsetWidth - 40) + 'px';
      target.style.top = Math.random() * (gameContainer.offsetHeight - 40) + 'px';
      gameContainer.appendChild(target);
      targets.push(target);
    }

// Function to update game state
    function updateGame() {
      // Move bullets
      bullets.forEach(function (bullet) {
        bullet.style.bottom = (parseInt(bullet.style.bottom) + 5) + 'px';

// Check if bullet hits any targets
        targets.forEach(function (target) {
          if (collision(bullet, target)) {
            gameContainer.removeChild(bullet);
            bullets.splice(bullets.indexOf(bullet), 1);
            gameContainer.removeChild(target);
            targets.splice(targets.indexOf(target), 1);
            score += 10;
            document.getElementById('score').innerText = 'Score: ' + score;
          }
        });

// Remove bullets that go offscreen
        if (parseInt(bullet.style.bottom) > gameContainer.offsetHeight) {
          gameContainer.removeChild(bullet);
          bullets.splice(bullets.indexOf(bullet), 1);
        }
      });

// Create new targets
      if (Math.random() < 0.03) {
        createTarget();
      }

// Move targets
      targets.forEach(function (target) {
        target.style.left = (parseInt(target.style.left) + (Math.random() * 10 - 5)) + 'px';

// Remove targets that go offscreen
        if (parseInt(target.style.left) < 0 || parseInt(target.style.left) > gameContainer.offsetWidth) {
          gameContainer.removeChild(target);
          targets.splice(targets.indexOf(target), 1);
        }
      });

// Request next frame
      requestAnimationFrame(updateGame);
    }

// Function to check collision between two elements
    function collision(a, b) {
      var aRect = a.getBoundingClientRect();
      var bRect = b.getBoundingClientRect();

return !(
        ((aRect.y + aRect.height) < (bRect.y)) ||
        (aRect.y > (bRect.y + bRect.height)) ||
        ((aRect.x + aRect.width) < bRect.x) ||
        (aRect.x > (bRect.x + bRect.width))
      );
    }

// Event listener for shooting
    document.addEventListener('click', createBullet);

// Start game loop
    updateGame();
  </script>
</body>
</html>
```