AI game creator

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

No:29787

←

Prev Next

→

Shooting Game
Developer User14628｜Date and time 23/12/19 2:31:59
Build time 27.865 sec｜Game capacity 4.6KB｜

Script

Sure! Here's an example of a simple shooting game implemented as a single HTML file using JavaScript. The game assumes smartphone operation and uses pictograms:

Score: 0

This game allows the player to control a spaceship using their smartphone's touch gestures. They can move the spaceship horizontally by dragging their finger on the game board and shoot enemies by tapping on the game board. The objective is to shoot as many enemies as possible without getting hit. The player's score is displayed at the top, and the game ends when an enemy collides with the player's spaceship.

←

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. The game assumes smartphone operation and uses pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #game-board {
      background-color: lightgray;
      width: 300px;
      height: 400px;
      position: relative;
    }
    
    #player {
      background-image: url('https://example.com/player-icon.png');
      background-size: contain;
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .enemy {
      background-image: url('https://example.com/enemy-icon.png');
      background-size: contain;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 20px;
    }
    
    #score {
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-board">
      <div id="player"></div>
      <div id="score">Score: <span id="score-count">0</span></div>
    </div>
  </div>

// Handle player movement
    gameBoard.addEventListener('mousemove', function(event) {
      player.style.left = (event.clientX - gameBoard.offsetLeft) + 'px';
    });

// Handle shooting
    gameBoard.addEventListener('click', function() {
      var bullet = document.createElement('div');
      bullet.style.width = '4px';
      bullet.style.height = '10px';
      bullet.style.backgroundColor = 'black';
      bullet.style.position = 'absolute';
      bullet.style.left = (player.offsetLeft + player.offsetWidth / 2 - 2) + 'px';
      bullet.style.bottom = (player.offsetHeight + 10) + 'px';
      gameBoard.appendChild(bullet);

var bulletInterval = setInterval(function() {
        var bulletBottom = parseInt(bullet.style.bottom);
        if (bulletBottom >= gameBoard.offsetHeight) {
          clearInterval(bulletInterval);
          bullet.remove();
        } else {
          bullet.style.bottom = (bulletBottom + 10) + 'px';

// Check collision with enemies
          var enemies = document.getElementsByClassName('enemy');
          for (var i = 0; i < enemies.length; i++) {
            var enemy = enemies[i];
            if (isColliding(enemy, bullet)) {
              clearInterval(bulletInterval);
              bullet.remove();
              enemy.remove();
              score++;
              scoreCount.textContent = score;
              break;
            }
          }
        }
      }, 50);
    });

// Spawn enemies periodically
    setInterval(function() {
      var enemy = document.createElement('div');
      enemy.className = 'enemy';
      enemy.style.left = Math.floor(Math.random() * (gameBoard.offsetWidth - 40)) + 'px';
      gameBoard.appendChild(enemy);

// Move enemies down
      var enemyInterval = setInterval(function() {
        var enemyTop = parseInt(enemy.style.top);
        if (enemyTop >= gameBoard.offsetHeight) {
          clearInterval(enemyInterval);
          enemy.remove();
        } else {
          enemy.style.top = (enemyTop + 10) + 'px';

// Check collision with player
          if (isColliding(enemy, player)) {
            clearInterval(enemyInterval);
            enemy.remove();
            alert('Game Over! Your final score: ' + score);
            score = 0;
            scoreCount.textContent = score;
          }
        }
      }, 500);
    }, 2000);

// Check collision between two elements
    function isColliding(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(
        rect1.top > rect2.bottom ||
        rect1.right < rect2.left ||
        rect1.bottom < rect2.top ||
        rect1.left > rect2.right
      );
    }
  </script>
</body>
</html>
```