AI game creator

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

No:26271

←

Prev Next

→

Shooting Game
Developer User12962｜Date and time 23/11/28 10:23:44
Build time 93.517 sec｜Game capacity 4.281KB｜

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

// Player properties
      var player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        size: 20,
      };

// Projectile properties
      var projectiles = [];
      var projectileSize = 5;
      var projectileSpeed = 5;

// Enemies properties
      var enemies = [];
      var enemySize = 20;
      var enemySpeed = 2;
      var enemySpawnRate = 1000; // in milliseconds

// Counter to keep track of score
      var score = 0;

// Event listener to move the player using touch
      canvas.addEventListener('touchmove', function (event) {
        var touchX = event.touches[0].clientX;
        var touchY = event.touches[0].clientY;

player.x = touchX;
        player.y = touchY;
      });

// Function to draw the player
      function drawPlayer() {
        context.beginPath();
        context.arc(player.x, player.y, player.size, 0, Math.PI * 2, false);
        context.fillStyle = '#33a';
        context.fill();
        context.closePath();
      }

// Function to draw projectiles
      function drawProjectiles() {
        projectiles.forEach(function (projectile) {
          context.beginPath();
          context.arc(projectile.x, projectile.y, projectileSize, 0, Math.PI * 2, false);
          context.fillStyle = '#f00';
          context.fill();
          context.closePath();
        });
      }

// Function to move projectiles
      function moveProjectiles() {
        projectiles.forEach(function (projectile) {
          projectile.y -= projectileSpeed;
        });

// Remove projectiles that went out of the canvas
        projectiles = projectiles.filter(function (projectile) {
          return projectile.y > 0;
        });
      }

// Function to draw enemies
      function drawEnemies() {
        enemies.forEach(function (enemy) {
          context.beginPath();
          context.arc(enemy.x, enemy.y, enemySize, 0, Math.PI * 2, false);
          context.fillStyle = '#777';
          context.fill();
          context.closePath();
        });
      }

// Function to move enemies
      function moveEnemies() {
        enemies.forEach(function (enemy) {
          enemy.y += enemySpeed;
        });

// Remove enemies that went out of the canvas
        enemies = enemies.filter(function (enemy) {
          return enemy.y < canvas.height;
        });
      }

// Function to check collision between projectiles and enemies
      function checkCollision() {
        projectiles.forEach(function (projectile) {
          enemies.forEach(function (enemy, index) {
            var distance = Math.sqrt(
              Math.pow(projectile.x - enemy.x, 2) + Math.pow(projectile.y - enemy.y, 2)
            );

if (distance < enemySize + projectileSize) {
              // Collision detected, remove enemy and projectile
              enemies.splice(index, 1);
              projectiles.splice(projectiles.indexOf(projectile), 1);

// Increase score
              score++;
            }
          });
        });
      }

// Function to update the canvas
      function update() {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
        drawProjectiles();
        drawEnemies();

moveProjectiles();
        moveEnemies();

checkCollision();

// Display the current score
        context.font = '24px Arial';
        context.fillStyle = '#000';
        context.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(update);
      }

// Function to spawn enemies
      function spawnEnemies() {
        var enemyX = Math.random() * canvas.width;
        var enemyY = 0;

enemies.push({
          x: enemyX,
          y: enemyY,
        });

setTimeout(spawnEnemies, enemySpawnRate);
      }

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