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 de cube 3D HTML avec statistiques et personnalisation

Code HTML du jeu Snake

JEU PACK MAN

HTML

CSS

JS

Recommandé

Jeu de cube 3D HTML avec statistiques et personnalisation

Code HTML du jeu Snake

JEU PACK MAN

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS