AI game creator

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

No:21850

←

Prev Next

→

Shooting Game
Developer User10088｜Date and time 23/10/18 18:25:52
Build time 82.254 sec｜Game capacity 4.461KB｜

Script

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

Please note that you would need to provide the actual URLs to the player and target icons by replacing "emozi_all/player.png" and "emozi_dog.png" in the code with the correct image URLs or local file paths.

←

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 {
      background-color: #f1f1f1;
    }
    #game-container {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }
    #player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background: url(player-icon.png) no-repeat;
      background-size: contain;
    }
    .bullet {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
    }
    .target {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background: url(target-icon.png) no-repeat;
      background-size: contain;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
    <div id="bullet-container"></div>
    <div id="target-container"></div>
  </div>

// Move player horizontally based on touch events
    const movePlayer = (event) => {
      const touchPosition = event.touches[0].clientX;
      const containerWidth = document.getElementById('game-container').offsetWidth;
      const playerWidth = player.offsetWidth;
      const playerHalfWidth = playerWidth / 2;
      const minPosition = playerHalfWidth;
      const maxPosition = containerWidth - playerHalfWidth;

let newPosition = touchPosition;

if (newPosition < minPosition) {
        newPosition = minPosition;
      } else if (newPosition > maxPosition) {
        newPosition = maxPosition;
      }

player.style.left = newPosition + 'px';
    };

// Shoot bullet when player touches the screen
    const shootBullet = (event) => {
      const bullet = document.createElement('div');
      bullet.className = 'bullet';
      bullet.style.left = (player.offsetLeft + player.offsetWidth / 2) + 'px';
      bulletContainer.appendChild(bullet);

const bulletAnimation = bullet.animate([
        { bottom: '0', transform: 'translateY(0)' },
        { bottom: '100%', transform: 'translateY(-400px)' }
      ], {
        duration: 1000,
        easing: 'linear',
        fill: 'forwards'
      });

bulletAnimation.onfinish = () => {
        bullet.remove();
      };
    };

// Generate random targets
    const generateTargets = () => {
      const target = document.createElement('div');
      target.className = 'target';
      target.style.left = Math.floor(Math.random() * 90) + '%';
      targetContainer.appendChild(target);

const targetAnimation = target.animate([
        { bottom: '100%' },
        { bottom: '0' }
      ], {
        duration: 3000,
        easing: 'linear',
        fill: 'forwards'
      });

targetAnimation.onfinish = () => {
        target.remove();
        generateTargets();
      };
    };

// Check if bullet hits the target
    const checkCollision = () => {
      const bullets = document.getElementsByClassName('bullet');
      const targets = document.getElementsByClassName('target');

for (let bullet of bullets) {
        const bulletRect = bullet.getBoundingClientRect();
        
        for (let target of targets) {
          const targetRect = target.getBoundingClientRect();

if (
            bulletRect.top <= targetRect.bottom &&
            bulletRect.right >= targetRect.left &&
            bulletRect.left <= targetRect.right
          ) {
            bullet.remove();
            target.remove();
            break;
          }
        }
      }
    };

// Start game
    const startGame = () => {
      document.addEventListener('touchstart', shootBullet);
      document.addEventListener('touchmove', movePlayer);

generateTargets();
      setInterval(checkCollision, 100);
    };

// Initialize game
    startGame();
  </script>
</body>
</html>
```

Please note that you would need to provide the actual URLs to the player and target icons by replacing "player-icon.png" and "target-icon.png" in the code with the correct image URLs or local file paths.