ज्योमेट्री डैश जावास्क्रिप्ट गेम क्लोन

489 codex

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

24 October 2025

माउस अनुयायी बिल्ली HTML CSS जावास्क्रिप्ट

15 January 2026

मिनी पोकेमॉन गेम HTML/JS: लड़ाई, सेव, मोबाइल

6 April 2025

अद्भुत जावास्क्रिप्ट संपादक

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>

अनुशंसित

माउस अनुयायी बिल्ली HTML CSS जावास्क्रिप्ट

मिनी पोकेमॉन गेम HTML/JS: लड़ाई, सेव, मोबाइल

अद्भुत जावास्क्रिप्ट संपादक

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS