Clone du jeu Geometry Dash (HTML, CSS, JavaScript)

592 jsleep7829

Ouvrir dans l'éditeur Video Publiez votre code

Clone du jeu Geometry Dash (HTML, CSS, JavaScript)

Recommandé

22 July 2025

Page de destination du Samsung Galaxy S24 Ultra

18 May 2024

Jeu de pile ou face

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>

Clone du jeu Geometry Dash (HTML, CSS, JavaScript)

Recommandé

Page de destination du Samsung Galaxy S24 Ultra

Page héros du portfolio

Jeu de pile ou face

HTML

CSS

JS

Recommandé

Page de destination du Samsung Galaxy S24 Ultra

Page héros du portfolio

Jeu de pile ou face

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS