Clon del juego Geometry Dash HTML CSS JavaScript

822 jsleep7829

Abrir en el editor Publica tu código

Clon del juego Geometry Dash HTML CSS JavaScript

Recomendado

10 January 2026

Botón CSS Glassmorphism con animación de brillo

23 August 2025

Página de inicio de sesión HTML CSS con diseño de huella digital

9 December 2025

Diseño de formulario de inicio de sesión animado con CSS

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Geometry Dash Clone</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: sans-serif;
        }

#game {
            width: 600px;
            height: 200px;
            border: 5px solid #333;
            background-color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

#ground {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;
            background-color: #333;
        }

#player {
            width: 20px;
            height: 20px;
            background-color: #ff5733;
            position: absolute;
            bottom: 20px; /* Starts on the ground */
            left: 50px;
            transition: bottom 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother jump transition */
        }

.jump {
            bottom: 120px !important; /* Jump height */
        }

.obstacle {
            width: 20px;
            height: 20px;
            background-color: #4CAF50;
            position: absolute;
            bottom: 20px;
            animation: moveObstacle 1.5s linear infinite;
        }

@keyframes moveObstacle {
            0% { right: -20px; }
            100% { right: 600px; }
        }

#score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 1.2em;
            color: #333;
        }

#message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px;
            border-radius: 5px;
            display: none;
            cursor: pointer;
            z-index: 10;
        }
    </style>
</head>
<body>

<div id="game">
        <div id="score">Score: 0</div>
        <div id="player"></div>
        <div id="ground"></div>
        <div id="message">
            Game Over! Click to Restart.
        </div>
    </div>

let isJumping = false;
        let score = 0;
        let gameRunning = true;
        let obstacleInterval;
        let gameLoopInterval;

// --- Game Controls ---
        function jump() {
            if (!isJumping && gameRunning) {
                isJumping = true;
                player.classList.add('jump');

// Gravity simulation (remove jump class after transition)
                setTimeout(() => {
                    player.classList.remove('jump');
                    isJumping = false;
                }, 300); // Matches the CSS transition time
            }
        }

document.addEventListener('keydown', (event) => {
            if (event.code === 'Space' || event.key === ' ' || event.key === 'ArrowUp') {
                jump();
            }
        });

// --- Obstacle Generation ---
        function createObstacle() {
            if (!gameRunning) return;

const obstacle = document.createElement('div');
            obstacle.classList.add('obstacle');
            
            // Randomize height (optional for simple dash game)
            const height = Math.random() * 10 + 20;
            obstacle.style.height = `${height}px`;

// Set animation duration based on score (making it faster)
            const speedFactor = 1.5 - (score / 500);
            obstacle.style.animationDuration = `${Math.max(0.8, speedFactor)}s`;

game.appendChild(obstacle);

// Clean up old obstacles after they pass
            obstacle.addEventListener('animationend', () => {
                if (gameRunning) {
                    score++;
                    scoreDisplay.textContent = `Score: ${score}`;
                }
                obstacle.remove();
            });
        }
        
        function startGame() {
            // Clear previous state
            gameRunning = true;
            score = 0;
            scoreDisplay.textContent = `Score: 0`;
            message.style.display = 'none';
            player.classList.remove('jump');
            
            // Remove all existing obstacles
            document.querySelectorAll('.obstacle').forEach(o => o.remove());

// Start intervals
            obstacleInterval = setInterval(createObstacle, 1500); // Generate new obstacle every 1.5s
            gameLoopInterval = setInterval(checkCollision, 10); // Check collision 100 times per second
        }

function stopGame() {
            gameRunning = false;
            clearInterval(obstacleInterval);
            clearInterval(gameLoopInterval);
            message.style.display = 'block';
            
            // Stop all current CSS animations immediately
            document.querySelectorAll('.obstacle').forEach(o => {
                o.style.animationPlayState = 'paused';
            });
        }

// --- Collision Detection ---
        function checkCollision() {
            if (!gameRunning) return;

const playerRect = player.getBoundingClientRect();
            const gameRect = game.getBoundingClientRect();

// Adjust player coordinates relative to the game container
            const playerBottom = gameRect.bottom - playerRect.bottom;
            const playerLeft = playerRect.left - gameRect.left;
            const playerRight = playerLeft + playerRect.width;

document.querySelectorAll('.obstacle').forEach(obstacle => {
                const obsRect = obstacle.getBoundingClientRect();

const obsBottom = gameRect.bottom - obsRect.bottom;
                const obsLeft = obsRect.left - gameRect.left;
                const obsRight = obsLeft + obsRect.width;

// Collision logic:
                // 1. Player is horizontally overlapping with obstacle
                const horizontalOverlap = playerRight > obsLeft && playerLeft < obsRight;
                
                // 2. Player is vertically overlapping (i.e., not jumped high enough)
                const verticalOverlap = playerBottom < obsRect.height;

if (horizontalOverlap && verticalOverlap) {
                    stopGame();
                }
            });
        }

// --- Initialization ---
        message.addEventListener('click', startGame);
        
        // Initial setup instruction
        message.innerHTML = 'Click to Start Game (Use SPACE to Jump)';
        message.style.display = 'block';

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geometry Dash Concept</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #000;
            overflow: hidden;
            font-family: sans-serif;
        }

.game-container {
            width: 800px;
            height: 200px;
            background-color: #1a1a1a;
            position: relative;
            border: 5px solid #fff;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }

/* The Ground Plane */
        .ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background-color: #333;
            border-top: 3px solid #ff0000; /* Red line indicator */
        }

/* The Player Cube */
        .player {
            width: 40px;
            height: 40px;
            background-color: #ffd700; /* Gold/Yellow */
            position: absolute;
            bottom: 20px; /* Sits on the ground */
            left: 50px;
            border: 3px solid #000;
            box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
            
            /* Simple jump/bounce simulation */
            animation: jump 2s infinite ease-in-out;
        }
        
        @keyframes jump {
            0% { transform: translateY(0) rotate(0deg); }
            40% { transform: translateY(-80px) rotate(90deg); }
            60% { transform: translateY(-80px) rotate(90deg); }
            100% { transform: translateY(0) rotate(180deg); }
        }

/* The Spike Obstacle */
        .spike {
            position: absolute;
            bottom: 20px; /* Sits on the ground */
            left: 300px;
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 40px solid #ff0000; /* Red triangle */
            z-index: 10;
        }

/* Decorative text */
        .title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 0 5px #ff0000;
        }

</style>
</head>
<body>

<div class="game-container">
        <div class="title">GEOMETRY DASH (CSS Simulation)</div>
        <div class="ground"></div>
        <div class="spike"></div>
        <div class="player"></div>
    </div>

</body>
</html>

CSS