AI game creator

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

No:36329

←

Prev Next

→

Shooting Game
Developer User16649｜Date and time 24/1/17 11:49:31
Build time 17.525 sec｜Game capacity 4.296KB｜

Script

Sure, here's a simple shooting game implemented as a single HTML file using JavaScript and enclosed in script tags. It is designed for smartphone operation and uses pictograms for visuals:

Score: 0

To use this game, you need to create two image files: `emozi_all/game.png` and `emozi_all/enemy.png`. Place these images in the same folder as the HTML file. You can use any image files you like for the player and enemy sprites. The arrow keys can be used to move the player left and right, and the spacebar can be used to shoot bullets. The game's objective is to shoot the enemies and earn points. The score is displayed on the screen.

←

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 and enclosed in script tags. It is designed for smartphone operation and uses pictograms for visuals:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Shooting Game</title>
  <style>
    #game-container {
      width: 100%;
      height: 500px;
      background-color: lightgray;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #player {
      width: 50px;
      height: 50px;
      background-image: url('player.png');
      background-size: contain;
    }
    .bullet {
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
    }
    .enemy {
      width: 50px;
      height: 50px;
      background-image: url('enemy.png');
      background-size: contain;
      position: absolute;
    }
    #score {
      text-align: center;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
    <div id="score">Score: 0</div>
  </div>

// Bullet position
    let bullets = [];

// Enemy position
    let enemies = [];
    const enemySpeed = 5;
    let score = 0;

// Move player
    function movePlayer(event) {
      const key = event.keyCode;
      if (key === 37) { // Left
        playerX -= playerSpeed;
      } else if (key === 39) { // Right
        playerX += playerSpeed;
      } else if (key === 32) { // Space (Shoot bullet)
        bullets.push({ x: playerX + 15, y: playerY });
      }
    }

// Create enemy
    function createEnemy() {
      const enemy = document.createElement('div');
      enemy.className = 'enemy';
      enemy.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
      enemy.style.top = '0px';
      document.body.appendChild(enemy);
      enemies.push(enemy);
    }

// Move enemy
    function moveEnemies() {
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];
        const enemyTop = parseInt(enemy.style.top);
        if (enemyTop > window.innerHeight) {
          document.body.removeChild(enemy);
          enemies.splice(i, 1);
          score -= 10;
          updateScore();
        } else {
          enemy.style.top = enemyTop + enemySpeed + 'px';
        }
      }
    }

// Check collision between bullet and enemy
    function checkCollision() {
      for (let i = 0; i < enemies.length; i++) {
        const enemy = enemies[i];
        const enemyRect = enemy.getBoundingClientRect();
        for (let j = 0; j < bullets.length; j++) {
          const bullet = bullets[j];
          const bulletRect = { x: bullet.x, y: bullet.y, width: 20, height: 20 };
          if (isColliding(bulletRect, enemyRect)) {
            document.body.removeChild(enemy);
            document.body.removeChild(bullet.element);
            enemies.splice(i, 1);
            bullets.splice(j, 1);
            score += 10;
            updateScore();
          }
        }
      }
    }

// Utility function to check collision between two rectangles
    function isColliding(rect1, rect2) {
      return (
        rect1.x < rect2.x + rect2.width &&
        rect1.x + rect1.width > rect2.x &&
        rect1.y < rect2.y + rect2.height &&
        rect1.y + rect1.height > rect2.y
      );
    }

// Update score on screen
    function updateScore() {
      document.getElementById('score').textContent = 'Score: ' + score;
    }

// Game loop
    function gameLoop() {
      moveEnemies();
      checkCollision();
      requestAnimationFrame(gameLoop);
    }

// Start game
    window.addEventListener('keydown', movePlayer);
    gameLoop();
    setInterval(createEnemy, 1000); // Create new enemy every second
  </script>
</body>
</html>
```

To use this game, you need to create two image files: `player.png` and `enemy.png`. Place these images in the same folder as the HTML file. You can use any image files you like for the player and enemy sprites. The arrow keys can be used to move the player left and right, and the spacebar can be used to shoot bullets. The game's objective is to shoot the enemies and earn points. The score is displayed on the screen.