AI game creator

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

No:26889

←

Prev Next

→

Shooting Game
Developer User13310｜Date and time 23/12/3 1:56:04
Build time 51.75 sec｜Game capacity 3.304KB｜

Script

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

This game creates a shooting game where you click on the game area to shoot bullets. The bullets move up the screen, and if they collide with a target, both the bullet and the target are removed, and the score is incremented. The game area is represented by a `div` element with the id of "game", and bullets and targets are represented as `div` elements with the respective classes of "bullet" and "target". The score is displayed on the game area. Feel free to modify the code to suit your requirements and add pictograms or further enhancements to the game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Shooting Game</title>
    <style>
      #game {
        width: 500px;
        height: 500px;
        border: 1px solid black;
        position: relative;
      }
      
      .bullet {
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
      }
      
      .target {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game"></div>
    <script>
      window.onload = function() {
        var game = document.getElementById('game');
        var score = 0;
        
        game.onclick = function(event) {
          createBullet(event.clientX, event.clientY);
        };
        
        function createBullet(x, y) {
          var bullet = document.createElement('div');
          bullet.className = 'bullet';
          bullet.style.left = x + 'px';
          bullet.style.top = y + 'px';
          game.appendChild(bullet);
          
          moveBullet(bullet);
        }
        
        function moveBullet(bullet) {
          var interval = setInterval(function() {
            var currentTop = parseFloat(bullet.style.top);
            
            if (currentTop <= 0) {
              clearInterval(interval);
              removeBullet(bullet);
            } else {
              bullet.style.top = (currentTop - 5) + 'px';
              checkCollision(bullet);
            }
          }, 10);
        }
        
        function checkCollision(bullet) {
          var bullets = document.getElementsByClassName('bullet');
          var targets = document.getElementsByClassName('target');
          
          for (var i = 0; i < targets.length; i++) {
            var target = targets[i];
            
            var bulletRect = bullet.getBoundingClientRect();
            var targetRect = target.getBoundingClientRect();
            
            if (
              bulletRect.top <= targetRect.bottom &&
              bulletRect.bottom >= targetRect.top &&
              bulletRect.left <= targetRect.right &&
              bulletRect.right >= targetRect.left
            ) {
              removeBullet(bullet);
              target.parentNode.removeChild(target);
              score++;
              updateScore();
              return;
            }
          }
        }
        
        function removeBullet(bullet) {
          bullet.parentNode.removeChild(bullet);
        }
        
        function updateScore() {
          game.innerHTML = 'Score: ' + score;
        }
      };
    </script>
  </body>
</html>
```

Feel free to modify the code to suit your requirements and add pictograms or further enhancements to the game.