Webleb - Extraits de Code - Jeu Stargazer Javascript

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);
});

Jeu Stargazer Javascript

Recommandé

jeu

Jeu d'évasion

le jeu de balle pour le plaisir (par M.)

HTML

CSS

JS

Recommandé

jeu

Jeu d'évasion

le jeu de balle pour le plaisir (par M.)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS