AI game creator

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

No:35820

←

Prev Next

→

Shooting Game
Developer User16649｜Date and time 24/1/15 13:26:51
Build time 14.918 sec｜Game capacity 4.281KB｜

Script

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

You can copy and save the above code as an HTML file, then open it in a web browser (preferably on a smartphone) to play the shooting game. The player is represented by a blue square, and the targets are represented by green squares. Tilt your smartphone to move the player horizontally and tap the screen to shoot the bullet at the targets. The objective is to hit as many targets as possible. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #game-container {
      position: relative;
      height: 500px;
      background-color: #f1f1f1;
    }

#player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: blue;
    }

#bullet {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 20px;
      background-color: red;
      display: none;
    }

.target {
      position: absolute;
      top: 0;
      width: 50px;
      height: 50px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
    <div id="bullet"></div>
  </div>

gameContainer.addEventListener("click", shootBullet);

// Listen to smartphone tilt events
    window.addEventListener("deviceorientation", handleTilt);

// Generate random targets at the top of the game container
    setInterval(generateTarget, 2000);

function handleTilt(event) {
      // Change player's position based on smartphone tilt
      var xTilt = event.gamma; // Tilt angle along the x-axis

// Normalize the tilt angle to fit within the game container width
      var maxTilt = 30; // Maximum tilt angle allowed
      var normalizedX = (xTilt / maxTilt) * (gameContainer.offsetWidth - player.offsetWidth);

// Move the player horizontally based on the normalized tilt angle
      player.style.left = normalizedX + "px";
    }

function shootBullet() {
      // Shoot a bullet from the player's position
      bullet.style.display = "block";
      bullet.style.left = player.style.left;

// Animate the bullet's movement
      var bulletPosition = 0;
      var bulletSpeed = 10; // Adjust bullet speed as needed
      var bulletInterval = setInterval(function () {
        bulletPosition += bulletSpeed;
        bullet.style.bottom = bulletPosition + "px";

// Check for collision with targets
        for (var i = 0; i < targets.length; i++) {
          var target = targets[i];
          if (checkCollision(bullet, target)) {
            target.style.display = "none"; // Hide the hit target
            clearInterval(bulletInterval); // Stop bullet movement
            bullet.style.display = "none"; // Hide the bullet
            targets.splice(i, 1); // Remove hit target from array
            break;
          }
        }

// Check if the bullet is out of the game container
        if (bulletPosition >= gameContainer.offsetHeight) {
          clearInterval(bulletInterval); // Stop bullet movement
          bullet.style.display = "none"; // Hide the bullet
        }
      }, 10);
    }

function generateTarget() {
      // Generate a random target
      var target = document.createElement("div");
      target.classList.add("target");
      target.style.left = Math.random() * (gameContainer.offsetWidth - target.offsetWidth) + "px";
      gameContainer.appendChild(target);
      targets.push(target);
    }

function checkCollision(bullet, target) {
      // Check if the bullet and target collide
      var bulletRect = bullet.getBoundingClientRect();
      var targetRect = target.getBoundingClientRect();
      return (
        bulletRect.top <= targetRect.bottom &&
        bulletRect.right >= targetRect.left &&
        bulletRect.left <= targetRect.right &&
        bulletRect.bottom >= targetRect.top
      );
    }
  </script>
</body>
</html>
```