{"id":3138,"date":"2024-07-10T22:00:48","date_gmt":"2024-07-10T22:00:48","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=3138"},"modified":"2024-08-01T23:08:45","modified_gmt":"2024-08-01T23:08:45","slug":"moonpatrol","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/moonpatrol\/","title":{"rendered":"Moon Patrol"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3138\" class=\"elementor elementor-3138\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f37f6fe e-con-full e-flex e-con e-parent\" data-id=\"1f37f6fe\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-275e9e33 elementor-widget elementor-widget-spacer\" data-id=\"275e9e33\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-215719de elementor-widget elementor-widget-heading\" data-id=\"215719de\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Moon Patrol<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-132ff88 elementor-widget elementor-widget-heading\" data-id=\"132ff88\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">( abandoned game )<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34b329b9 elementor-widget elementor-widget-html\" data-id=\"34b329b9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Silkscreen&display=swap\" rel=\"stylesheet\">\n\n<div class=\"parallax-container\" tabindex=\"0\">\n    <div id=\"background\" class=\"parallax-layer\"><\/div>\n    <div id=\"foreground\" class=\"parallax-layer\"><\/div>\n    <div id=\"player\"><\/div>\n    <div id=\"shield\"><\/div>\n    <button id=\"startButton\">Start Game<\/button>\n    <div id=\"scoreDisplay\">Score: 0<\/div>\n    <div id=\"livesDisplay\">Lives: 3<\/div>\n    <div id=\"shieldReloadBar\">\n        <div>Shield Reload<\/div>\n        <div class=\"progress-bar\">\n            <div class=\"progress\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    body {\n        font-family: 'Silkscreen', cursive;\n    }\n    .parallax-container {\n        position: relative;\n        width: 100%;\n        height: 50vh;\n        overflow: hidden;\n        outline: none;\n    }\n    .parallax-container.game-started {\n        cursor: none;\n    }\n    .parallax-layer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 200%;\n        height: 100%;\n        background-repeat: repeat-x;\n        background-position: 0 center;\n        background-size: 50% 100%;\n    }\n    #background {\n        background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/mountains-back1.png');\n        z-index: 1;\n    }\n    #foreground {\n        background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/ny-skyline2.png');\n        z-index: 2;\n    }\n    #player {\n        position: absolute;\n        width: 100px;\n        height: 38px;\n        background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/fighter-probe1.png');\n        background-size: contain;\n        background-repeat: no-repeat;\n        left: 20%;\n        top: 35%;\n        z-index: 3;\n        display: none;\n    }\n    #shield {\n        position: absolute;\n        width: 120px;\n        height: 120px;\n        background-color: rgba(0, 255, 255, 0.3);\n        border-radius: 50%;\n        display: none;\n        z-index: 4;\n        pointer-events: none;\n    }\n    .projectile {\n        position: absolute;\n        width: 10px;\n        height: 5px;\n        background-color: red;\n        z-index: 4;\n    }\n    .enemy {\n        position: absolute;\n        width: 55px;\n        height: 55px;\n        background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/kaboom-enemy1.png');\n        background-size: contain;\n        background-repeat: no-repeat;\n        z-index: 3;\n    }\n    .friendly {\n        position: absolute;\n        width: 100px;\n        height: 38px;\n        background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/fighter-probe-reversed.png');\n        background-size: contain;\n        background-repeat: no-repeat;\n        z-index: 3;\n    }\n    .explosion {\n        position: absolute;\n        width: 30px;\n        height: 30px;\n        background-color: orange;\n        border-radius: 50%;\n        z-index: 4;\n        animation: explode 0.5s forwards;\n    }\n    .blue-explosion {\n        background-color: blue;\n    }\n    @keyframes explode {\n        0% { transform: scale(0); opacity: 1; }\n        100% { transform: scale(2); opacity: 0; }\n    }\n    #startButton {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        z-index: 5;\n        padding: 10px 20px;\n        font-size: 18px;\n        background-color: #dfdfdf;\n        color: #f53399;\n        cursor: pointer;\n        font-family: 'Silkscreen', cursive;\n    }\n    #scoreDisplay, #livesDisplay {\n        position: absolute;\n        font-size: 18px;\n        color: #f53399;\n        z-index: 5;\n    }\n    #scoreDisplay {\n        top: 10px;\n        left: 10px;\n    }\n    #livesDisplay {\n        top: 40px;\n        left: 10px;\n    }\n    #shieldReloadBar {\n        position: absolute;\n        top: 70px;\n        left: 10px;\n        font-size: 14px;\n        color: white;\n        z-index: 5;\n    }\n    .progress-bar {\n        width: 100px;\n        height: 10px;\n        background-color: #ddd;\n        border-radius: 5px;\n        overflow: hidden;\n    }\n    .progress {\n        width: 0%;\n        height: 100%;\n        background-color: #4CAF50;\n        transition: width 0.1s linear;\n    }\n<\/style>\n\n<script>\n    (function() {\n        const background = document.getElementById('background');\n        const foreground = document.getElementById('foreground');\n        const player = document.getElementById('player');\n        const shield = document.getElementById('shield');\n        const container = document.querySelector('.parallax-container');\n        const startButton = document.getElementById('startButton');\n        const scoreDisplay = document.getElementById('scoreDisplay');\n        const livesDisplay = document.getElementById('livesDisplay');\n        const shieldReloadBar = document.querySelector('.progress');\n        \n        const enemyDeathSound = new Audio('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/alien-die-wall.mp3');\n        \n        let bgX = 0, fgX = 0;\n        let isShieldActive = false;\n        let isShieldReloading = false;\n        let enemies = [];\n        let friendlies = [];\n        let gameStarted = false;\n        let score = 0;\n        let lives = 3;\n\n        function startGame() {\n            gameStarted = true;\n            player.style.display = 'block';\n            startButton.style.display = 'none';\n            scoreDisplay.style.display = 'block';\n            livesDisplay.style.display = 'block';\n            document.getElementById('shieldReloadBar').style.display = 'block';\n            container.classList.add('game-started');\n            moveParallax();\n            setInterval(spawnObject, 500);\n        }\n\n        function moveParallax() {\n            if (!gameStarted) return;\n            \n            const bgSpeed = 0.5;\n            const fgSpeed = 1;\n            \n            bgX -= bgSpeed;\n            fgX -= fgSpeed;\n            \n            background.style.backgroundPosition = `${bgX}px center`;\n            foreground.style.backgroundPosition = `${fgX}px center`;\n\n            requestAnimationFrame(moveParallax);\n        }\n\n        function movePlayer(e) {\n            if (!gameStarted) return;\n            \n            const containerRect = container.getBoundingClientRect();\n            const x = e.clientX - containerRect.left;\n            const y = e.clientY - containerRect.top;\n            \n            \/\/ Limit vertical movement\n            const maxY = containerRect.height - player.offsetHeight;\n            const newY = Math.min(Math.max(y, 0), maxY);\n            \n            \/\/ Limit horizontal movement\n            const maxX = containerRect.width * 0.2; \/\/ 20% of container width\n            const minX = 0;\n            const newX = Math.min(Math.max(x - player.offsetWidth \/ 2, minX), maxX);\n            \n            player.style.top = `${newY}px`;\n            player.style.left = `${newX}px`;\n            \n            updateShieldPosition();\n        }\n\n        function updateShieldPosition() {\n            shield.style.top = `${player.offsetTop + player.offsetHeight \/ 2 - shield.offsetHeight \/ 2}px`;\n            shield.style.left = `${player.offsetLeft + player.offsetWidth \/ 2 - shield.offsetWidth \/ 2}px`;\n        }\n\n        function shoot() {\n            if (!gameStarted) return;\n            \n            const projectile = document.createElement('div');\n            projectile.classList.add('projectile');\n            projectile.style.left = `${player.offsetLeft + player.offsetWidth}px`;\n            projectile.style.top = `${player.offsetTop + player.offsetHeight \/ 2}px`;\n            container.appendChild(projectile);\n\n            function moveProjectile() {\n                const currentLeft = projectile.offsetLeft;\n                if (currentLeft >= container.offsetWidth - 10) {\n                    explode(projectile);\n                } else {\n                    projectile.style.left = `${currentLeft + 5}px`;\n                    checkCollisions(projectile);\n                    requestAnimationFrame(moveProjectile);\n                }\n            }\n\n            requestAnimationFrame(moveProjectile);\n        }\n\n        function explode(element, isBlue = false) {\n            const explosion = document.createElement('div');\n            explosion.classList.add('explosion');\n            if (isBlue) explosion.classList.add('blue-explosion');\n            explosion.style.left = `${element.offsetLeft}px`;\n            explosion.style.top = `${element.offsetTop}px`;\n            container.appendChild(explosion);\n\n            if (container.contains(element)) {\n                container.removeChild(element);\n            }\n\n            setTimeout(() => {\n                container.removeChild(explosion);\n            }, 500);\n        }\n\n        function spawnObject() {\n            if (!gameStarted) return;\n            \n            if (Math.random() < 0.15) {\n                spawnFriendly();\n            } else {\n                spawnEnemy();\n            }\n        }\n\n        function spawnEnemy() {\n            const enemy = document.createElement('div');\n            enemy.classList.add('enemy');\n            enemy.style.top = `${Math.random() * (container.offsetHeight - 55)}px`;\n            enemy.style.left = `${container.offsetWidth}px`;\n            container.appendChild(enemy);\n            enemies.push(enemy);\n\n            moveObject(enemy, enemies);\n        }\n\n        function spawnFriendly() {\n            const friendly = document.createElement('div');\n            friendly.classList.add('friendly');\n            friendly.style.top = `${Math.random() * (container.offsetHeight - 38)}px`;\n            friendly.style.left = `${container.offsetWidth}px`;\n            container.appendChild(friendly);\n            friendlies.push(friendly);\n\n            moveObject(friendly, friendlies);\n        }\n\n        function moveObject(object, objectArray) {\n            function move() {\n                const currentLeft = object.offsetLeft;\n                if (currentLeft <= 0) {\n                    container.removeChild(object);\n                    objectArray = objectArray.filter(e => e !== object);\n                } else {\n                    object.style.left = `${currentLeft - 2}px`;\n                    checkPlayerCollision(object);\n                    requestAnimationFrame(move);\n                }\n            }\n\n            requestAnimationFrame(move);\n        }\n\n        function checkCollisions(projectile) {\n            enemies.forEach(enemy => {\n                if (isColliding(projectile, enemy)) {\n                    explode(enemy);\n                    explode(projectile);\n                    enemies = enemies.filter(e => e !== enemy);\n                    score += 10;\n                    updateScore();\n                    enemyDeathSound.play();\n                }\n            });\n\n            friendlies.forEach(friendly => {\n                if (isColliding(projectile, friendly)) {\n                    explode(friendly, true);\n                    explode(projectile);\n                    friendlies = friendlies.filter(f => f !== friendly);\n                    score = 0;\n                    updateScore();\n                }\n            });\n        }\n\n        function checkPlayerCollision(object) {\n            if (isColliding(player, object)) {\n                explode(object, object.classList.contains('friendly'));\n                if (isShieldActive) {\n                    if (object.classList.contains('enemy')) {\n                        enemies = enemies.filter(e => e !== object);\n                    } else {\n                        friendlies = friendlies.filter(f => f !== object);\n                    }\n                } else {\n                    lives--;\n                    updateLives();\n                    if (lives <= 0) {\n                        gameOver();\n                    }\n                }\n            }\n        }\n\n        function isColliding(a, b) {\n            const aRect = a.getBoundingClientRect();\n            const bRect = b.getBoundingClientRect();\n            return !(\n                aRect.top + aRect.height < bRect.top ||\n                aRect.top > bRect.top + bRect.height ||\n                aRect.left + aRect.width < bRect.left ||\n                aRect.left > bRect.left + bRect.width\n            );\n        }\n\n        function activateShield() {\n            if (!gameStarted || isShieldActive || isShieldReloading) return;\n            \n            isShieldActive = true;\n            isShieldReloading = true;\n            shield.style.display = 'block';\n            updateShieldPosition();\n            \n            setTimeout(() => {\n                isShieldActive = false;\n                shield.style.display = 'none';\n            }, 1500);\n\n            let reloadTime = 0;\n            const reloadInterval = setInterval(() => {\n                reloadTime += 100;\n                shieldReloadBar.style.width = `${(reloadTime \/ 5000) * 100}%`;\n                if (reloadTime >= 5000) {\n                    clearInterval(reloadInterval);\n                    isShieldReloading = false;\n                    shieldReloadBar.style.width = '0%';\n                }\n            }, 100);\n        }\n\n        function updateScore() {\n            scoreDisplay.textContent = `Score: ${score}`;\n        }\n\n        function updateLives() {\n            livesDisplay.textContent = `Lives: ${lives}`;\n        }\n\n        function gameOver() {\n            alert('Game Over!');\n            location.reload();\n        }\n\n        container.addEventListener('mousemove', movePlayer);\n        \n        document.addEventListener('keydown', function(e) {\n            if (e.code === 'Space') {\n                e.preventDefault();\n                shoot();\n            } else if (e.key === 'Meta' || e.key === 'Command') {\n                e.preventDefault();\n                activateShield();\n            }\n        });\n\n        container.addEventListener('mouseenter', function() {\n            container.focus();\n            if (gameStarted) {\n                document.body.style.cursor = 'none';\n            }\n        });\n\n        container.addEventListener('mouseleave', function() {\n            document.body.style.cursor = 'default';\n        });\n\n        startButton.addEventListener('click', startGame);\n    })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1be1c83c elementor-widget elementor-widget-spacer\" data-id=\"1be1c83c\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-70d7f9f elementor-widget elementor-widget-heading\" data-id=\"70d7f9f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">GPT<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb63ae elementor-widget elementor-widget-spacer\" data-id=\"fb63ae\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12d8bd67 elementor-widget elementor-widget-spacer\" data-id=\"12d8bd67\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\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>Moon Patrol ( abandoned game ) Start Game Score: 0 Lives: 3 Shield Reload GPT<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-3138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=3138"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3138\/revisions"}],"predecessor-version":[{"id":4394,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3138\/revisions\/4394"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=3138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}