{"id":3294,"date":"2025-02-24T22:25:26","date_gmt":"2025-02-24T18:55:26","guid":{"rendered":"https:\/\/www.epubfa.ir\/writer\/?p=3294"},"modified":"2025-02-24T22:30:54","modified_gmt":"2025-02-24T19:00:54","slug":"%d8%a8%d8%a7%d8%b2%db%8c-%d8%b3%d8%a7%d8%af%d9%87","status":"publish","type":"post","link":"https:\/\/www.epubfa.ir\/writer\/%d8%a8%d8%a7%d8%b2%db%8c-%d8%b3%d8%a7%d8%af%d9%87\/","title":{"rendered":"\u0628\u0627\u0632\u06cc \u0633\u0627\u062f\u0647"},"content":{"rendered":"\n    <div id=\"simple-game\" style=\"text-align: center; padding: 20px; border: 2px solid #0073aa; border-radius: 10px; background: #f0f8ff;\">\n        <h2>\u0628\u0627\u0632\u06cc \u0633\u0627\u062f\u0647<\/h2>\n        <p>\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627: <span id=\"score\">0<\/span><\/p>\n        <button id=\"increase-score\" style=\"padding: 10px 20px; background-color: #0073aa; color: white; border: none; border-radius: 5px; cursor: pointer;\">\n            \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0645\u062a\u06cc\u0627\u0632\n        <\/button>\n        <p><button id=\"reset-score\" style=\"padding: 10px 20px; background-color: #f44336; color: white; border: none; border-radius: 5px; cursor: pointer;\">\n            \u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06cc \u0627\u0645\u062a\u06cc\u0627\u0632\n        <\/button><\/p>\n        <p id=\"message\"><\/p>\n    <\/div>\n\n    <script>\n        \/\/ \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0627\u0645\u062a\u06cc\u0627\u0632 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 LocalStorage\n        if (localStorage.getItem('score') !== null) {\n            document.getElementById('score').textContent = localStorage.getItem('score');\n        }\n\n        document.getElementById('increase-score').addEventListener('click', function() {\n            let score = parseInt(document.getElementById('score').textContent);\n            score++;\n            document.getElementById('score').textContent = score;\n            localStorage.setItem('score', score);\n        });\n\n        document.getElementById('reset-score').addEventListener('click', function() {\n            localStorage.removeItem('score');\n            document.getElementById('score').textContent = '0';\n        });\n    <\/script>\n\n    \n    <style>\n      \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062a\u062e\u062a\u0647 \u0628\u0627\u0632\u06cc *\/\n      .snl-board {\n        display: grid;\n        grid-template-columns: repeat(10, 40px);\n        grid-auto-rows: 40px;\n        gap: 2px;\n        margin: 20px auto;\n        width: 422px; \/* 10*40 + 9*2 *\/\n      }\n      .snl-cell {\n        background: #f2f2f2;\n        border: 1px solid #ccc;\n        text-align: center;\n        line-height: 40px;\n        font-size: 12px;\n        position: relative;\n      }\n      .snl-player {\n        width: 20px;\n        height: 20px;\n        background: #0073aa;\n        border-radius: 50%;\n        position: absolute;\n        top: 0;\n        left: 0;\n        transform: translate(5px, 5px);\n      }\n      .snl-controls {\n        text-align: center;\n        margin: 10px;\n      }\n      .snl-controls button {\n        padding: 10px 20px;\n        font-size: 1em;\n        background: #0073aa;\n        color: #fff;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n        transition: background 0.3s;\n      }\n      .snl-controls button:hover {\n        background: #005780;\n      }\n    <\/style>\n\n    <div class=\"snl-game\">\n      <div class=\"snl-board\" id=\"snl-board\"><\/div>\n      <div class=\"snl-controls\">\n        <button id=\"rollDice\">\u0627\u0646\u062f\u0627\u062e\u062a \u062a\u0627\u0633<\/button>\n        <p id=\"diceResult\"><\/p>\n        <p>\u0645\u0648\u0642\u0639\u06cc\u062a: <span id=\"playerPos\">1<\/span><\/p>\n      <\/div>\n    <\/div>\n\n    <script>\n    (function(){\n      \/\/ \u0627\u06cc\u062c\u0627\u062f \u062a\u062e\u062a\u0647 \u0628\u0627\u0632\u06cc (\u0634\u0645\u0627\u0631\u0647 \u06f1 \u062a\u0627 \u06f1\u06f0\u06f0)\n      var boardEl = document.getElementById('snl-board');\n      var cells = [];\n      for(var i=1; i<=100; i++){\n         cells.push(i);\n      }\n      \/\/ \u062f\u0631 \u0628\u0627\u0632\u06cc \u0645\u0627\u0631 \u0648 \u067e\u0644\u0647 \u0631\u062f\u06cc\u0641\u200c\u0647\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u062c\u0647\u062a\u200c\u0647\u0627 \u0645\u0639\u06a9\u0648\u0633 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.\n      var boardHTML = \"\";\n      for(var row=9; row>=0; row--){\n         var rowCells = cells.slice(row*10, row*10+10);\n         if(row % 2 !== 0){\n             rowCells.reverse();\n         }\n         rowCells.forEach(function(cellNumber){\n             boardHTML += '<div class=\"snl-cell\" id=\"cell-' + cellNumber + '\">'+ cellNumber +'<\/div>';\n         });\n      }\n      boardEl.innerHTML = boardHTML;\n\n      \/\/ \u0645\u0648\u0642\u0639\u06cc\u062a \u0627\u0648\u0644\u06cc\u0647 \u0628\u0627\u0632\u06cc\u06a9\u0646\n      var playerPos = 1;\n      var playerEl = document.createElement('div');\n      playerEl.className = 'snl-player';\n      document.getElementById('cell-1').appendChild(playerEl);\n      document.getElementById('playerPos').textContent = playerPos;\n\n      \/\/ \u062a\u0639\u0631\u06cc\u0641 \u067e\u0644\u0647\u200c\u0647\u0627 \u0648 \u0645\u0627\u0631\u0647\u0627 (\u0646\u0642\u0634\u0647 \u0628\u0627\u0632\u06cc)\n      var ladders = {2:38, 7:14, 8:31, 15:26, 21:42, 28:84, 36:44, 51:67, 71:91, 78:98};\n      var snakes  = {16:6, 46:25, 49:11, 62:19, 64:60, 74:53, 89:68, 92:88, 95:75, 99:80};\n\n      function movePlayer(newPos) {\n         \/\/ \u062d\u0630\u0641 \u0646\u0634\u0627\u0646 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0627\u0632 \u062e\u0627\u0646\u0647 \u0641\u0639\u0644\u06cc\n         var currentCell = document.getElementById('cell-' + playerPos);\n         if(currentCell && currentCell.contains(playerEl)){\n             currentCell.removeChild(playerEl);\n         }\n         playerPos = newPos;\n         \/\/ \u0628\u0631\u0631\u0633\u06cc \u0648\u062c\u0648\u062f \u067e\u0644\u0647 \u06cc\u0627 \u0645\u0627\u0631\n         if(ladders[playerPos]){\n             playerPos = ladders[playerPos];\n         } else if(snakes[playerPos]){\n             playerPos = snakes[playerPos];\n         }\n         \/\/ \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0645\u062c\u062f\u062f \u0646\u0634\u0627\u0646 \u0628\u0627\u0632\u06cc\u06a9\u0646 \u062f\u0631 \u062e\u0627\u0646\u0647 \u062c\u062f\u06cc\u062f\n         document.getElementById('cell-' + playerPos).appendChild(playerEl);\n         document.getElementById('playerPos').textContent = playerPos;\n         \/\/ \u062f\u0631 \u0635\u0648\u0631\u062a \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 100\u060c \u0628\u0631\u0646\u062f\u0647 \u0627\u0639\u0644\u0627\u0645 \u0634\u0648\u062f\n         if(playerPos >= 100){\n             alert(\"\u062a\u0628\u0631\u06cc\u06a9! \u0634\u0645\u0627 \u0628\u0647 \u062e\u0627\u0646\u0647 100 \u0631\u0633\u06cc\u062f\u06cc\u062f!\");\n         }\n      }\n\n      document.getElementById('rollDice').addEventListener('click', function(){\n         var dice = Math.floor(Math.random() * 6) + 1;\n         document.getElementById('diceResult').textContent = \"\u0646\u062a\u06cc\u062c\u0647 \u062a\u0627\u0633: \" + dice;\n         var newPos = playerPos + dice;\n         if(newPos > 100) {\n             \/\/ \u0627\u06af\u0631 \u062d\u0631\u06a9\u062a \u0627\u0632 100 \u0641\u0631\u0627\u062a\u0631 \u0631\u0648\u062f\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06a9\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u0648\u062f\n             return;\n         }\n         movePlayer(newPos);\n      });\n    })();\n    <\/script>\n    \n    <style>\n        \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u0632\u06cc *\/\n        #spaceShooterGame {\n            background: black;\n            display: block;\n            margin: 0 auto;\n            border: 2px solid #00f;\n        }\n        .game-info {\n            text-align: center;\n            color: #fff;\n            font-family: sans-serif;\n            margin-bottom: 10px;\n        }\n        .game-controls {\n            text-align: center;\n            margin-top: 10px;\n        }\n        .game-controls button {\n            padding: 10px 20px;\n            font-size: 16px;\n            background: #0073aa;\n            color: #fff;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            margin: 0 5px;\n            transition: background 0.3s;\n        }\n        .game-controls button:hover {\n            background: #005780;\n        }\n    <\/style>\n\n    <div class=\"game-info\">\n        <h2>Space Shooter Game<\/h2>\n        <p>\u0627\u0645\u062a\u06cc\u0627\u0632: <span id=\"score\">0<\/span> | \u062c\u0627\u0646: <span id=\"lives\">3<\/span><\/p>\n    <\/div>\n    <canvas id=\"spaceShooterGame\" width=\"480\" height=\"320\"><\/canvas>\n    <div class=\"game-controls\">\n        <button id=\"startGame\">\u0634\u0631\u0648\u0639 \u0628\u0627\u0632\u06cc<\/button>\n        <button id=\"pauseGame\">\u0645\u06a9\u062b \u0628\u0627\u0632\u06cc<\/button>\n        <button id=\"resetGame\">\u0631\u06cc\u0633\u062a \u0628\u0627\u0632\u06cc<\/button>\n    <\/div>\n\n    <script>\n    (function() {\n        var canvas = document.getElementById(\"spaceShooterGame\"),\n            ctx = canvas.getContext(\"2d\"),\n            scoreEl = document.getElementById(\"score\"),\n            livesEl = document.getElementById(\"lives\"),\n            startButton = document.getElementById(\"startGame\"),\n            pauseButton = document.getElementById(\"pauseGame\"),\n            resetButton = document.getElementById(\"resetGame\");\n\n        var gameInterval, enemyInterval;\n        var player, enemies = [], bullets = [];\n        var score = 0, lives = 3, gamePaused = false;\n\n        \/\/ \u0634\u06cc \u0628\u0627\u0632\u06cc\u06a9\u0646\n        function Player() {\n            this.width = 40;\n            this.height = 20;\n            this.x = canvas.width \/ 2 - this.width \/ 2;\n            this.y = canvas.height - this.height - 10;\n            this.speed = 5;\n        }\n        Player.prototype.draw = function() {\n            ctx.fillStyle = \"#0f0\";\n            ctx.fillRect(this.x, this.y, this.width, this.height);\n        }\n        Player.prototype.move = function(dir) {\n            if (dir === \"left\" && this.x > 0) {\n                this.x -= this.speed;\n            } else if (dir === \"right\" && this.x + this.width < canvas.width) {\n                this.x += this.speed;\n            }\n        }\n\n        \/\/ \u0634\u06cc \u06af\u0644\u0648\u0644\u0647\n        function Bullet(x, y) {\n            this.x = x;\n            this.y = y;\n            this.radius = 3;\n            this.speed = 7;\n        }\n        Bullet.prototype.draw = function() {\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n            ctx.fillStyle = \"#ff0\";\n            ctx.fill();\n            ctx.closePath();\n        }\n        Bullet.prototype.update = function() {\n            this.y -= this.speed;\n        }\n\n        \/\/ \u0634\u06cc \u062f\u0634\u0645\u0646\n        function Enemy(x, y) {\n            this.width = 40;\n            this.height = 20;\n            this.x = x;\n            this.y = y;\n            this.speed = 2;\n        }\n        Enemy.prototype.draw = function() {\n            ctx.fillStyle = \"#f00\";\n            ctx.fillRect(this.x, this.y, this.width, this.height);\n        }\n        Enemy.prototype.update = function() {\n            this.y += this.speed;\n        }\n\n        \/\/ \u062a\u0627\u0628\u0639 \u0627\u06cc\u062c\u0627\u062f \u062f\u0634\u0645\u0646\n        function spawnEnemy() {\n            var x = Math.random() * (canvas.width - 40);\n            enemies.push(new Enemy(x, 0));\n        }\n\n        \/\/ \u0631\u0633\u0645 \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0628\u0627\u0632\u06cc\n        function drawGame() {\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n            player.draw();\n\n            bullets.forEach(function(bullet) {\n                bullet.draw();\n                bullet.update();\n            });\n\n            enemies.forEach(function(enemy) {\n                enemy.draw();\n                enemy.update();\n            });\n\n            \/\/ \u062a\u0634\u062e\u06cc\u0635 \u0628\u0631\u062e\u0648\u0631\u062f \u06af\u0644\u0648\u0644\u0647 \u0628\u0627 \u062f\u0634\u0645\u0646\n            for (var i = enemies.length - 1; i >= 0; i--) {\n                for (var j = bullets.length - 1; j >= 0; j--) {\n                    var e = enemies[i],\n                        b = bullets[j];\n                    if (b.x > e.x && b.x < e.x + e.width && b.y > e.y && b.y < e.y + e.height) {\n                        enemies.splice(i, 1);\n                        bullets.splice(j, 1);\n                        score += 10;\n                        scoreEl.textContent = score;\n                        break;\n                    }\n                }\n            }\n\n            \/\/ \u0686\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0633\u06cc\u062f\u0646 \u062f\u0634\u0645\u0646 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0635\u0641\u062d\u0647\n            for (var i = enemies.length - 1; i >= 0; i--) {\n                if (enemies[i].y + enemies[i].height > canvas.height) {\n                    enemies.splice(i, 1);\n                    lives--;\n                    livesEl.textContent = lives;\n                    if (lives <= 0) {\n                        gameOver();\n                    }\n                }\n            }\n        }\n\n        \/\/ \u062d\u0644\u0642\u0647 \u0628\u0627\u0632\u06cc\n        function gameLoop() {\n            if (!gamePaused) {\n                drawGame();\n            }\n        }\n\n        \/\/ \u0634\u0631\u0648\u0639 \u0628\u0627\u0632\u06cc\n        function startGame() {\n            if (gameInterval) return;\n            player = new Player();\n            score = 0;\n            lives = 3;\n            scoreEl.textContent = score;\n            livesEl.textContent = lives;\n            enemies = [];\n            bullets = [];\n            gamePaused = false;\n            gameInterval = setInterval(gameLoop, 30);\n            enemyInterval = setInterval(spawnEnemy, 1000);\n        }\n\n        \/\/ \u0645\u06a9\u062b \u0648 \u0627\u062f\u0627\u0645\u0647 \u0628\u0627\u0632\u06cc\n        function pauseGame() {\n            gamePaused = !gamePaused;\n            if (gamePaused) {\n                clearInterval(enemyInterval);\n                pauseButton.textContent = \"\u0627\u062f\u0627\u0645\u0647 \u0628\u0627\u0632\u06cc\";\n            } else {\n                enemyInterval = setInterval(spawnEnemy, 1000);\n                pauseButton.textContent = \"\u0645\u06a9\u062b \u0628\u0627\u0632\u06cc\";\n            }\n        }\n\n        \/\/ \u0631\u06cc\u0633\u062a \u0628\u0627\u0632\u06cc\n        function resetGame() {\n            clearInterval(gameInterval);\n            clearInterval(enemyInterval);\n            gameInterval = null;\n            enemyInterval = null;\n            gamePaused = false;\n            player = null;\n            enemies = [];\n            bullets = [];\n            score = 0;\n            lives = 3;\n            scoreEl.textContent = score;\n            livesEl.textContent = lives;\n            pauseButton.textContent = \"\u0645\u06a9\u062b \u0628\u0627\u0632\u06cc\";\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n\n        function gameOver() {\n            alert(\"\u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f! \u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627: \" + score);\n            resetGame();\n        }\n\n        \/\/ \u06a9\u0646\u062a\u0631\u0644 \u0635\u0641\u062d\u0647\u200c\u06a9\u0644\u06cc\u062f \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0628\u0627\u0632\u06cc\u06a9\u0646 \u0648 \u0634\u0644\u06cc\u06a9 \u06af\u0644\u0648\u0644\u0647\n        document.addEventListener(\"keydown\", function(e) {\n            if (e.key === \"ArrowLeft\") {\n                player.move(\"left\");\n            } else if (e.key === \"ArrowRight\") {\n                player.move(\"right\");\n            } else if (e.key === \" \") {\n                var bullet = new Bullet(player.x + player.width \/ 2, player.y);\n                bullets.push(bullet);\n            }\n        });\n\n        startButton.addEventListener(\"click\", startGame);\n        pauseButton.addEventListener(\"click\", pauseGame);\n        resetButton.addEventListener(\"click\", resetGame);\n    })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"class_list":["post-3294","post","type-post","status-publish","format-standard","","category-50"],"_links":{"self":[{"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/posts\/3294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/comments?post=3294"}],"version-history":[{"count":3,"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/posts\/3294\/revisions"}],"predecessor-version":[{"id":3297,"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/posts\/3294\/revisions\/3297"}],"wp:attachment":[{"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/media?parent=3294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/categories?post=3294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.epubfa.ir\/writer\/wp-json\/wp\/v2\/tags?post=3294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}