AI game creator

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

No:32034

←

Prev Next

→

A shooter game
Developer User15309｜Date and time 23/12/29 10:41:23
Build time 32.245 sec｜Game capacity 3.581KB｜

Script

Sure, here's a simple shooter game implemented as a single HTML file using JavaScript:

Please note that this is just a basic implementation and can be further enhanced and customized as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure, here's a simple shooter game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shooter Game</title>
  <style>
    #gameCanvas {
      border: 1px solid black;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Define the player's position and size
    const playerSize = 50;
    let playerX = canvas.width / 2 - playerSize / 2;
    let playerY = canvas.height - playerSize;

// Define the bullet's position and size
    const bulletSize = 10;
    let bulletX = playerX + playerSize / 2 - bulletSize / 2;
    let bulletY = playerY - bulletSize;

// Define the enemy's position and size
    const enemySize = 30;
    let enemyX = Math.random() * (canvas.width - enemySize);
    let enemyY = 0;

// Define a variable to track the game's score
    let score = 0;

// Function to draw the game elements on the canvas
    function draw() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
      ctx.fillStyle = 'blue';
      ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw the bullet
      ctx.fillStyle = 'red';
      ctx.fillRect(bulletX, bulletY, bulletSize, bulletSize);

// Draw the enemy
      ctx.fillStyle = 'green';
      ctx.fillRect(enemyX, enemyY, enemySize, enemySize);

// Display the score
      ctx.fillStyle = 'black';
      ctx.font = '16px Arial';
      ctx.fillText('Score: ' + score, 10, 20);
    }

// Function to update the game state
    function update() {
      // Move the enemy downwards
      enemyY += 2;

// Check for collision between the bullet and the enemy
      if (bulletX >= enemyX && bulletX + bulletSize <= enemyX + enemySize && bulletY <= enemyY + enemySize) {
        // Increase the score
        score += 10;

// Reset the bullet position
        bulletX = playerX + playerSize / 2 - bulletSize / 2;
        bulletY = playerY - bulletSize;

// Reset the enemy position
        enemyX = Math.random() * (canvas.width - enemySize);
        enemyY = 0;
      }

// Move the bullet upwards
      bulletY -= 5;

// Check for collision between the player and the enemy
      if (playerX <= enemyX + enemySize && playerX + playerSize >= enemyX && playerY <= enemyY + enemySize && playerY + playerSize >= enemyY) {
        // Game over
        alert('Game Over! Final Score: ' + score);
        document.location.reload();
      }
    }

// Function to handle player's touch event
    function touchHandler(e) {
      const touchX = e.touches[0].clientX;

if (touchX < canvas.width / 2) {
        // Move player left
        if (playerX > 0) {
          playerX -= 10;
          bulletX -= 10;
        }
      } else {
        // Move player right
        if (playerX + playerSize < canvas.width) {
          playerX += 10;
          bulletX += 10;
        }
      }
    }

// Register touch event listener
    canvas.addEventListener('touchstart', touchHandler);

// Main game loop
    function gameLoop() {
      draw();
      update();
      requestAnimationFrame(gameLoop);
    }

// Start the game loop
    gameLoop();
  </script>
</body>
</html>
```

Please note that this is just a basic implementation and can be further enhanced and customized as per your requirements.