HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
408x409
3 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>क्लासिक स्नेक गेम</title>
    <style>
        /* पूरे पेज की बनावट और बैकग्राउंड */
        body {
            background-color: #1a1a1a;
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        h1 {
            margin: 5px 0;
            color: #4CAF50;
            text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
        }

        /* आकर्षक स्कोरबोर्ड */
        #score-board {
            font-size: 24px;
            margin-bottom: 15px;
            font-weight: bold;
            background: #2d2d2d;
            padding: 10px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            border-left: 5px solid #4CAF50;
        }

        /* गेम खेलने का मैदान (Canvas) */
        #gameCanvas {
            background-color: #000000;
            border: 4px solid #4CAF50;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
        }

        /* गेम ओवर होने पर दिखने वाली स्क्रीन */
        #game-over-screen {
            display: none;
            position: absolute;
            background: rgba(0, 0, 0, 0.85);
            width: 400px;
            height: 400px;
            border-radius: 10px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        #game-over-screen h2 {
            color: #ff3333;
            font-size: 36px;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 51, 51, 0.5);
        }

        #game-over-screen p {
            font-size: 18px;
            margin-bottom: 20px;
        }

        /* रीस्टार्ट बटन */
        #restart-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.2s;
        }

        #restart-btn:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
    </style>
