{"id":268,"date":"2026-08-25T01:02:18","date_gmt":"2026-08-24T21:32:18","guid":{"rendered":"https:\/\/mtgrayli.yclass.ir\/wordpress\/?page_id=268"},"modified":"2026-08-25T01:02:49","modified_gmt":"2026-08-24T21:32:49","slug":"nexus-snake-%f0%9f%90%8d","status":"publish","type":"page","link":"https:\/\/mtgrayli.yclass.ir\/wordpress\/nexus-snake-%f0%9f%90%8d\/","title":{"rendered":"Nexus Snake \ud83d\udc0d"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"268\" class=\"elementor elementor-268\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5a4e99 e-flex e-con-boxed e-con e-parent\" data-id=\"d5a4e99\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3428b0 elementor-widget elementor-widget-shortcode\" data-id=\"d3428b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div id=\"nexus-snake-game\">\n\n        <div class=\"nexus-snake-header\">\n\n            <div>\n                <strong>NEXUS SNAKE<\/strong>\n            <\/div>\n\n            <div>\n                \u0627\u0645\u062a\u06cc\u0627\u0632:\n                <span id=\"nexus-snake-score\">0<\/span>\n            <\/div>\n\n        <\/div>\n\n        <canvas\n            id=\"nexus-snake-canvas\"\n            width=\"400\"\n            height=\"400\">\n        <\/canvas>\n\n        <div class=\"nexus-snake-controls\">\n\n            <button id=\"snake-up\">\u25b2<\/button>\n\n            <div>\n                <button id=\"snake-left\">\u25c0<\/button>\n                <button id=\"snake-down\">\u25bc<\/button>\n                <button id=\"snake-right\">\u25b6<\/button>\n            <\/div>\n\n        <\/div>\n\n        <button\n            id=\"nexus-snake-start\">\n            \u0634\u0631\u0648\u0639 \u0628\u0627\u0632\u06cc\n        <\/button>\n\n        <div id=\"nexus-snake-message\"><\/div>\n\n    <\/div>\n\n\n    <style>\n\n    #nexus-snake-game {\n\n        max-width:480px;\n        margin:30px auto;\n        padding:20px;\n        background:#fff;\n        border-radius:20px;\n\n        box-shadow:\n            0 5px 25px\n            rgba(0,0,0,.08);\n\n        text-align:center;\n        direction:rtl;\n\n        font-family:\n            Tahoma,\n            Arial,\n            sans-serif;\n\n        box-sizing:border-box;\n    }\n\n\n    .nexus-snake-header {\n\n        display:flex;\n\n        justify-content:\n            space-between;\n\n        align-items:center;\n\n        margin-bottom:15px;\n\n        font-size:15px;\n    }\n\n\n    #nexus-snake-canvas {\n\n        display:block;\n\n        width:100%;\n        max-width:400px;\n        height:auto;\n\n        margin:auto;\n\n        background:#111;\n\n        border-radius:12px;\n\n        touch-action:none;\n    }\n\n\n    #nexus-snake-start {\n\n        margin-top:18px;\n\n        padding:11px 28px;\n\n        border:none;\n\n        border-radius:10px;\n\n        background:#111;\n\n        color:#fff;\n\n        cursor:pointer;\n\n        font-family:inherit;\n\n        font-weight:bold;\n    }\n\n\n    #nexus-snake-start:hover {\n\n        opacity:.85;\n    }\n\n\n    .nexus-snake-controls {\n\n        margin-top:18px;\n    }\n\n\n    .nexus-snake-controls button {\n\n        width:52px;\n        height:45px;\n\n        margin:3px;\n\n        border:none;\n\n        border-radius:10px;\n\n        background:#eee;\n\n        font-size:18px;\n\n        cursor:pointer;\n\n        touch-action:manipulation;\n    }\n\n\n    .nexus-snake-controls button:active {\n\n        transform:scale(.94);\n    }\n\n\n    #nexus-snake-message {\n\n        margin-top:12px;\n\n        min-height:20px;\n\n        font-size:13px;\n\n        color:#777;\n    }\n\n\n    @media(max-width:500px) {\n\n        #nexus-snake-game {\n\n            margin:15px 8px;\n            padding:14px;\n        }\n\n        .nexus-snake-controls button {\n\n            width:48px;\n            height:42px;\n        }\n\n    }\n\n    <\/style>\n\n\n    <script>\n\n    document.addEventListener(\n        'DOMContentLoaded',\n        function () {\n\n            const canvas =\n                document.getElementById(\n                    'nexus-snake-canvas'\n                );\n\n            const ctx =\n                canvas.getContext('2d');\n\n            const scoreElement =\n                document.getElementById(\n                    'nexus-snake-score'\n                );\n\n            const startButton =\n                document.getElementById(\n                    'nexus-snake-start'\n                );\n\n            const message =\n                document.getElementById(\n                    'nexus-snake-message'\n                );\n\n\n            const grid = 20;\n\n            const tile = 20;\n\n\n            let snake;\n\n            let food;\n\n            let direction;\n\n            let nextDirection;\n\n            let score;\n\n            let gameRunning = false;\n\n            let gameLoop;\n\n            let scoreSubmitted = false;\n\n\n            function resetGame() {\n\n                snake = [\n\n                    {\n                        x:200,\n                        y:200\n                    },\n\n                    {\n                        x:180,\n                        y:200\n                    },\n\n                    {\n                        x:160,\n                        y:200\n                    }\n\n                ];\n\n\n                direction = {\n                    x:1,\n                    y:0\n                };\n\n\n                nextDirection = {\n                    x:1,\n                    y:0\n                };\n\n\n                score = 0;\n\n                scoreSubmitted = false;\n\n\n                scoreElement.textContent =\n                    score;\n\n\n                createFood();\n\n                draw();\n\n            }\n\n\n            function createFood() {\n\n                let valid = false;\n\n\n                while (!valid) {\n\n                    food = {\n\n                        x:\n                            Math.floor(\n                                Math.random() *\n                                grid\n                            ) * tile,\n\n                        y:\n                            Math.floor(\n                                Math.random() *\n                                grid\n                            ) * tile\n\n                    };\n\n\n                    valid =\n                        !snake.some(\n                            part =>\n                                part.x === food.x &&\n                                part.y === food.y\n                        );\n\n                }\n\n            }\n\n\n            function draw() {\n\n                ctx.fillStyle =\n                    '#111';\n\n                ctx.fillRect(\n                    0,\n                    0,\n                    canvas.width,\n                    canvas.height\n                );\n\n\n                ctx.fillStyle =\n                    '#ff3b30';\n\n\n                ctx.beginPath();\n\n\n                ctx.arc(\n                    food.x + 10,\n                    food.y + 10,\n                    8,\n                    0,\n                    Math.PI * 2\n                );\n\n\n                ctx.fill();\n\n\n                snake.forEach(\n                    (part, index) => {\n\n                        ctx.fillStyle =\n                            index === 0\n                                ? '#ffffff'\n                                : '#777';\n\n\n                        ctx.fillRect(\n                            part.x + 1,\n                            part.y + 1,\n                            tile - 2,\n                            tile - 2\n                        );\n\n                    }\n                );\n\n            }\n\n\n            function update() {\n\n                direction =\n                    nextDirection;\n\n\n                const head = {\n\n                    x:\n                        snake[0].x +\n                        direction.x * tile,\n\n                    y:\n                        snake[0].y +\n                        direction.y * tile\n\n                };\n\n\n                if (\n                    head.x < 0 ||\n                    head.x >= canvas.width ||\n                    head.y < 0 ||\n                    head.y >= canvas.height\n                ) {\n\n                    gameOver();\n\n                    return;\n\n                }\n\n\n                if (\n                    snake.some(\n                        part =>\n                            part.x === head.x &&\n                            part.y === head.y\n                    )\n                ) {\n\n                    gameOver();\n\n                    return;\n\n                }\n\n\n                snake.unshift(head);\n\n\n                if (\n                    head.x === food.x &&\n                    head.y === food.y\n                ) {\n\n                    score += 10;\n\n\n                    scoreElement.textContent =\n                        score;\n\n\n                    createFood();\n\n                }\n\n                else {\n\n                    snake.pop();\n\n                }\n\n\n                draw();\n\n            }\n\n\n            function startGame() {\n\n                clearInterval(gameLoop);\n\n\n                resetGame();\n\n\n                gameRunning = true;\n\n\n                message.textContent =\n                    '';\n\n\n                startButton.textContent =\n                    '\u0634\u0631\u0648\u0639 \u062f\u0648\u0628\u0627\u0631\u0647';\n\n\n                gameLoop =\n                    setInterval(\n                        update,\n                        120\n                    );\n\n            }\n\n\n            function submitScore() {\n\n                if (scoreSubmitted) {\n                    return;\n                }\n\n\n                scoreSubmitted = true;\n\n\n                \n                message.textContent =\n                    '\ud83c\udfae \u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f! \u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627: ' +\n                    score +\n                    ' | \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0627\u0645\u062a\u06cc\u0627\u0632 \u0648\u0627\u0631\u062f \u062d\u0633\u0627\u0628 \u0634\u0648\u06cc\u062f.';\n\n                \n            }\n\n\n            function gameOver() {\n\n                gameRunning = false;\n\n                clearInterval(gameLoop);\n\n                submitScore();\n\n            }\n\n\n            function changeDirection(x, y) {\n\n                if (!gameRunning) {\n                    return;\n                }\n\n\n                if (\n                    direction.x + x === 0 &&\n                    direction.y + y === 0\n                ) {\n\n                    return;\n\n                }\n\n\n                nextDirection = {\n                    x:x,\n                    y:y\n                };\n\n            }\n\n\n            document.addEventListener(\n                'keydown',\n                function (event) {\n\n                    if (\n                        event.key === 'ArrowUp' ||\n                        event.key.toLowerCase() === 'w'\n                    ) {\n\n                        changeDirection(\n                            0,\n                            -1\n                        );\n\n                    }\n\n                    else if (\n                        event.key === 'ArrowDown' ||\n                        event.key.toLowerCase() === 's'\n                    ) {\n\n                        changeDirection(\n                            0,\n                            1\n                        );\n\n                    }\n\n                    else if (\n                        event.key === 'ArrowLeft' ||\n                        event.key.toLowerCase() === 'a'\n                    ) {\n\n                        changeDirection(\n                            -1,\n                            0\n                        );\n\n                    }\n\n                    else if (\n                        event.key === 'ArrowRight' ||\n                        event.key.toLowerCase() === 'd'\n                    ) {\n\n                        changeDirection(\n                            1,\n                            0\n                        );\n\n                    }\n\n                }\n            );\n\n\n            document\n                .getElementById('snake-up')\n                .onclick =\n                    () =>\n                        changeDirection(\n                            0,\n                            -1\n                        );\n\n\n            document\n                .getElementById('snake-down')\n                .onclick =\n                    () =>\n                        changeDirection(\n                            0,\n                            1\n                        );\n\n\n            \/*\n             * \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0686\u067e \u0648 \u0631\u0627\u0633\u062a\n             * \u0645\u0637\u0627\u0628\u0642 \u0646\u0633\u062e\u0647 \u0641\u0639\u0644\u06cc \u0628\u0627\u0632\u06cc\n             *\/\n\n            document\n                .getElementById('snake-left')\n                .onclick =\n                    () =>\n                        changeDirection(\n                            1,\n                            0\n                        );\n\n\n            document\n                .getElementById('snake-right')\n                .onclick =\n                    () =>\n                        changeDirection(\n                            -1,\n                            0\n                        );\n\n\n            startButton.onclick =\n                startGame;\n\n\n            resetGame();\n\n        }\n\n    );\n\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-268","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/pages\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":3,"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/pages\/268\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/pages\/268\/revisions\/271"}],"wp:attachment":[{"href":"https:\/\/mtgrayli.yclass.ir\/wordpress\/wp-json\/wp\/v2\/media?parent=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}