Gioco Geometry Dash Clone HTML CSS JavaScript

585 jsleep7829

Apri nell'Editor Video Pubblica il Tuo Codice

Gioco Geometry Dash Clone HTML CSS JavaScript

Consigliato

23 August 2025

Cappadocia Parallax Evening HTML/CSS

16 September 2025

Modello HTML del modulo di invio di monete TikTok

9 September 2025

Contenitore di animazione pixel 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>

Consigliato

Cappadocia Parallax Evening HTML/CSS

Modello HTML del modulo di invio di monete TikTok

Contenitore di animazione pixel CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS