AI game creator

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

No:35155

141

←

Prev Next

→

Shooting Game
Developer User16442｜Date and time 24/1/13 12:59:19
Build time 14.529 sec｜Game capacity 4.068KB｜

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>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const playerSize = 40;
      const bulletSize = 10;
      const enemySize = 30;

let playerX = (canvas.width - playerSize) / 2;
      let playerY = canvas.height - playerSize - 10;
      let isPlayerMovingLeft = false;
      let isPlayerMovingRight = false;

let bullets = [];
      let enemies = [];
      let score = 0;
      
      function drawPlayer() {
        ctx.beginPath();
        ctx.rect(playerX, playerY, playerSize, playerSize);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.closePath();
      }

function drawBullets() {
        for (let i = 0; i < bullets.length; i++) {
          ctx.beginPath();
          ctx.arc(bullets[i].x, bullets[i].y, bulletSize, 0, Math.PI * 2);
          ctx.fillStyle = "#f00";
          ctx.fill();
          ctx.closePath();
        }
      }

function drawEnemies() {
        for (let i = 0; i < enemies.length; i++) {
          ctx.beginPath();
          ctx.rect(enemies[i].x, enemies[i].y, enemySize, enemySize);
          ctx.fillStyle = "#00f";
          ctx.fill();
          ctx.closePath();
        }
      }

function movePlayer() {
        if (isPlayerMovingLeft && playerX > 0) {
          playerX -= 5;
        } else if (isPlayerMovingRight && playerX < canvas.width - playerSize) {
          playerX += 5;
        }
      }

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

drawPlayer();
        drawBullets();
        drawEnemies();
        drawScore();
        
        movePlayer();
        moveBullets();
        moveEnemies();
        
        handleCollisions();

requestAnimationFrame(draw);
      }

function keyDownHandler(event) {
        if (event.key === "Left" || event.key === "ArrowLeft") {
          isPlayerMovingLeft = true;
        } else if (event.key === "Right" || event.key === "ArrowRight") {
          isPlayerMovingRight = true;
        }
      }

function keyUpHandler(event) {
        if (event.key === "Left" || event.key === "ArrowLeft") {
          isPlayerMovingLeft = false;
        } else if (event.key === "Right" || event.key === "ArrowRight") {
          isPlayerMovingRight = false;
        }
      }

function clickHandler(event) {
        const bulletX = playerX + playerSize / 2;
        const bulletY = playerY;
        bullets.push({ x: bulletX, y: bulletY });
      }

document.addEventListener("keydown", keyDownHandler);
      document.addEventListener("keyup", keyUpHandler);
      document.addEventListener("click", clickHandler);

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