</head>
<body>

    <h1>स्नेक गेम (Snake Game)</h1>
    <!-- स्कोरबोर्ड -->
    <div id="score-board">स्कोर: <span id="score">0</span></div>

    <div style="position: relative;">
        <!-- गेम ओवर स्क्रीन -->
        <div id="game-over-screen">
            <h2>GAME OVER</h2>
            <p>आपका कुल स्कोर: <span id="final-score">0</span></p>
            <button id="restart-btn" onclick="resetGame()">फिर से खेलें</button>
        </div>
        <!-- गेम कैनवास -->
        <canvas id="gameCanvas" width="400" height="400"></canvas>
    </div>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const scoreElement = document.getElementById("score");
        const gameOverScreen = document.getElementById("game-over-screen");
        const finalScoreElement = document.getElementById("final-score");

        // गेम की बुनियादी सेटिंग्स
        const gridSize = 20; // एक ब्लॉक का साइज
        const tileCount = canvas.width / gridSize; // कुल ब्लॉकों की संख्या (20x20)
        
        let snake = []; // साँप के शरीर के हिस्सों की सूची
        let food = { x: 0, y: 0 }; // भोजन की स्थिति
        let dx = gridSize; // X-अक्ष पर गति की दिशा
        let dy = 0; // Y-अक्ष पर गति की दिशा
        let score = 0;
        let gameInterval;
        const gameSpeed = 100; // गेम की स्पीड (मिलीसेकंड में, जितना कम होगा गेम उतना तेज चलेगा)

        // गेम शुरू करने का मुख्य फंक्शन
        function startGame() {
            // साँप की शुरुआती स्थिति (बीच में)
            snake = [
                { x: 10 * gridSize, y: 10 * gridSize },
                { x: 9 * gridSize, y: 10 * gridSize },
                { x: 8 * gridSize, y: 10 * gridSize }
            ];
            dx = gridSize;
            dy = 0;
            score = 0;
            scoreElement.innerText = score;
            gameOverScreen.style.display = "none";
            generateFood();
            
            // पुराने इंटरवल को साफ करके नया लूप शुरू करना
            clearInterval(gameInterval);
            gameInterval = setInterval(updateGame, gameSpeed);
        }

        // हर 100ms में गेम को अपडेट करने वाला फंक्शन
        function updateGame() {
            if (checkGameOver()) {
                clearInterval(gameInterval);
                finalScoreElement.innerText = score;
                gameOverScreen.style.display = "flex";
                return;
            }

            clearCanvas();
            moveSnake();
            drawFood();
            drawSnake();
        }

        // स्क्रीन को साफ करना ताकि नई पोजीशन दिख सके
        function clearCanvas() {
            ctx.fillStyle = "#000000";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        // साँप को स्क्रीन पर बनाना
        function drawSnake() {
            snake.forEach((part, index) => {
                // साँप का सिर अलग रंग (हल्का हरा) और शरीर अलग रंग (गहरा हरा) का होगा
                ctx.fillStyle = index === 0 ? "#66bb6a" : "#4CAF50";
                ctx.strokeStyle = "#1a1a1a"; // ब्लॉकों के बीच की लाइन
                
                ctx.fillRect(part.x, part.y, gridSize, gridSize);
                ctx.strokeRect(part.x, part.y, gridSize, gridSize);
            });
        }

        // साँप को आगे बढ़ाना
        function moveSnake() {
            // नया सिर बनाना जहाँ साँप जा रहा है
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head); // नए सिर को सबसे आगे जोड़ना

            // चेक करना कि क्या साँप ने खाना खाया
            const hasEatenFood = snake[0].x === food.x && snake[0].y === food.y;
            if (hasEatenFood) {
                score += 10;
                scoreElement.innerText = score;
                generateFood(); // नया खाना बनाना
            } else {
                snake.pop(); // अगर खाना नहीं खाया, तो पूँछ का आखिरी हिस्सा हटाना (ताकि साइज न बढ़े)
            }
        }

        // रैंडम जगह पर खाना (लाल सेब) पैदा करना
        function generateFood() {
            food.x = Math.floor(Math.random() * tileCount) * gridSize;
            food.y = Math.floor(Math.random() * tileCount) * gridSize;

            // यह सुनिश्चित करना कि खाना साँप के शरीर के ऊपर न पैदा हो
            snake.forEach(part => {
                const hasEaten = part.x === food.x && part.y === food.y;
                if (hasEaten) generateFood();
            });
        }

        // खाने को स्क्रीन पर बनाना
        function drawFood() {
            ctx.fillStyle = "#ff3333"; // लाल रंग का भोजन
            ctx.shadowColor = "#ff3333";
            ctx.shadowBlur = 5; // चमकता हुआ इफेक्ट
            ctx.fillRect(food.x, food.y, gridSize, gridSize);
            ctx.shadowBlur = 0; // बाकी चीजों के लिए चमक बंद करना
        }

        // गेम ओवर की शर्तें चेक करना
        function checkGameOver() {
            // 1. दीवार से टकराना
            const hitLeftWall = snake[0].x < 0;
            const hitRightWall = snake[0].x >= canvas.width;
            const hitToptWall = snake[0].y < 0;
            const hitBottomWall = snake[0].y >= canvas.height;

            if (hitLeftWall || hitRightWall || hitToptWall || hitBottomWall) return true;

            // 2. खुद के शरीर से टकराना
            for (let i = 4; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
            }

            return false;
        }

        // कीबोर्ड के बटनों से साँप को मोड़ना
        document.addEventListener("keydown", changeDirection);

        function changeDirection(event) {
            const keyPressed = event.keyCode;
            
            // कीबोर्ड कीज के कोड्स
            const LEFT_KEY = 37;
            const UP_KEY = 38;
            const RIGHT_KEY = 39;
            const DOWN_KEY = 40;

            // साँप को उल्टी दिशा में तुरंत मुड़ने से रोकना (जैसे अगर दाएँ जा रहा है तो तुरंत बाएँ नहीं मुड़ सकता)
            const goingUp = dy === -gridSize;
            const goingDown = dy === gridSize;
            const goingRight = dx === gridSize;
            const goingLeft = dx === -gridSize;

            if (keyPressed === LEFT_KEY && !goingRight) { dx = -gridSize; dy = 0; }
            if (keyPressed === UP_KEY && !goingDown) { dx = 0; dy = -gridSize; }
            if (keyPressed === RIGHT_KEY && !goingLeft) { dx = gridSize; dy = 0; }
            if (keyPressed === DOWN_KEY && !goingUp) { dx = 0; dy = gridSize; }
        }

        // रीस्टार्ट बटन दबाने पर गेम दोबारा चालू करना
        function resetGame() {
            startGame();
        }

        // पेज लोड होते ही गेम अपने आप शुरू हो जाएगा
        startGame();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
12KB
Transfer Size
12KB
Content Size
83.0ms
Dom Content Loaded
196.0ms
First Paint
84.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests