AI game creator

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

No:18885

←

Prev Next

→

Shooting Game
Developer User8340｜Date and time 23/10/1 0:57:51
Build time 11.73 sec｜Game capacity 3.641KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript:

This example creates a simple shooting game where the player can move their character (represented by a red circle) using touch events on a smartphone. When the player touches the screen, projectiles (represented by green circles) are fired from the player's location and move in the direction of the touch. The game loop continuously updates the screen and moves the projectiles. If a projectile goes offscreen, it is removed from the game. Note that this is a basic example meant for demonstration purposes. You can enhance it further by adding enemy targets, scoring mechanism, power-ups, levels, sound effects, etc.

←

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:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Shooting Game</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #game {
        background-color: #000;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="game"></canvas>

// Set canvas size
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

// Player object
      const player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        color: "#ff0000",
        size: 20,
        speed: 5
      };

// Shooting projectiles
      let projectiles = [];

// Event listener to move player based on touch events
      document.addEventListener("touchmove", e => {
        player.x = e.touches[0].clientX;
        player.y = e.touches[0].clientY;
      });

// Event listener to shoot projectiles on touch
      document.addEventListener("touchend", e => {
        projectiles.push({
          x: player.x,
          y: player.y,
          color: "#00ff00",
          size: 5,
          speed: 8,
          direction: Math.atan2(
            e.changedTouches[0].clientY - player.y,
            e.changedTouches[0].clientX - player.x
          )
        });
      });

// Game loop function
      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
        context.fillStyle = player.color;
        context.beginPath();
        context.arc(
          player.x,
          player.y,
          player.size,
          0,
          Math.PI * 2,
          false
        );
        context.closePath();
        context.fill();

// Draw projectiles
        projectiles.forEach((projectile, index) => {
          context.fillStyle = projectile.color;
          context.beginPath();
          context.arc(
            projectile.x,
            projectile.y,
            projectile.size,
            0,
            Math.PI * 2,
            false
          );
          context.closePath();
          context.fill();

// Move projectiles
          projectile.x += Math.cos(projectile.direction) * projectile.speed;
          projectile.y += Math.sin(projectile.direction) * projectile.speed;

// Remove projectiles that are offscreen
          if (
            projectile.x + projectile.size < 0 ||
            projectile.x - projectile.size > canvas.width ||
            projectile.y + projectile.size < 0 ||
            projectile.y - projectile.size > canvas.height
          ) {
            projectiles.splice(index, 1);
          }
        });

requestAnimationFrame(gameLoop);
      }

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

Note that this is a basic example meant for demonstration purposes. You can enhance it further by adding enemy targets, scoring mechanism, power-ups, levels, sound effects, etc.