Webleb - UI Elements - Agile Square

HTML

CSS

JS

const game = document.getElementById('game');
    const levelDisplay = document.getElementById('level');
    const coinsDisplay = document.getElementById('coins');

const player = document.createElement('div');
    player.classList.add('player');
    game.appendChild(player);

let playerX = 50, playerY = 280;
    let coinsCollected = 0;
    let currentLevel = 1;
    let coinGoal = 5;
    let keys = {};

document.addEventListener('keydown', e => keys[e.key] = true);
    document.addEventListener('keyup', e => keys[e.key] = false);

function movePlayer() {
      const speed = 3;
      if (keys['ArrowUp']) playerY -= speed;
      if (keys['ArrowDown']) playerY += speed;
      if (keys['ArrowLeft']) playerX -= speed;
      if (keys['ArrowRight']) playerX += speed;

playerX = Math.max(0, Math.min(760, playerX));
      playerY = Math.max(0, Math.min(560, playerY));

player.style.left = playerX + 'px';
      player.style.top = playerY + 'px';
    }

function createCoin() {
      const coin = document.createElement('div');
      coin.classList.add('coin');
      coin.style.left = Math.random() * 780 + 'px';
      coin.style.top = Math.random() * 580 + 'px';
      game.appendChild(coin);
    }

function createObstacle(speed) {
      const obs = document.createElement('div');
      obs.classList.add('obstacle');
      obs.style.left = '800px';
      obs.style.top = Math.random() * 560 + 'px';
      game.appendChild(obs);

function checkCollision(obs) {
      const p = player.getBoundingClientRect();
      const o = obs.getBoundingClientRect();
      if (
        p.left < o.right && p.right > o.left &&
        p.top < o.bottom && p.bottom > o.top
      ) {
        let retroceso = Math.max(1, currentLevel - 5);
        alert('¡Perdiste! Retrocedes a nivel ' + retroceso);
        currentLevel = retroceso;
        restartLevel();
      }
    }

function nextLevel() {
      currentLevel++;
      if (currentLevel > 50) {
        alert('¡Ganaste el juego completo!');
        location.reload();
      }
      restartLevel();
    }

function restartLevel() {
      levelDisplay.textContent = currentLevel;
      coinsCollected = 0;
      coinsDisplay.textContent = 0;
      coinGoal = 5 + (currentLevel - 1) * 2;
      playerX = 50;
      playerY = 280;
      document.querySelectorAll('.coin').forEach(c => c.remove());
      document.querySelectorAll('.obstacle').forEach(o => o.remove());
      for (let i = 0; i < coinGoal; i++) createCoin();
    }

for (let i = 0; i < coinGoal; i++) createCoin();

setInterval(() => {
      movePlayer();
      checkCoins();
    }, 20);

setInterval(() => {
      createObstacle(currentLevel + 2);
    }, 1500);

A Code by agilecloud61

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS