Webleb - HTML UI Elements -

HTML

CSS

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #000;
    overflow: hidden; /* Evita el desplazamiento de la página */
}

#startMenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente */
    z-index: 999; /* Encima de todo */
}

#menuTitle {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

#startMenu button {
    padding: 10px 20px;
    margin-bottom: 10px;
    font-size: 18px;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#game {
    display: none; /* Ocultar el juego al principio */
    position: relative;
    width: 100vw; /* Usa toda la vista de la ventana */
    height: 100vh; /* Usa toda la vista de la ventana */
    background-color: #000;
    border-bottom: 2px solid #fff; /* Línea blanca en la parte inferior */
}

#player {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

#stars {
    position: absolute;
}

.star {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ffff00;
    border-radius: 50%;
}

#obstacles {
    position: absolute;
}

.obstacle {
    position: absolute;
    background-color: #ff0000;
}

#bottomLine {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    bottom: 0;
}

#score {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
}

#lives {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
}

#gameOver {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
}

JS

document.addEventListener('DOMContentLoaded', function () {
    const startMenu = document.getElementById('startMenu');
    const gameContainer = document.getElementById('game');
    const player = document.getElementById('player');
    const starsContainer = document.getElementById('stars');
    const scoreValue = document.getElementById('scoreValue');
    const livesValue = document.getElementById('livesValue');
    const gameOverText = document.getElementById('gameOver');
    const finalScore = document.getElementById('finalScore');

let score, lives, gameSpeed, gameIsOver, gameLoopInterval;

function updateScore() {
        score++;
        scoreValue.textContent = score;
    }

function updateLives() {
        lives--;
        livesValue.textContent = lives;

if (lives <= 0) {
            gameOver();
        }
    }

// Agregar eventos de clic a los botones del menú de inicio
    document.getElementById('easyBtn').addEventListener('click', function () {
        startGame('easy');
    });

document.getElementById('mediumBtn').addEventListener('click', function () {
        startGame('medium');
    });

document.getElementById('hardBtn').addEventListener('click', function () {
        startGame('hard');
    });

function createStar() {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.left = `${Math.random() * (window.innerWidth - 20)}px`;
        star.style.top = '0'; // Start from top
        starsContainer.appendChild(star);

const fallInterval = setInterval(() => {
            if (!gameIsOver) {
                const starTop = parseInt(window.getComputedStyle(star).getPropertyValue('top'));

if (starTop >= window.innerHeight) {
                    clearInterval(fallInterval);
                    star.remove();
                    updateLives();
                }

const starBounds = star.getBoundingClientRect();
                const playerBounds = player.getBoundingClientRect();

if (
                    starBounds.left < playerBounds.right &&
                    starBounds.right > playerBounds.left &&
                    starBounds.top < playerBounds.bottom &&
                    starBounds.bottom > playerBounds.top
                ) {
                    updateScore();
                    star.remove();
                }

star.style.top = `${starTop + gameSpeed}px`;
            } else {
                clearInterval(fallInterval);
            }
        }, 20);
    }

document.addEventListener('keydown', function (event) {
        movePlayer(event.key);
    });

document.addEventListener('mousemove', followMouse);
});

Empfohlen

Ein Code von Metehan

Ein Code von smartarray391

Ich weiß nicht

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code von smartarray391

Ich weiß nicht

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS