AI game creator

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

No:52286

107

←

Prev Next

→

Shooting Game
Developer Winnerweiner2113｜Date and time 24/3/20 7:06:35
Build time 12.988 sec｜Game capacity 3.052KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      width: 20,
      height: 20,
      speed: 3
    };

const bullets = [];
    const bulletSpeed = 5;

const enemies = [];
    const enemySpeed = 1;

const ENEMY_WIDTH = 20;
    const ENEMY_HEIGHT = 20;

const KEY_LEFT = 37;
    const KEY_RIGHT = 39;
    const KEY_SPACE = 32;

let leftPressed = false;
    let rightPressed = false;

function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawBullet(bullet) {
      ctx.fillStyle = 'red';
      ctx.fillRect(bullet.x, bullet.y, 5, 10);
    }

function drawEnemies() {
      ctx.fillStyle = 'green';
      enemies.forEach(enemy => {
        ctx.fillRect(enemy.x, enemy.y, ENEMY_WIDTH, ENEMY_HEIGHT);
      });
    }

function movePlayer() {
      if (leftPressed) {
        player.x -= player.speed;
      }
      if (rightPressed) {
        player.x += player.speed;
      }

if (player.x < 0) {
        player.x = 0;
      }
      if (player.x + player.width > canvas.width) {
        player.x = canvas.width - player.width;
      }
    }

function shoot() {
      bullets.push({ x: player.x + player.width / 2, y: player.y });
    }

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

movePlayer();
      drawPlayer();

moveBullets();
      bullets.forEach(bullet => {
        drawBullet(bullet);
      });

moveEnemies();
      drawEnemies();

requestAnimationFrame(draw);
    }

document.addEventListener('keyup', e => {
      if (e.keyCode === KEY_LEFT) {
        leftPressed = false;
      }
      if (e.keyCode === KEY_RIGHT) {
        rightPressed = false;
      }
    });

draw();

</script>
</body>
</html>
```