AI game creator

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

No:52756

260

←

Prev Next

→

Shooting Game
Developer User22126｜Date and time 24/3/24 14:04:15
Build time 7.973 sec｜Game capacity 1.964KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Game</title>
<style>
  body {
    background-color: #f0f0f0;
    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');

let playerX = canvas.width / 2;
  let playerY = canvas.height / 2;
  let playerRadius = 15;

let mouseX = playerX;
  let mouseY = playerY;

let bullets = [];

canvas.addEventListener('mousemove', (e) => {
    mouseX = e.clientX - canvas.offsetLeft;
    mouseY = e.clientY - canvas.offsetTop;
  });

canvas.addEventListener("click", () => {
    bullets.push({ x: playerX, y: playerY, speedX: (mouseX - playerX) / 10, speedY: (mouseY - playerY) / 10 });
  });

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

// Update player position
    playerX += (mouseX - playerX) / 20;
    playerY += (mouseY - playerY) / 20;

// Draw player
    ctx.beginPath();
    ctx.arc(playerX, playerY, playerRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();

// Update bullets position and draw them
    bullets.forEach((bullet, index) => {
      bullet.x += bullet.speedX;
      bullet.y += bullet.speedY;

ctx.beginPath();
      ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI * 2);
      ctx.fillStyle = "#FF0000";
      ctx.fill();
      ctx.closePath();

// Remove bullets that are outside the canvas
      if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
        bullets.splice(index, 1);
      }
    });

requestAnimationFrame(update);
  }

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