I want a game type shooter's game

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

No:24147

←

Prev Next

→

I want a game type shooter
Developer User11326｜Date and time 23/11/6 5:10:52
Build time 158.009 sec｜Game capacity 5.963KB｜

Script

Sure, here's an example of a simple shooter game implemented as a single HTML file using JavaScript and pictograms. The player controls a spaceship and shoots down incoming asteroids using the smartphone's touch functionality. Hope you enjoy it!

To play the game, you need to save the above code in a file named `shooter.html` and include an image of a spaceship named `emozi_all/play.png` in the same directory as the HTML file. When you open the `shooter.html` file on your smartphone, the game will start, and you can control the spaceship by swiping left or right on the screen. Shoot down the asteroids and avoid colliding with them to increase your score. The game will end when the ship collides with an asteroid, and a game over message with your final score will be shown.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="game" width="400" height="400"></canvas>

// Event listeners for touch controls
      canvas.addEventListener("touchstart", handleTouchStart, false);
      canvas.addEventListener("touchmove", handleTouchMove, false);
      canvas.addEventListener("touchend", handleTouchEnd, false);

// Ship movement
      let touchStartX = 0;

function handleTouchStart(event) {
        touchStartX = event.touches[0].clientX;
      }

function handleTouchMove(event) {
        const touchX = event.touches[0].clientX;
        const delta = touchX - touchStartX;

if (delta > 0) {
          ship.x += ship.speed;
        } else if (delta < 0) {
          ship.x -= ship.speed;
        }

touchStartX = touchX;
        event.preventDefault();
      }

function handleTouchEnd() {
        // Handle touch end event if needed
      }

// Bullets management
      const bulletSpeed = 10;

function createBullet() {
        bullets.push({
          x: ship.x + ship.width / 2,
          y: ship.y,
          width: 8,
          height: 8,
        });
      }

// Asteroids management
      const asteroidSpeed = 4;

function createAsteroid() {
        const size = Math.random() * 40 + 10;
        asteroids.push({
          x: Math.random() * (canvas.width - size),
          y: -size,
          width: size,
          height: size,
        });
      }

// Collision detection
      function checkCollisions() {
        bullets.forEach((bullet, bulletIndex) => {
          asteroids.forEach((asteroid, asteroidIndex) => {
            if (
              bullet.x < asteroid.x + asteroid.width &&
              bullet.x + bullet.width > asteroid.x &&
              bullet.y < asteroid.y + asteroid.height &&
              bullet.y + bullet.height > asteroid.y
            ) {
              bullets.splice(bulletIndex, 1);
              asteroids.splice(asteroidIndex, 1);
              score += 10;
            }
          });
        });

asteroids.forEach((asteroid) => {
          if (
            ship.x < asteroid.x + asteroid.width &&
            ship.x + ship.width > asteroid.x &&
            ship.y < asteroid.y + asteroid.height &&
            ship.y + ship.height > asteroid.y
          ) {
            // Game over scenario
            alert(`Game Over! Final Score: ${score}`);
            location.reload(); // Restart game
          }
        });
      }

// Rendering
      function drawShip() {
        ctx.fillStyle = "white";
        ctx.drawImage(
          document.getElementById("ship-image"),
          ship.x,
          ship.y,
          ship.width,
          ship.height
        );
      }

function drawBullets() {
        ctx.fillStyle = "white";
        bullets.forEach((bullet) => {
          ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
        });
      }

function drawAsteroids() {
        ctx.fillStyle = "white";
        asteroids.forEach((asteroid) => {
          ctx.fillRect(asteroid.x, asteroid.y, asteroid.width, asteroid.height);
        });
      }

function drawScore() {
        ctx.fillStyle = "white";
        ctx.font = "24px Arial";
        ctx.fillText(`Score: ${score}`, 10, 30);
      }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

drawShip();
        drawBullets();
        drawAsteroids();
        drawScore();
      }

function update() {
        updateBullets();
        updateAsteroids();
        checkCollisions();
        draw();

requestAnimationFrame(update);
      }

// Game start
      window.addEventListener("load", () => {
        // Load ship image
        const shipImage = new Image();
        shipImage.src = "ship.png";
        shipImage.id = "ship-image";

shipImage.onload = () => {
          ctx.drawImage(shipImage, ship.x, ship.y, ship.width, ship.height);

setInterval(createBullet, 200); // Create bullet every 200ms
          setInterval(createAsteroid, 1500); // Create asteroid every 1500ms

update(); // Start game loop
        };
      });
    </script>
  </body>
</html>
```

To play the game, you need to save the above code in a file named `shooter.html` and include an image of a spaceship named `ship.png` in the same directory as the HTML file. When you open the `shooter.html` file on your smartphone, the game will start, and you can control the spaceship by swiping left or right on the screen. Shoot down the asteroids and avoid colliding with them to increase your score. The game will end when the ship collides with an asteroid, and a game over message with your final score will be shown.