AI game creator

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

No:19201

←

Prev Next

→

Shooting Game
Developer User8465｜Date and time 23/10/2 2:01:16
Build time 15.646 sec｜Game capacity 4.211KB｜

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 can be further enhanced with additional features.

To play the game, open the HTML file in a web browser (preferably on a smartphone) and use the left and right arrow keys to move the player and the space bar to shoot bullets. The objective is to shoot down the green enemies to earn points. The score is displayed at the top left corner. Have fun playing!

←

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 #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Game variables
    var canvas, context, player, bullets, enemies, gameLoop;
    var score = 0;
    
    // Initialize the game
    function init() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      
      player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 50
      };
      
      bullets = [];
      
      enemies = [
        { x: 50, y: 50, width: 50, height: 50 },
        { x: 150, y: 50, width: 50, height: 50 },
        { x: 250, y: 50, width: 50, height: 50 }
      ];
      
      score = 0;
      
      document.addEventListener('keydown', handleKeyPress);
      gameLoop = setInterval(update, 20);
    }
    
    // Update game objects and render them on the canvas
    function update() {
      clearCanvas();
      
      // Update player position
      if (player.x > 0 && player.x + player.width < canvas.width) {
        player.x += player.dx || 0;
      }
      
      // Update bullet positions and check for collision with enemies
      bullets.forEach(function(bullet, bulletIndex) {
        bullet.y -= bullet.dy || 0;
        
        enemies.forEach(function(enemy, enemyIndex) {
          if (
            bullet.x < enemy.x + enemy.width &&
            bullet.x + bullet.width > enemy.x &&
            bullet.y < enemy.y + enemy.height &&
            bullet.y + bullet.height > enemy.y
          ) {
            // Collision detected
            bullets.splice(bulletIndex, 1);
            enemies.splice(enemyIndex, 1);
            score += 10;
          }
        });
      });
      
      renderPlayer();
      renderBullets();
      renderEnemies();
      renderScore();
    }
    
    // Render the player on the canvas
    function renderPlayer() {
      context.fillStyle = '#000';
      context.fillRect(player.x, player.y, player.width, player.height);
    }
    
    // Render the bullets on the canvas
    function renderBullets() {
      bullets.forEach(function(bullet) {
        context.fillStyle = '#ff0000';
        context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
      });
    }
    
    // Render the enemies on the canvas
    function renderEnemies() {
      enemies.forEach(function(enemy) {
        context.fillStyle = '#00ff00';
        context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
      });
    }
    
    // Render the score on the canvas
    function renderScore() {
      context.font = '20px Arial';
      context.fillStyle = '#000';
      context.fillText('Score: ' + score, 10, 30);
    }
    
    // Clear the canvas for the next frame
    function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

// Handle key press events
    function handleKeyPress(event) {
      if (event.keyCode === 37) {
        player.dx = -5; // Move left
      } else if (event.keyCode === 39) {
        player.dx = 5; // Move right
      } else if (event.keyCode === 32) {
        bullets.push({
          x: player.x + player.width / 2 - 2.5,
          y: player.y - 10,
          width: 5,
          height: 10,
          dy: 10 // Bullet speed
        });
      }
    }
    
    // Start the game
    init();
    
    // Stop the game loop when the window is closed
    window.addEventListener('beforeunload', function(event) {
      clearInterval(gameLoop);
    });
  </script>
</body>
</html>
```