AI game creator

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

No:41043

←

Prev Next

→

Shooting Game
Developer User18409｜Date and time 24/2/5 12:10:10
Build time 11.247 sec｜Game capacity 2.89KB｜

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>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    // Variables
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var player = { x: canvas.width/2, y: canvas.height-30 };
    var enemy = { x: canvas.width/2, y: 30 };
    var bullet = { x: -10, y: -10 };
    var isBulletVisible = false;
    var score = 0;

// Functions
    function drawPlayer() {
      ctx.beginPath();
      ctx.rect(player.x-15, player.y-15, 30, 30);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
    }

function drawEnemy() {
      ctx.beginPath();
      ctx.rect(enemy.x-10, enemy.y-10, 20, 20);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }

function drawBullet() {
      ctx.beginPath();
      ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI*2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
    }

function collisionDetection() {
      var dx = bullet.x - enemy.x;
      var dy = bullet.y - enemy.y;
      var distance = Math.sqrt(dx*dx + dy*dy);
      if (distance < 15) {
        score++;
        resetBullet();
        resetEnemy();
      }
    }

function resetBullet() {
      bullet.x = -10;
      bullet.y = -10;
      isBulletVisible = false;
    }

function resetEnemy() {
      enemy.x = Math.random() * (canvas.width-40) + 20;
      enemy.y = 30;
    }

function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 8, 20);
    }

function shoot() {
      if (!isBulletVisible) {
        bullet.x = player.x;
        bullet.y = player.y;
        isBulletVisible = true;
      }
    }

function moveLeft() {
      if (player.x > 15) {
        player.x -= 10;
      }
    }

function moveRight() {
      if (player.x < canvas.width-15) {
        player.x += 10;
      }
    }

// Event Listeners
    document.addEventListener("keydown", function(event) {
      switch(event.key) {
        case "ArrowLeft":
          moveLeft();
          break;
        case "ArrowRight":
          moveRight();
          break;
        case " ":
          shoot();
          break;
      }
    });

// Start the game
    draw();
  </script>
</body>
</html>