AI game creator

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

No:21690

←

Prev Next

→

Shooting Game
Developer User9966｜Date and time 23/10/17 15:46:21
Build time 154.441 sec｜Game capacity 4.557KB｜

Script

Sure! Here's a simple shooting game implemented as a single HTML file:

To play the game, open the HTML file in any web browser that supports JavaScript, preferably on a smartphone. The player can move the blue square horizontally by dragging on the screen or moving the mouse. Tap or click on the screen to shoot red bullets. The objective is to shoot green enemies and avoid collisions with them. The score increases for every successful hit. The game is over if an enemy reaches the bottom or the player collides with an enemy. Note: You can further enhance the game features, graphics, and gameplay mechanics as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple shooting game implemented as a single HTML file:

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

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      player = { x: canvas.width / 2, y: canvas.height - 50, width: 20, height: 20 };
      bullets = [];
      enemies = [];
      enemySpeed = 1;
      enemySpawnInterval = 2000; // Spawns an enemy every 2 seconds
      score = 0;
      isGameOver = false;

// Event listeners for player movement
      canvas.addEventListener("touchmove", handleMove);
      canvas.addEventListener("mousemove", handleMove);

setInterval(update, 16);
      setInterval(spawnEnemy, enemySpawnInterval);
    }

// Handle player movement
    function handleMove(event) {
      var rect = canvas.getBoundingClientRect();
      var touchX = event.clientX - rect.left;
      player.x = touchX - player.width / 2;
    }

// Handle shooting
    function handleShoot() {
      if (isGameOver) {
        return;
      }

var bullet = { x: player.x + player.width / 2, y: player.y, width: 2, height: 10 };
      bullets.push(bullet);
    }

// Spawn a new enemy
    function spawnEnemy() {
      if (isGameOver) {
        return;
      }

var enemy = { x: Math.random() * (canvas.width - 20), y: 0, width: 20, height: 20 };
      enemies.push(enemy);
    }

// Update game state
    function update() {
      if (isGameOver) {
        return;
      }

context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      context.fillStyle = "blue";
      context.fillRect(player.x, player.y, player.width, player.height);

// Draw bullets
      context.fillStyle = "red";
      bullets.forEach(function(bullet) {
        context.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
        bullet.y -= 5; // Move bullet upwards
      });

// Draw enemies
      context.fillStyle = "green";
      enemies.forEach(function(enemy) {
        context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        enemy.y += enemySpeed; // Move enemy downwards

// Check for bullet-enemy collision
        bullets.forEach(function(bullet, bulletIndex) {
          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
          ) {
            // Remove collided bullet and enemy
            bullets.splice(bulletIndex, 1);
            enemies.splice(enemies.indexOf(enemy), 1);

score += 10; // Increase score
          }
        });

// Check for player-enemy collision
        if (
          player.x < enemy.x + enemy.width &&
          player.x + player.width > enemy.x &&
          player.y < enemy.y + enemy.height &&
          player.y + player.height > enemy.y
        ) {
          gameOver(); // Game over if player and enemy collide
        }

// Check if enemy reaches bottom
        if (enemy.y > canvas.height) {
          gameOver(); // Game over if enemy reaches bottom
        }
      });

// Draw score
      context.fillStyle = "black";
      context.font = "24px Arial";
      context.fillText("Score: " + score, 10, 30);
    }

// Game over logic
    function gameOver() {
      isGameOver = true;
      alert("Game Over!\nScore: " + score);
      location.reload(); // Reload the page to restart the game
    }

// Start the game
    window.onload = init;
  </script>
</body>
</html>
```

Note: You can further enhance the game features, graphics, and gameplay mechanics as per your requirements.