AI game creator

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

No:12917

←

Prev Next

→

Shooter
Developer User5628｜Date and time 23/8/25 4:03:02
Build time 30.579 sec｜Game capacity 3.92KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      canvas {
        background: black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Set canvas dimensions to match device screen size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Player variables
      let playerX = canvas.width / 2;
      let playerY = canvas.height - 100;
      const playerSize = 50;
      const playerSpeed = 10;

// Bullet variables
      let bullets = [];
      const bulletWidth = 8;
      const bulletHeight = 15;
      const bulletSpeed = 8;

// Enemy variables
      let enemies = [];
      const enemySize = 60;
      const enemySpeed = 3;

// Score variable
      let score = 0;

// Function to create enemies at random positions
      function createEnemy() {
        const enemy = {
          x: Math.random() * (canvas.width - enemySize),
          y: 0,
        };
        enemies.push(enemy);
      }

// Event listener to move the player on touch
      canvas.addEventListener("touchmove", (e) => {
        const touchX = e.touches[0].clientX;
        const touchY = e.touches[0].clientY;
        playerX = touchX - playerSize / 2;
        playerY = touchY - playerSize / 2;
      });

// Function to handle bullet-enemy collisions
      function detectCollisions() {
        for (let i = 0; i < bullets.length; i++) {
          const bullet = bullets[i];

for (let j = 0; j < enemies.length; j++) {
            const enemy = enemies[j];

if (
              bullet.x < enemy.x + enemySize &&
              bullet.x + bulletWidth > enemy.x &&
              bullet.y < enemy.y + enemySize &&
              bullet.y + bulletHeight > enemy.y
            ) {
              // Collision detected
              bullets.splice(i, 1);
              enemies.splice(j, 1);
              score++;
              break;
            }
          }
        }
      }

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

// Draw player
        context.fillStyle = "white";
        context.fillRect(playerX, playerY, playerSize, playerSize);

// Draw bullets
        for (let i = 0; i < bullets.length; i++) {
          const bullet = bullets[i];
          context.fillStyle = "red";
          context.fillRect(bullet.x, bullet.y, bulletWidth, bulletHeight);
          bullet.y -= bulletSpeed;

if (bullet.y < 0) {
            // Remove bullets out of screen
            bullets.splice(i, 1);
          }
        }

// Draw enemies
        for (let i = 0; i < enemies.length; i++) {
          const enemy = enemies[i];
          context.fillStyle = "blue";
          context.fillRect(enemy.x, enemy.y, enemySize, enemySize);
          enemy.y += enemySpeed;

if (enemy.y > canvas.height) {
            // Remove enemies that reach the bottom
            enemies.splice(i, 1);
          }
        }

// Detect collisions
        detectCollisions();

// Draw score
        context.fillStyle = "white";
        context.font = "20px Arial";
        context.fillText("Score: " + score, 10, 30);

requestAnimationFrame(update);
      }

// Function to shoot bullets on touch
      function shootBullet() {
        const bullet = {
          x: playerX + playerSize / 2,
          y: playerY - bulletHeight,
        };
        bullets.push(bullet);
      }

// Event listener to shoot bullets on touch
      canvas.addEventListener("touchstart", shootBullet);

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