AI game creator

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

No:52311

←

Prev Next

→

Shooter game
Developer User21839｜Date and time 24/3/20 12:49:54
Build time 11.606 sec｜Game capacity 2.772KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Shooter Game</title>
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

canvas {
    display: block;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');

const player = {
    x: canvas.width / 2,
    y: canvas.height - 50,
    width: 50,
    height: 50,
    speed: 5
  };

const bullets = [];
  const enemies = [];

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

function drawBullets() {
    ctx.fillStyle = 'red';
    bullets.forEach(bullet => {
      ctx.fillRect(bullet.x, bullet.y, 5, 15);
    });
  }

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

function updateBullets() {
    bullets.forEach(bullet => {
      bullet.y -= 5;
    });

bullets.forEach((bullet, bulletIndex) => {
      enemies.forEach((enemy, enemyIndex) => {
        if (bullet.x < enemy.x + 50 &&
            bullet.x + 5 > enemy.x &&
            bullet.y < enemy.y + 50 &&
            bullet.y + 15 > enemy.y) {
          bullets.splice(bulletIndex, 1);
          enemies.splice(enemyIndex, 1);
        }
      });
    });
  }

function updateEnemies() {
    if (Math.random() < 0.03) {
      enemies.push({
        x: Math.random() * (canvas.width - 50),
        y: 0,
        speed: Math.random() * 2 + 1
      });
    }

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

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

drawPlayer();
    drawBullets();
    drawEnemies();
  }

function update() {
    updatePlayer();
    updateBullets();
    updateEnemies();
  }

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

const keys = {};

window.addEventListener('keydown', e => {
    keys[e.key] = true;
  });

window.addEventListener('keyup', e => {
    keys[e.key] = false;
  });

window.addEventListener('keydown', e => {
    if (e.key === ' ') {
      bullets.push({
        x: player.x + player.width / 2,
        y: player.y
      });
    }
  });

loop();
</script>
</body>
</html>