AI game creator

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

No:22156

←

Prev Next

→

Shooting Game
Developer User10255｜Date and time 23/10/21 8:11:47
Build time 105.426 sec｜Game capacity 4.85KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Juego de disparos</title>
  <style>
    #game-board {
      width: 400px;
      height: 600px;
      border: 1px solid black;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    #player {
      width: 50px;
      height: 50px;
      background-image: url('pictograms/player.png');
      background-size: cover;
      position: absolute;
      bottom: 20px;
      left: calc(50% - 25px);
    }
    .enemy {
      width: 50px;
      height: 50px;
      background-image: url('pictograms/enemy.png');
      background-size: cover;
      position: absolute;
    }
    .bullet {
      width: 10px;
      height: 30px;
      background-color: black;
      position: absolute;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="player"></div>
  </div>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const player = document.getElementById('player');
      const gameBoard = document.getElementById('game-board');
      let enemiesInterval;
      let bulletsInterval;
      let score = 0;

function movePlayer(event) {
        const key = event.key;
        const playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));

if (key === 'ArrowLeft' && playerLeft > 0) {
          player.style.left = playerLeft - 10 + 'px';
        }

if (key === 'ArrowRight' && playerLeft < 350) {
          player.style.left = playerLeft + 10 + 'px';
        }

if (key === ' ') {
          event.preventDefault();
          createBullet(playerLeft + 20);
        }
      }

function createBullet(playerPosition) {
        const bullet = document.createElement('div');
        bullet.classList.add('bullet');
        bullet.style.left = playerPosition + 'px';
        bullet.style.bottom = '70px';
        gameBoard.appendChild(bullet);
        moveBullet(bullet);
      }

function moveBullet(bullet) {
        let bulletInterval = setInterval(() => {
          const bulletBottom = parseInt(window.getComputedStyle(bullet).getPropertyValue('bottom'));
          const bulletPosition = parseInt(window.getComputedStyle(bullet).getPropertyValue('left'));
          const enemies = document.querySelectorAll('.enemy');

enemies.forEach((enemy) => {
            if (checkCollision(bullet, enemy)) {
              enemy.classList.remove('enemy');
              enemy.classList.add('hidden');
              bullet.remove();
              score++;
              if (score % 10 === 0) {
                clearInterval(enemiesInterval);
                createEnemies();
              }
            }
          });

if (bulletBottom >= 540) {
            bullet.classList.remove('bullet');
            bullet.remove();
            clearInterval(bulletInterval);
          } else {
            bullet.style.bottom = bulletBottom + 10 + 'px';
          }
        }, 16);
      }

function createEnemies() {
        enemiesInterval = setInterval(() => {
          const enemy = document.createElement('div');
          enemy.classList.add('enemy');
          const randomPosition = Math.floor(Math.random() * 15) * 50;
          enemy.style.left = randomPosition + 'px';
          enemy.style.top = '10px';
          gameBoard.appendChild(enemy);
          moveEnemies(enemy);
        }, 2000);
      }

function moveEnemies(enemy) {
        let enemyInterval = setInterval(() => {
          const enemyTop = parseInt(window.getComputedStyle(enemy).getPropertyValue('top'));

if (enemyTop >= 550) {
            gameOver();
            clearInterval(enemyInterval);
          } else {
            enemy.style.top = enemyTop + 10 + 'px';
          }
        }, 16);
      }

function checkCollision(bullet, enemy) {
        const bulletLeft = parseInt(window.getComputedStyle(bullet).getPropertyValue('left'));
        const bulletBottom = parseInt(window.getComputedStyle(bullet).getPropertyValue('bottom'));
        const enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue('left'));
        const enemyTop = parseInt(window.getComputedStyle(enemy).getPropertyValue('top'));
        const enemyHeight = parseInt(window.getComputedStyle(enemy).getPropertyValue('height'));

if (bulletBottom >= enemyTop && bulletBottom <= enemyTop + enemyHeight && bulletLeft >= enemyLeft && bulletLeft <= enemyLeft + 50) {
          return true;
        }

return false;
      }

function gameOver() {
        clearInterval(enemiesInterval);
        clearInterval(bulletsInterval);
        alert('¡Juego terminado! Tu puntuación fue: ' + score);
        location.reload();
      }

document.addEventListener('keydown', movePlayer);
      createEnemies();
    });
  </script>
</body>
</html>