A Tetris with enemies's game

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

No:10724

103

←

Prev Next

→

A Tetris with enemies
Developer User3408｜Date and time 23/8/2 9:38:38
Build time 16.797 sec｜Game capacity 2.708KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tetris con Enemigos</title>
  <style>
    #game-board {
      position: relative;
      width: 240px;
      height: 480px;
      border: 1px solid #000;
      margin: 0 auto;
      overflow: hidden;
    }
    
    .block {
      position: absolute;
      width: 30px;
      height: 30px;
      border: 1px solid #000;
    }
    
    #player {
      background-color: #F00;
    }
    
    .enemy {
      background-color: #00F;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

const enemies = [];
    let enemySpeed = 1;
    let score = 0;

function createEnemy() {
      const enemy = document.createElement('div');
      enemy.classList.add('block', 'enemy');
      enemy.style.left = `${Math.floor(Math.random() * 8) * 30}px`;
      gameBoard.appendChild(enemy);
      enemies.push(enemy);
    }

function updatePlayerPosition(event) {
      if (event.key === 'ArrowLeft' && parseInt(player.style.left) > 0) {
        player.style.left = `${parseInt(player.style.left) - 30}px`;
      } else if (event.key === 'ArrowRight' && parseInt(player.style.left) < 210) {
        player.style.left = `${parseInt(player.style.left) + 30}px`;
      }
    }

function moveEnemies() {
      enemies.forEach(enemy => {
        const currentTop = parseInt(enemy.style.top);
        enemy.style.top = `${currentTop + (enemySpeed * 30)}px`;
        
        if (currentTop >= 450 && currentTop <= 480 && parseInt(enemy.style.left) === parseInt(player.style.left)) {
          gameOver();
        }

if (currentTop > 510) {
          enemy.remove();
          const index = enemies.indexOf(enemy);
          enemies.splice(index, 1);
          score++;
          updateScore();
        }
      });
    }

function updateScore() {
      const scoreDisplay = document.getElementById('score');
      scoreDisplay.innerText = `Puntuación: ${score}`;
    }

function gameOver() {
      clearInterval(enemyMovement);
      window.removeEventListener('keydown', updatePlayerPosition);
      alert(`¡Juego terminado! Tu puntuación fue de ${score}.`);
    }

function startGame() {
      window.addEventListener('keydown', updatePlayerPosition);
      score = 0;
      enemySpeed = 1;
      enemies.forEach(enemy => enemy.remove());
      enemies.splice(0);
      updateScore();
      enemyMovement = setInterval(createEnemy, 1000);
      gameLoop = setInterval(moveEnemies, 500);
    }

startGame();
  </script>
</body>
</html>