AI game creator

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

No:10253

167

←

Prev Next

→

Shooting Game
Developer User4504｜Date and time 23/7/29 16:42:22
Build time 22.796 sec｜Game capacity 3.962KB｜

Script

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

This game features a simple shooting mechanic where the player can move horizontally using the left and right arrow keys and shoot bullets by pressing the spacebar. The goal is to shoot down the enemies before they reach the bottom of the screen. If an enemy collides with the player, the game is over. The game is enclosed in the script tags and implemented using the HTML5 canvas element along with JavaScript for game logic and rendering. Pictograms can be added to the game by replacing the player and enemy shapes with image assets.

←

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>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

const player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      width: 20,
      height: 20,
      speed: 5,
      color: '#0095DD',
    };

let bullets = [];
    let enemies = [];

function createBullet() {
      bullets.push({
        x: player.x + player.width / 2,
        y: player.y,
        radius: 4,
        speed: 4,
      });
    }

function createEnemy() {
      enemies.push({
        x: Math.random() * (canvas.width - 20),
        y: 0,
        width: 20,
        height: 20,
        speed: Math.random() * 2 + 1,
        color: '#FF0000',
      });
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

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

// Draw bullets
      context.fillStyle = '#00FF00';
      bullets.forEach(bullet => {
        context.beginPath();
        context.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
        context.closePath();
        context.fill();
      });

// Draw enemies
      enemies.forEach(enemy => {
        context.fillStyle = enemy.color;
        context.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
      });
    }

// Move bullets
      bullets.forEach(bullet => {
        bullet.y -= bullet.speed;
      });

// Move enemies
      enemies.forEach(enemy => {
        enemy.y += enemy.speed;
      });

// Remove bullets that go off-screen
      bullets = bullets.filter(bullet => bullet.y > 0);

// Remove enemies that go off-screen
      enemies = enemies.filter(enemy => enemy.y < canvas.height);

// Check collision between bullets and enemies
      bullets.forEach(bullet => {
        enemies.forEach(enemy => {
          if (
            bullet.x < enemy.x + enemy.width &&
            bullet.x + bullet.radius > enemy.x &&
            bullet.y < enemy.y + enemy.height &&
            bullet.y + bullet.radius > enemy.y
          ) {
            bullets = bullets.filter(b => b !== bullet);
            enemies = enemies.filter(e => e !== enemy);
          }
        });
      });

// Check collision between player and enemies
      enemies.forEach(enemy => {
        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
        ) {
          alert('Game Over!');
          location.reload();
        }
      });

draw();
      requestAnimationFrame(update);
    }

function startGame() {
      setInterval(createEnemy, 1000);
      update();
    }

startGame();
  </script>
</body>
</html>
```

The game is enclosed in the script tags and implemented using the HTML5 canvas element along with JavaScript for game logic and rendering. Pictograms can be added to the game by replacing the player and enemy shapes with image assets.