AI game creator

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

No:15685

←

Prev Next

→

Shooting games
Developer User6825｜Date and time 23/9/10 20:23:09
Build time 33.187 sec｜Game capacity 4.083KB｜

Script

Sure! Here's an example of a simple shooting game implemented in a single HTML file using JavaScript and enclosed in script tags:

This game involves controlling a player with arrow keys and shooting bullets with the spacebar to destroy enemies. The goal is to prevent any enemies from reaching the bottom of the canvas. Each bullet that collides with an enemy will remove both from the game. The game will end if any enemy reaches the bottom. The player can move left and right within the canvas boundaries.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple shooting game implemented in a single HTML file using JavaScript and enclosed in script tags:

```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="400"></canvas>

// Player
      const player = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        width: 20,
        height: 20,
        color: "blue",
        speed: 5,
      };

// Bullets
      const bullets = [];
      const bulletSpeed = 8;

// Enemies
      const enemies = [];
      const enemySpeed = 1;

// Event listeners for player movement
      window.addEventListener("keydown", handleKeyDown);
      window.addEventListener("keyup", handleKeyUp);

function handleKeyUp(event) {
        if (event.key === "ArrowLeft") {
          player.moveLeft = false;
        } else if (event.key === "ArrowRight") {
          player.moveRight = false;
        }
      }

function update() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Move player
        if (player.moveLeft && player.x > 0) {
          player.x -= player.speed;
        } else if (player.moveRight && player.x < canvas.width - player.width) {
          player.x += player.speed;
        }

// Draw player
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.width, player.height);

// Move and draw bullets
        bullets.forEach((bullet) => {
          bullet.y -= bulletSpeed;
          ctx.fillStyle = bullet.color;
          ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
        });

// Move and draw enemies
        enemies.forEach((enemy) => {
          enemy.y += enemySpeed;
          ctx.fillStyle = enemy.color;
          ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);

// Collision detection
          bullets.forEach((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 bullet and enemy on collision
              bullets.splice(bulletIndex, 1);
              enemies.splice(enemies.indexOf(enemy), 1);
            }
          });

// Game over if any enemy reaches the bottom
          if (enemy.y >= canvas.height) {
            alert("Game Over!");
            location.reload(); // Reset the game
          }
        });

requestAnimationFrame(update);
      }

// Initial enemy spawn
      setInterval(() => {
        const enemy = {
          x: Math.random() * (canvas.width - 20),
          y: 0,
          width: 20,
          height: 20,
          color: "green",
        };
        enemies.push(enemy);
      }, 1000);

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