AI game creator

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

No:39598

←

Prev Next

→

Shooting Game
Developer User17713｜Date and time 24/1/29 9:03:58
Build time 24.159 sec｜Game capacity 5.968KB｜

Script

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

This game sets up a canvas element where the gameplay takes place. The player can move left and right using arrow keys, and shoot bullets by pressing the spacebar. The goal is to shoot down the green enemies without colliding with them. The game keeps track of the score, and when an enemy reaches the bottom of the canvas or the player collides with an enemy, the game ends and the final score is displayed. Please note that this is a basic example and can be further improved and customized according to your preferences.

←

Prev　Next

→ 　

Back　

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

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

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

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

// Player object
    class Player {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radius = 15;
        this.dx = 0;
        this.dy = 0;
        this.speed = 5;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "blue";
        ctx.fill();
        ctx.closePath();
      }

update() {
        this.x += this.dx;
        this.y += this.dy;

// Check canvas bounds
        if (this.x - this.radius < 0) {
          this.x = this.radius;
        }
        if (this.x + this.radius > canvas.width) {
          this.x = canvas.width - this.radius;
        }
        if (this.y - this.radius < 0) {
          this.y = this.radius;
        }
        if (this.y + this.radius > canvas.height) {
          this.y = canvas.height - this.radius;
        }
      }
    }

// Bullet object
    class Bullet {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radius = 5;
        this.dy = -5;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }

update() {
        this.y += this.dy;
        if (this.y + this.radius < 0) {
          bullets.splice(bullets.indexOf(this), 1);
        }
      }
    }

// Enemy object
    class Enemy {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radius = 10;
        this.dy = 2;
        this.dx = Math.random() < 0.5 ? -2 : 2;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.closePath();
      }

update() {
        this.y += this.dy;
        this.x += this.dx;

// Check canvas bounds
        if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
          this.dx = -this.dx;
        }

if (this.y + this.radius > canvas.height) {
          // Game over
          isGameOver = true;
          cancelAnimationFrame(animationFrame);
        }
      }
    }

// Initialize game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

player = new Player(canvas.width / 2, canvas.height - 30);
      bullets = [];
      enemies = [];
      score = 0;
      isGameOver = false;

// Add key listeners for player movement
      document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);

// Start game loop
      animationFrame = requestAnimationFrame(gameLoop);
    }

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

player.update();
      player.draw();

for (let i = 0; i < bullets.length; i++) {
        bullets[i].update();
        bullets[i].draw();
      }

if (Math.random() < 0.01) {
        const enemy = new Enemy(Math.random() * canvas.width, 0);
        enemies.push(enemy);
      }

for (let i = 0; i < enemies.length; i++) {
        enemies[i].update();
        enemies[i].draw();

// Check collision between bullet and enemy
        for (let j = 0; j < bullets.length; j++) {
          const dx = enemies[i].x - bullets[j].x;
          const dy = enemies[i].y - bullets[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < enemies[i].radius + bullets[j].radius) {
            score += 10;
            bullets.splice(j, 1);
            enemies.splice(i, 1);
            break;
          }
        }

// Check collision between player and enemy
        const dx = enemies[i].x - player.x;
        const dy = enemies[i].y - player.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < enemies[i].radius + player.radius) {
          isGameOver = true;
          cancelAnimationFrame(animationFrame);
        }
      }

if (!isGameOver) {
        animationFrame = requestAnimationFrame(gameLoop);
      } else {
        // Game over state
        ctx.font = "30px Arial";
        ctx.fillStyle = "black";
        ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
        ctx.fillText("Score: " + score, canvas.width / 2 - 55, canvas.height / 2 + 30);
      }
    }

// Key handlers for player movement
    function keyDownHandler(event) {
      if (event.key === "ArrowLeft") {
        player.dx = -player.speed;
      } else if (event.key === "ArrowRight") {
        player.dx = player.speed;
      } else if (event.key === " ") {
        const bullet = new Bullet(player.x, player.y);
        bullets.push(bullet);
      }
    }

function keyUpHandler(event) {
      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
        player.dx = 0;
      }
    }

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

Please note that this is a basic example and can be further improved and customized according to your preferences.