Clon del juego Geometry Dash HTML CSS JavaScript

1,689 jsleep7829

Abrir en el editor Publica tu código

Clon del juego Geometry Dash HTML CSS JavaScript

Recomendado

18 September 2025

Animación CSS: Efecto de fragmento de memoria fantasma

27 January 2026

Anuncio jugable HTML5 del juego Find the Alien

19 October 2024

Sitio web de portafolios para desarrolladores HTML

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