Clon del juego JavaScript de Geometry Dash

693 codex

Abrir en el editor Publica tu código

Clon del juego JavaScript de Geometry Dash

Recomendado

10 March 2025

Barra de navegación responsiva premium

13 June 2025

Un código de ashimadison8

23 November 2025

Animación de tarjeta de crédito con Paystack

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 Clone</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #222;
            font-family: 'Arial', sans-serif;
        }
        canvas {
            display: block;
            background: linear-gradient(#0055ff, #001133);
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 24px;
            pointer-events: none;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="ui">Score: 0</div>
    <canvas id="gameCanvas"></canvas>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Game Constants
        const GRAVITY = 0.8;
        const JUMP_FORCE = -15;
        const GROUND_Y = canvas.height - 100;
        const PLAYER_SIZE = 40;

let score = 0;
        let gameActive = true;
        let gameSpeed = 7;

const player = {
            x: 100,
            y: GROUND_Y - PLAYER_SIZE,
            vy: 0,
            width: PLAYER_SIZE,
            height: PLAYER_SIZE,
            rotation: 0,
            grounded: true
        };

const obstacles = [];

function spawnObstacle() {
            if (!gameActive) return;
            const size = 40;
            obstacles.push({
                x: canvas.width,
                y: GROUND_Y - size,
                width: size,
                height: size
            });
            
            // Randomize next spawn
            setTimeout(spawnObstacle, 1000 + Math.random() * 2000);
        }

function resetGame() {
            score = 0;
            gameSpeed = 7;
            player.y = GROUND_Y - PLAYER_SIZE;
            player.vy = 0;
            player.rotation = 0;
            obstacles.length = 0;
            gameActive = true;
            scoreElement.innerText = "Score: 0";
            requestAnimationFrame(update);
        }

window.addEventListener('keydown', (e) => {
            if (e.code === 'Space' || e.code === 'ArrowUp') jump();
        });

window.addEventListener('touchstart', jump);
        window.addEventListener('mousedown', jump);

function update() {
            if (!gameActive) return;

// Physics
            player.vy += GRAVITY;
            player.y += player.vy;

// Ground Collision
            if (player.y + player.height >= GROUND_Y) {
                player.y = GROUND_Y - player.height;
                player.vy = 0;
                player.grounded = true;
                // Snap rotation to 90deg increments
                player.rotation = Math.round(player.rotation / 90) * 90;
            } else {
                player.rotation += 5; // Rotate in air
            }

// Move Obstacles
            for (let i = obstacles.length - 1; i >= 0; i--) {
                obstacles[i].x -= gameSpeed;

// Collision Detection
                if (
                    player.x < obstacles[i].x + obstacles[i].width &&
                    player.x + player.width > obstacles[i].x &&
                    player.y < obstacles[i].y + obstacles[i].height &&
                    player.y + player.height > obstacles[i].y
                ) {
                    gameActive = false;
                    alert("Game Over! Score: " + score);
                    resetGame();
                    return;
                }

// Cleanup
                if (obstacles[i].x + obstacles[i].width < 0) {
                    obstacles.splice(i, 1);
                    score++;
                    scoreElement.innerText = "Score: " + score;
                    gameSpeed += 0.1;
                }
            }

draw();
            requestAnimationFrame(update);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Ground
            ctx.fillStyle = '#111';
            ctx.fillRect(0, GROUND_Y, canvas.width, canvas.height - GROUND_Y);
            ctx.strokeStyle = '#00ffff';
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(0, GROUND_Y);
            ctx.lineTo(canvas.width, GROUND_Y);
            ctx.stroke();

// Draw Player
            ctx.save();
            ctx.translate(player.x + player.width / 2, player.y + player.height / 2);
            ctx.rotate(player.rotation * Math.PI / 180);
            ctx.fillStyle = '#00ff00';
            ctx.fillRect(-player.width / 2, -player.height / 2, player.width, player.height);
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;
            ctx.strokeRect(-player.width / 2, -player.height / 2, player.width, player.height);
            // Eye
            ctx.fillStyle = 'black';
            ctx.fillRect(5, -10, 10, 10);
            ctx.restore();

// Draw Obstacles (Spikes)
            ctx.fillStyle = '#ff0055';
            obstacles.forEach(obs => {
                ctx.beginPath();
                ctx.moveTo(obs.x, obs.y + obs.height);
                ctx.lineTo(obs.x + obs.width / 2, obs.y);
                ctx.lineTo(obs.x + obs.width, obs.y + obs.height);
                ctx.closePath();
                ctx.fill();
                ctx.strokeStyle = 'white';
                ctx.stroke();
            });
        }

spawnObstacle();
        update();

window.onresize = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };
    </script>
</body>
</html>

CSS