AI game creator

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

No:12420

←

Prev Next

→

Shooting Game
Developer User5099｜Date and time 23/8/16 14:41:55
Build time 29.959 sec｜Game capacity 4.079KB｜

Script

Here is an example of a simple shooting game implemented as a single HTML file using JavaScript:

This game is a simple shooting game where you control a player using the left and right arrow keys, and shoot bullets using the spacebar key. The objective is to shoot down the enemies that are falling from the top of the screen. The game ends if any enemy reaches the bottom of the screen or if the player collides with an enemy. The score increases by 10 for each enemy shot. The game runs in a continuous game loop and updates the game state and renders the game objects (player, bullets, enemies) accordingly.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

Here is an example of a simple shooting game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shooting Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

// Event listeners
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 37) {
        // Left arrow key
        player.x -= 10;
      } else if (event.keyCode === 39) {
        // Right arrow key
        player.x += 10;
      } else if (event.keyCode === 32) {
        // Spacebar key
        shoot();
      }
    });

// Game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);

updatePlayer();
      updateBullets();
      updateEnemies();

renderPlayer();
      renderBullets();
      renderEnemies();

if (!gameover) {
        requestAnimationFrame(gameLoop);
      }
    }

// Player functions
    function updatePlayer() {
      if (player.x < 0) player.x = 0;
      if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
    }

function renderPlayer() {
      context.fillStyle = "blue";
      context.fillRect(player.x, player.y, player.width, player.height);
    }

// Bullet functions
    function shoot() {
      var bullet = { x: player.x + player.width / 2 - 2, y: player.y, width: 4, height: 10, speed: 5 };
      bullets.push(bullet);
    }

function updateBullets() {
      bullets.forEach(function(bullet) {
        bullet.y -= bullet.speed;

if (bullet.y < 0) {
          bullets.splice(bullets.indexOf(bullet), 1);
        }
      });
    }

function renderBullets() {
      context.fillStyle = "red";
      bullets.forEach(function(bullet) {
        context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
      });
    }

// Enemy functions
    function createEnemy() {
      var enemy = { x: Math.random() * (canvas.width - 20), y: 0, width: 20, height: 20, speed: Math.random() * 2 + 1 };
      enemies.push(enemy);
    }

function updateEnemies() {
      enemies.forEach(function(enemy) {
        enemy.y += enemy.speed;

if (enemy.y > canvas.height) {
          gameover = true;
        }

if (collisionCheck(player, enemy)) {
          gameover = true;
        }

bullets.forEach(function(bullet) {
          if (collisionCheck(bullet, enemy)) {
            score += 10;
            bullets.splice(bullets.indexOf(bullet), 1);
            enemies.splice(enemies.indexOf(enemy), 1);
          }
        });
      });
    }

function renderEnemies() {
      context.fillStyle = "green";
      enemies.forEach(function(enemy) {
        context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
      });
    }

// Collision detection
    function collisionCheck(obj1, obj2) {
      return (
        obj1.x < obj2.x + obj2.width &&
        obj1.x + obj1.width > obj2.x &&
        obj1.y < obj2.y + obj2.height &&
        obj1.y + obj1.height > obj2.y
      );
    }

// Start the game
    gameLoop();
    setInterval(createEnemy, 1000);
  </script>
</body>
</html>
```