AI game creator

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

No:35224

←

Prev Next

→

Shooting Game
Developer ZAPSTRON｜Date and time 24/1/13 16:46:06
Build time 14.423 sec｜Game capacity 4.226KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript. Please copy the code and save it as an HTML file to play the game:

This game allows you to control a blue square (representing the player) using the left and right arrow keys on your smartphone. Pressing the spacebar will fire a red bullet from the player's position. The objective is to hit the green square (representing the enemy) with your bullets while avoiding collision with the enemy. If the player collides with the enemy, it's game over and the page will be refreshed to restart the game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript. Please copy the code and save it as an HTML file to play the game:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shooting Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Wait for the document to load
    window.onload = function() {
      // Get the canvas element and its context
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");
      
      // Define the player's position and dimensions
      const playerWidth = 50;
      const playerHeight = 50;
      let playerX = canvas.width / 2 - playerWidth / 2;
      let playerY = canvas.height - playerHeight;

// Define the bullet's position, dimensions, and movement
      const bulletWidth = 10;
      const bulletHeight = 20;
      let bulletX = playerX + playerWidth / 2 - bulletWidth / 2;
      let bulletY = playerY - bulletHeight;
      let bulletIsFired = false;

// Define the enemy's position and dimensions
      const enemyWidth = 50;
      const enemyHeight = 50;
      let enemyX = Math.random() * (canvas.width - enemyWidth);
      let enemyY = 0;
      const enemySpeed = 2;

// Function to handle player movement
      function movePlayer(event) {
        const key = event.keyCode;
        if (key === 37) {
          // Left arrow key
          if (playerX > 0) {
            playerX -= 10;
          }
        } else if (key === 39) {
          // Right arrow key
          if (playerX < canvas.width - playerWidth) {
            playerX += 10;
          }
        } else if (key === 32) {
          // Spacebar key (fire bullet)
          bulletIsFired = true;
          bulletX = playerX + playerWidth / 2 - bulletWidth / 2;
          bulletY = playerY - bulletHeight;
        }
      }

// Function to update game objects and check for collisions
      function updateGame() {
        // Clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the player
        context.fillStyle = "blue";
        context.fillRect(playerX, playerY, playerWidth, playerHeight);

// Draw the bullet if fired
        if (bulletIsFired) {
          context.fillStyle = "red";
          context.fillRect(bulletX, bulletY, bulletWidth, bulletHeight);
          bulletY -= 10;
        }

// Draw the enemy
        context.fillStyle = "green";
        context.fillRect(enemyX, enemyY, enemyWidth, enemyHeight);
        enemyY += enemySpeed;

// Check for collision between bullet and enemy
        if (bulletIsFired && bulletY < enemyHeight && bulletX + bulletWidth > enemyX && bulletX < enemyX + enemyWidth) {
          // Collision occurred, reset bullet and enemy position
          bulletIsFired = false;
          bulletY = playerY - bulletHeight;
          enemyX = Math.random() * (canvas.width - enemyWidth);
          enemyY = 0;
        }

// Check for collision between player and enemy
        if (playerX < enemyX + enemyWidth && playerX + playerWidth > enemyX && playerY < enemyY + enemyHeight && playerY + playerHeight > enemyY) {
          // Collision occurred, game over
          alert("Game Over");
          window.location.reload();
        }

// Request next frame to continue the game loop
        requestAnimationFrame(updateGame);
      }

// Start the game loop
      requestAnimationFrame(updateGame);

// Event listener to handle player movement
      document.addEventListener("keydown", movePlayer);
    }
  </script>
</body>
</html>
```