AI game creator

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

No:43387

←

Prev Next

→

Shooting Game
Developer User19184｜Date and time 24/2/15 12:41:30
Build time 13.65 sec｜Game capacity 4.623KB｜

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="gameCanvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

const bulletImage = new Image();
      bulletImage.src = 'bullet.png';
      
      const enemyImage = new Image();
      enemyImage.src = 'enemy.png';

const playerImage = new Image();
      playerImage.src = 'player.png';

let player = {
        x: canvas.width / 2 - 25,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        speed: 6,
      };

let bullets = [];

let enemies = [];

let score = 0;

function drawPlayer() {
        ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);
      }

function drawBullets() {
        bullets.forEach((bullet) => {
          ctx.drawImage(bulletImage, bullet.x, bullet.y, bullet.width, bullet.height);
        });
      }

function drawEnemies() {
        enemies.forEach((enemy) => {
          ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
        });
      }

function updatePosition() {
        bullets.forEach((bullet, bulletIndex) => {
          bullet.y -= bullet.speed;
          if (bullet.y < 0) {
            bullets.splice(bulletIndex, 1);
          }
        });

enemies.forEach((enemy) => {
          enemy.y += enemy.speed;
          if (enemy.y > canvas.height) {
            endGame();
          }

if (
            enemy.x < player.x + player.width &&
            enemy.x + enemy.width > player.x &&
            enemy.y < player.y + player.height &&
            enemy.y + enemy.height > player.y
          ) {
            endGame();
          }

bullets.forEach((bullet, bulletIndex) => {
            if (
              enemy.x < bullet.x + bullet.width &&
              enemy.x + enemy.width > bullet.x &&
              enemy.y < bullet.y + bullet.height &&
              enemy.y + enemy.height > bullet.y
            ) {
              bullets.splice(bulletIndex, 1);
              enemies.splice(enemies.indexOf(enemy), 1);
              score++;
            }
          });
        });
      }

function drawScore() {
        ctx.font = '24px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText('Score: ' + score, 10, 30);
      }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawBullets();
        drawEnemies();
        drawScore();
      }

function endGame() {
        clearInterval();
        alert('Game Over! Your score: ' + score);
        startGame();
      }

function spawnEnemies() {
        const enemyWidth = 50;
        const enemyHeight = 50;
        const enemyX = Math.random() * (canvas.width - enemyWidth);
        const enemyY = -enemyHeight;

const enemy = {
          x: enemyX,
          y: enemyY,
          width: enemyWidth,
          height: enemyHeight,
          speed: 3,
        };

enemies.push(enemy);
      }

setInterval(() => {
        shoot();
      }, 200);

function shoot() {
        const bulletWidth = 10;
        const bulletHeight = 30;
        const bulletX = player.x + player.width / 2 - bulletWidth / 2;
        const bulletY = player.y - bulletHeight;

const bullet = {
          x: bulletX,
          y: bulletY,
          width: bulletWidth,
          height: bulletHeight,
          speed: 10,
        };

bullets.push(bullet);
      }

document.addEventListener('keydown', (event) => {
        switch (event.keyCode) {
          case 37:
            if (player.x - player.speed >= 0)
              player.x -= player.speed;
            break;
          case 39:
            if (player.x + player.speed <= canvas.width - player.width)
              player.x += player.speed;
            break;
          default:
            break;
        }
      });

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