AI game creator

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

No:49332

←

Prev Next

→

Shooting Game
Developer User20887｜Date and time 24/3/4 19:12:31
Build time 8.511 sec｜Game capacity 1.607KB｜

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>
canvas {
  border: 2px solid black;
  display: block;
  margin: 0 auto;
}
</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 - 30;

let bulletX = playerX;
let bulletY = playerY;

let bulletSpeed = 5;
let bulletFired = false;

const drawPlayer = () => {
  ctx.beginPath();
  ctx.rect(playerX, playerY, 30, 30);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

const drawBullet = () => {
  if (bulletFired) {
    ctx.beginPath();
    ctx.arc(bulletX, bulletY, 5, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
  }
}

const moveBullet = () => {
  if (bulletFired) {
    bulletY -= bulletSpeed;
    if (bulletY < 0) {
      bulletFired = false;
    }
  }
}

const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawPlayer();
  drawBullet();
  moveBullet();

requestAnimationFrame(draw);
}

document.addEventListener("keydown", keyDownHandler);

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