AI game creator

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

No:48914

←

Prev Next

→

Shooting Game
Developer User20878｜Date and time 24/3/3 7:43:50
Build time 9.476 sec｜Game capacity 2.332KB｜

Script

This code snippet creates a simple shooting game using the HTML5 canvas element and JavaScript. Players control a blue square as the shooter, aiming to hit the red square enemies by firing green bullets (spacebar key). The game ends when all the enemies are eliminated. The game loop continuously updates and renders the game elements on the canvas.

←

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>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

let playerX = 200;
    let playerY = 380;
    let bulletX = -10;
    let bulletY = -10;
    let enemies = [
      { x: 50, y: 50 },
      { x: 150, y: 50 },
      { x: 250, y: 50 }
    ];

function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, playerY, 20, 20);
    }

function drawBullet() {
      ctx.fillStyle = 'green';
      ctx.fillRect(bulletX, bulletY, 5, 10);
    }

function drawEnemy(enemy) {
      ctx.fillStyle = 'red';
      ctx.fillRect(enemy.x, enemy.y, 20, 20);
    }

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

drawPlayer();
      drawBullet();
      enemies.forEach(drawEnemy);
    }

function update() {
      bulletY -= 5;

if (bulletY < 0) {
        bulletX = -10;
        bulletY = -10;
      }

enemies.forEach((enemy, index) => {
        if (bulletX > enemy.x && bulletX < enemy.x + 20 && bulletY > enemy.y && bulletY < enemy.y + 20) {
          enemies.splice(index, 1);
          bulletX = -10;
          bulletY = -10;
        }
      });
    }

function gameOver() {
      if (enemies.length === 0) {
        alert('You win!');
        document.location.reload();
      }
    }

function loop() {
      draw();
      update();
      gameOver();
      requestAnimationFrame(loop);
    }

loop();
  </script>
</body>
</html>
```
This code snippet creates a simple shooting game using the HTML5 canvas element and JavaScript. Players control a blue square as the shooter, aiming to hit the red square enemies by firing green bullets (spacebar key). The game ends when all the enemies are eliminated. The game loop continuously updates and renders the game elements on the canvas.