{"id":7184,"date":"2024-07-16T23:30:49","date_gmt":"2024-07-16T20:30:49","guid":{"rendered":"https:\/\/digitalrise.art\/?page_id=7184"},"modified":"2024-07-17T00:02:11","modified_gmt":"2024-07-16T21:02:11","slug":"%d7%a6%d7%99%d7%a4%d7%95%d7%a8","status":"publish","type":"page","link":"https:\/\/digitalrise.art\/?page_id=7184","title":{"rendered":"\u05e6\u05d9\u05e4\u05d5\u05e8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Flappy Bird<\/title>\r\n <style>\r\n body {\r\n margin: 0;\r\n overflow: hidden;\r\n font-family: Arial, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n background-color: #4ec0ca;\r\n }\r\n #game-container {\r\n width: 320px;\r\n height: 480px;\r\n background: linear-gradient(#E0F6FF, #87CEEB);\r\n position: relative;\r\n overflow: hidden;\r\n border: 4px solid #000;\r\n border-radius: 10px;\r\n }\r\n #bird {\r\n width: 40px;\r\n height: 40px;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><path fill=\"%231E90FF\" d=\"M50 15c-19.33 0-35 15.67-35 35s15.67 35 35 35 35-15.67 35-35-15.67-35-35-35zm15 35c0 8.28-6.72 15-15 15s-15-6.72-15-15 6.72-15 15-15 15 6.72 15 15z\"\/><circle fill=\"%23FFF\" cx=\"58\" cy=\"45\" r=\"6\"\/><\/svg>') no-repeat center center;\r\n background-size: contain;\r\n position: absolute;\r\n transition: transform 0.1s;\r\n }\r\n .obstacle {\r\n width: 60px;\r\n position: absolute;\r\n background: linear-gradient(90deg, #4CAF50, #45a049);\r\n border: 3px solid #000;\r\n }\r\n #score {\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n font-size: 32px;\r\n font-weight: bold;\r\n color: #FFD700;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\r\n }\r\n #start-screen, #game-over-screen {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n color: white;\r\n }\r\n button {\r\n font-size: 18px;\r\n padding: 10px 20px;\r\n margin-top: 20px;\r\n cursor: pointer;\r\n background-color: #4CAF50;\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n transition: background-color 0.3s;\r\n }\r\n button:hover {\r\n background-color: #45a049;\r\n }\r\n #mobile-controls {\r\n display: none;\r\n position: fixed;\r\n bottom: 20px;\r\n left: 20px;\r\n right: 20px;\r\n justify-content: space-between;\r\n }\r\n .control-button {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 24px;\r\n background-color: rgba(255, 255, 255, 0.5);\r\n border: none;\r\n border-radius: 50%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n @media (max-width: 600px) {\r\n #game-container {\r\n width: 100vw;\r\n height: 100vh;\r\n border: none;\r\n border-radius: 0;\r\n }\r\n #mobile-controls {\r\n display: flex;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"game-container\">\r\n <div id=\"bird\"><\/div>\r\n <div id=\"score\">0<\/div>\r\n <div id=\"start-screen\">\r\n <h1>Flappy Bird \u05d4\u05e4\u05d5\u05da<\/h1>\r\n <button id=\"start-button\">\u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7<\/button>\r\n <\/div>\r\n <div id=\"game-over-screen\" style=\"display: none;\">\r\n <h1>Game Over<\/h1>\r\n <p>\u05d4\u05e0\u05d9\u05e7\u05d5\u05d3 \u05e9\u05dc\u05da: <span id=\"final-score\"><\/span><\/p>\r\n <button id=\"restart-button\">\u05d4\u05ea\u05d7\u05dc \u05de\u05d7\u05d3\u05e9<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"mobile-controls\">\r\n <button class=\"control-button\" id=\"left-btn\">\u25c0<\/button>\r\n <button class=\"control-button\" id=\"right-btn\">\u25b6<\/button>\r\n <\/div>\r\n\r\n <script>\r\n const bird = document.getElementById('bird');\r\n const gameContainer = document.getElementById('game-container');\r\n const scoreDisplay = document.getElementById('score');\r\n const startScreen = document.getElementById('start-screen');\r\n const gameOverScreen = document.getElementById('game-over-screen');\r\n const startButton = document.getElementById('start-button');\r\n const restartButton = document.getElementById('restart-button');\r\n const finalScoreDisplay = document.getElementById('final-score');\r\n const leftBtn = document.getElementById('left-btn');\r\n const rightBtn = document.getElementById('right-btn');\r\n\r\n let birdX, birdY, birdSpeed, score, gameLoop, obstacles, isGameRunning;\r\n\r\n function initGame() {\r\n birdX = gameContainer.clientWidth \/ 2 - 20;\r\n birdY = gameContainer.clientHeight - 60;\r\n birdSpeed = 2;\r\n score = 0;\r\n obstacles = [];\r\n isGameRunning = false;\r\n\r\n bird.style.left = birdX + 'px';\r\n bird.style.top = birdY + 'px';\r\n scoreDisplay.textContent = '0';\r\n }\r\n\r\n function startGame() {\r\n if (isGameRunning) return;\r\n isGameRunning = true;\r\n startScreen.style.display = 'none';\r\n gameOverScreen.style.display = 'none';\r\n initGame();\r\n gameLoop = setInterval(update, 20);\r\n setTimeout(createObstacle, 1500);\r\n }\r\n\r\n function update() {\r\n birdY -= birdSpeed;\r\n if (birdY < 0) {\r\n gameOver();\r\n return;\r\n }\r\n updateBirdPosition();\r\n\r\n obstacles.forEach(obstacle => {\r\n obstacle.y += 2;\r\n if (obstacle.y > gameContainer.clientHeight) {\r\n obstacles = obstacles.filter(o => o !== obstacle);\r\n gameContainer.removeChild(obstacle.element);\r\n score++;\r\n scoreDisplay.textContent = score;\r\n }\r\n updateObstaclePosition(obstacle);\r\n checkCollision(obstacle);\r\n });\r\n }\r\n\r\n function updateBirdPosition() {\r\n bird.style.top = birdY + 'px';\r\n bird.style.left = birdX + 'px';\r\n }\r\n\r\n function createObstacle() {\r\n if (!isGameRunning) return;\r\n const gap = 150;\r\n const obstacleLeft = Math.random() * (gameContainer.clientWidth - 60);\r\n\r\n const obstacleElement = document.createElement('div');\r\n obstacleElement.className = 'obstacle';\r\n obstacleElement.style.left = obstacleLeft + 'px';\r\n obstacleElement.style.height = gap + 'px';\r\n\r\n const obstacle = {\r\n element: obstacleElement,\r\n x: obstacleLeft,\r\n y: -gap\r\n };\r\n\r\n obstacles.push(obstacle);\r\n gameContainer.appendChild(obstacleElement);\r\n\r\n setTimeout(createObstacle, 1500);\r\n }\r\n\r\n function updateObstaclePosition(obstacle) {\r\n obstacle.element.style.top = obstacle.y + 'px';\r\n }\r\n\r\n function checkCollision(obstacle) {\r\n const birdRect = bird.getBoundingClientRect();\r\n const obstacleRect = obstacle.element.getBoundingClientRect();\r\n\r\n if (\r\n birdRect.left < obstacleRect.right &&\r\n birdRect.right > obstacleRect.left &&\r\n birdRect.top < obstacleRect.bottom &&\r\n birdRect.bottom > obstacleRect.top\r\n ) {\r\n gameOver();\r\n }\r\n }\r\n\r\n function gameOver() {\r\n isGameRunning = false;\r\n clearInterval(gameLoop);\r\n finalScoreDisplay.textContent = score;\r\n gameOverScreen.style.display = 'flex';\r\n }\r\n\r\n function moveBird(direction) {\r\n if (!isGameRunning) return;\r\n birdX += direction * 5;\r\n birdX = Math.max(0, Math.min(birdX, gameContainer.clientWidth - 40));\r\n updateBirdPosition();\r\n }\r\n\r\n startButton.addEventListener('click', startGame);\r\n restartButton.addEventListener('click', startGame);\r\n document.addEventListener('keydown', (e) => {\r\n if (e.code === 'ArrowLeft') {\r\n moveBird(-1);\r\n } else if (e.code === 'ArrowRight') {\r\n moveBird(1);\r\n } else if (e.code === 'Space') {\r\n if (!isGameRunning) {\r\n startGame();\r\n }\r\n }\r\n });\r\n\r\n leftBtn.addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n moveBird(-1);\r\n });\r\n\r\n rightBtn.addEventListener('touchstart', (e) => {\r\n e.preventDefault();\r\n moveBird(1);\r\n });\r\n\r\n initGame();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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":"<p>Flappy Bird 0 Flappy Bird \u05d4\u05e4\u05d5\u05da \u05d4\u05ea\u05d7\u05dc \u05de\u05e9\u05d7\u05e7 Game Over \u05d4\u05e0\u05d9\u05e7\u05d5\u05d3 \u05e9\u05dc\u05da: \u05d4\u05ea\u05d7\u05dc \u05de\u05d7\u05d3\u05e9 \u25c0 \u25b6<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"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-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-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-gradient":""}},"ast-content-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-gradient":""},"tablet":{"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-gradient":""},"mobile":{"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-gradient":""}},"footnotes":""},"class_list":["post-7184","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7184"}],"version-history":[{"count":13,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7184\/revisions"}],"predecessor-version":[{"id":7198,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/7184\/revisions\/7198"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}