AI game creator

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

No:15970

140

←

Prev Next

→

Shooting Game
Developer User5042｜Date and time 23/9/14 9:44:41
Build time 51.893 sec｜Game capacity 5.526KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file that uses JavaScript. Please note that the following code is just a basic implementation to give you an idea, and you can modify and enhance it as per your requirements:

Copy and paste the above code into an HTML file (e.g., `shooting_game.html`) and open the file in a web browser. You should see a canvas with a player (blue square) that can be moved using arrow keys and shoots red bullets. Enemies (green squares) will spawn randomly from the top and move downwards. If a bullet collides with an enemy, both the bullet and the enemy will disappear. The game will continue running until you close the browser tab/window.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
   <title>Shooting Game</title>
   <style>
      canvas {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <canvas id="gameCanvas" width="400" height="300"></canvas>

// Player setup
      let player = {
         x: canvas.width / 2,
         y: canvas.height / 2,
         size: 20,
         color: 'blue',
         speed: 5
      };

// Bullet setup
      let bullets = [];
      const bulletSize = 5;
      const bulletSpeed = 8;

// Enemy setup
      let enemies = [];

// Game loop
      function gameLoop() {
         requestAnimationFrame(gameLoop);
         clearCanvas();
         movePlayer();
         drawPlayer();
         moveBullets();
         drawBullets();
         spawnEnemies();
         moveEnemies();
         drawEnemies();
         checkCollision();
      }

// Functions to clear the canvas
      function clearCanvas() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

// Functions to move the player
      function movePlayer() {
         document.onkeydown = function (event) {
            if (event.keyCode === 37) { // Left arrow key
               player.x -= player.speed;
            } else if (event.keyCode === 39) { // Right arrow key
               player.x += player.speed;
            } else if (event.keyCode === 38) { // Up arrow key
               player.y -= player.speed;
            } else if (event.keyCode === 40) { // Down arrow key
               player.y += player.speed;
            } else if (event.keyCode === 32) { // Spacebar key to shoot bullets
               shootBullet();
            }
         };
      }

// Function to draw the player
      function drawPlayer() {
         ctx.fillStyle = player.color;
         ctx.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
      }

// Functions to shoot bullets
      function shootBullet() {
         bullets.push({
            x: player.x,
            y: player.y - player.size / 2,
            size: bulletSize,
            color: 'red'
         });
      }

// Function to move the bullets
      function moveBullets() {
         bullets = bullets.filter(function (bullet) {
            bullet.y -= bulletSpeed;
            return bullet.y >= -bullet.size;
         });
      }

// Function to draw the bullets
      function drawBullets() {
         bullets.forEach(function (bullet) {
            ctx.fillStyle = bullet.color;
            ctx.fillRect(bullet.x - bullet.size / 2, bullet.y, bullet.size, bullet.size);
         });
      }

// Function to spawn enemies
      function spawnEnemies() {
         if (Math.random() < 0.02) {
            let enemySize = Math.random() * (30 - 10) + 10; // Random size between 10 and 30
            let enemySpeed = Math.random() * (4 - 1) + 1; // Random speed between 1 and 4
            let enemyX = Math.random() * (canvas.width - enemySize) + enemySize / 2; // Random X coordinate
            let enemyY = -enemySize / 2; // Starts from above the canvas

enemies.push({
               x: enemyX,
               y: enemyY,
               size: enemySize,
               color: 'green',
               speed: enemySpeed
            });
         }
      }

// Function to move the enemies
      function moveEnemies() {
         enemies = enemies.filter(function (enemy) {
            enemy.y += enemy.speed;
            return enemy.y <= canvas.height + enemy.size;
         });
      }

// Function to draw the enemies
      function drawEnemies() {
         enemies.forEach(function (enemy) {
            ctx.fillStyle = enemy.color;
            ctx.fillRect(enemy.x - enemy.size / 2, enemy.y - enemy.size / 2, enemy.size, enemy.size);
         });
      }

// Function to check collision between bullets and enemies
      function checkCollision() {
         bullets.forEach(function (bullet) {
            enemies.forEach(function (enemy) {
               if (
                  bullet.x + bullet.size / 2 > enemy.x - enemy.size / 2 &&
                  bullet.x - bullet.size / 2 < enemy.x + enemy.size / 2 &&
                  bullet.y - bullet.size / 2 < enemy.y + enemy.size / 2 &&
                  bullet.y + bullet.size / 2 > enemy.y - enemy.size / 2
               ) {
                  // Remove the bullet and enemy on collision
                  bullets.splice(bullets.indexOf(bullet), 1);
                  enemies.splice(enemies.indexOf(enemy), 1);
               }
            });
         });
      }

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