Shooting Game's game | AI game creator

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

No:51472

262

Shooting Game
Developer User21534｜Date and time 24/3/12 11:43:51
Build time 6.312 sec｜Game capacity 1.724KB｜

→ 　

0　

0　

　

　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    body {
      text-align: center;
    }
    canvas {
      border: 1px 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;
    const playerY = canvas.height - 30;
    let playerWidth = 20;
    const playerHeight = 20;
    
    let bulletX;
    let bulletY;
    const bulletWidth = 5;
    const bulletHeight = 10;
    
    let bulletSpeed = 5;
    let bulletFired = false;
    
    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowLeft' && playerX > 0) {
        playerX -= 5;
      } else if (event.key === 'ArrowRight' && playerX < canvas.width - playerWidth) {
        playerX += 5;
      } else if (event.key === ' ' && !bulletFired) {
        bulletX = playerX + playerWidth / 2 - bulletWidth / 2;
        bulletY = playerY;
        bulletFired = true;
      }
    });

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

function drawBullet() {
      if (bulletFired) {
        ctx.fillStyle = 'red';
        ctx.fillRect(bulletX, bulletY, bulletWidth, bulletHeight);
        
        bulletY -= bulletSpeed;
        
        if (bulletY < 0) {
          bulletFired = false;
        }
      }
    }

function drawGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawPlayer();
      drawBullet();
      
      requestAnimationFrame(drawGame);
    }

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