spaceShooter<\/title>\r\n <link rel=\"stylesheet\" href=\"spaceShooter.css\">\r\n <style>\r\n body{\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n}\r\n\r\n#background {\r\n display: none;\r\n}\r\n#player {\r\n display: none;\r\n}\r\n#enemy {\r\n display: none;\r\n}\r\n#projectile {\r\n display: none;\r\n}\r\n#boom {\r\n display: none;\r\n}\r\n\r\n.punkteAnzeige{\r\n position: fixed;\r\n background-color: white;\r\n font-size: 10;\r\n user-select: none;\r\n}\r\n\r\n.spieleUI {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 300px;\r\n height: 100px;\r\n background-color: white;\r\n padding: 20px;\r\n text-align: center;\r\n border-radius: 20px;\r\n}\r\n\r\nbutton {\r\n background: green;\r\n color: white;\r\n width: 300px;\r\n padding: 10px;\r\n border-radius: 20px;\r\n border: 0px;\r\n margin-top: 10px;\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"punkteAnzeige\">\r\n <span>Punkte: <\/span><span id=\"punkteAnzeige\">0<\/span>\r\n <div class=\"spieleUI\" id=\"spieleUI\">\r\n <h1 id=\"punkteUI\">0<\/h1>\r\n <p>Punkte<\/p>\r\n <div class=\"button\">\r\n <button id=\"startGame\">Start Game<\/button>\r\n <\/div>\r\n <\/div>\r\n <canvas id=\"canvas\"><\/canvas>\r\n <img decoding=\"async\" id=\"background\" src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/background.png\" alt=\"\">\r\n <img id=\"destiny\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/destiny.png\" alt=\"\">\r\n <img id=\"hive\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/hive.png\" alt=\"\">\r\n <img id=\"arcStaff\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/arcStaff.png\" alt=\"\">\r\n <img id=\"strandWarlock\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/strandWarlock.png\" alt=\"\">\r\n <img id=\"boom\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/boom.png\" alt=\"\">\r\n\r\n <script>\r\n \/** @type {HTMLCanvasElement} *\/\r\nlet canvas = document.getElementById(\"canvas\");\r\nlet ctx = canvas.getContext(\"2d\");\r\ncanvas.width = 1500;\r\ncanvas.height = 750;\r\n\r\nlet backgroundImg = document.getElementById(\"background\");\r\nlet destinyImg = document.getElementById(\"destiny\");\r\nlet hiveImg = document.getElementById(\"hive\");\r\nlet arcStaffImg = document.getElementById(\"arcStaff\");\r\nlet strandWarlockImg = document.getElementById(\"strandWarlock\");\r\nlet boomImg = document.getElementById(\"boom\");\r\nlet punkteAnzeige = document.getElementById(\"punkteAnzeige\");\r\nlet spieleUI = document.getElementById(\"spieleUI\")\r\nlet punkteUI = document.getElementById(\"punkteUI\")\r\nlet startGame = document.getElementById(\"startGame\");\r\nlet animationID;\r\n\r\nlet projectileSound = new Audio();\r\nprojectileSound.src = \".\/projectileSound.mp3\";\r\n\r\nlet mySound = new Audio();\r\nmySound.src = \".\/mySound.wav\";\r\n\r\nlet backgroundMusic = new Audio();\r\nbackgroundMusic.src = \".\/destinyBackgroundMusic.mp3\"\r\n\r\nfunction init() {\r\n player = new Player(canvas.width\/2, canvas.height-100, 100, 80, 8);\r\n enemies = [];\r\n projectiles = [];\r\n score = 0;\r\n punkteUI.innerHTML = score;\r\n punkteAnzeige.innerHTML = score;\r\n}\r\n\r\nlet leftPressed = false;\r\nlet rightPressed = false;\r\n\r\naddEventListener(\"keydown\", function (event) {\r\n if (event.key == \"a\") {\r\n leftPressed = true;\r\n }\r\n if (event.key == \"d\") {\r\n rightPressed = true;\r\n }\r\n});\r\n\r\naddEventListener(\"keyup\", function (event) {\r\n if (event.key == \"a\") {\r\n leftPressed = false;\r\n }\r\n if (event.key == \"d\") {\r\n rightPressed = false;\r\n }\r\n});\r\n\r\nclass Player{\r\n constructor(x,y,w,h,speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.w = w;\r\n this.h = h;\r\n this.speed = speed;\r\n }\r\n draw() {\r\n ctx.drawImage(destinyImg, this.x, this.y, this.w, this.h);\r\n }\r\n move() {\r\n if (leftPressed == true) {\r\n this.x -= this.speed;\r\n }\r\n if (rightPressed == true) {\r\n this.x += this.speed;\r\n }\r\n }\r\n collDetect() {\r\n if (this.x < 0) {\r\n this.x = 0;\r\n }\r\n if (this.x > canvas.width - this.w) {\r\n this.x = canvas.width - this.w;\r\n }\r\n }\r\n}\r\n\r\nlet enemies = [];\r\nclass Enemy{\r\n constructor(x,y,w,h,speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.w = w;\r\n this.h = h;\r\n this.speed = speed;\r\n }\r\n draw() {\r\n ctx.drawImage(hiveImg, this.x, this.y, this.w, this.h); \r\n }\r\n move() {\r\n this.y += this.speed;\r\n }\r\n}\r\n\r\nfunction createEnemy() {\r\n timer = setInterval(() => {\r\n let h = 100;\r\n let w = 60;\r\n let x = Math.random() * Math.abs(canvas.width - w);\r\n let y = 0-h\r\n let speed = 4;\r\n enemies.push(new Enemy(x,y,w,h,speed));\r\n }, 500);\r\n}\r\n\r\nlet projectiles = [];\r\nclass Projectile {\r\n constructor(x, y, w, h, speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.w = w;\r\n this.h = h;\r\n this.speed = speed;\r\n }\r\n draw() {\r\n ctx.drawImage(arcStaffImg, this.x, this.y, this.w, this.h); \r\n }\r\n move() {\r\n this.y -= this.speed;\r\n }\r\n}\r\n\r\naddEventListener(\"click\", function () {\r\n let x = player.x + player.w\/3;\r\n let y = player.y-40;\r\n let w = 30;\r\n let h = 80;\r\n let speed = 20;\r\n projectiles.push(new Projectile(x,y,w,h,speed));\r\n projectileSound.play();\r\n});\r\n\r\nfunction createGame() {\r\n animationID= requestAnimationFrame(createGame);\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);\r\n player.draw();\r\n player.move();\r\n player.collDetect();\r\n\r\n enemies.forEach((enemy,enemyIndex) => {\r\n enemy.draw();\r\n enemy.move();\r\n if (enemy.x < 100) {\r\n enemies.splice(enemyIndex, 1);\r\n }\r\n projectiles.forEach((projectile, projectileIndex) => {\r\n let dist = Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y);\r\n if (dist - projectile.w\/2 - enemy.w\/2 < 1) {\r\n projectiles.splice(projectileIndex, 1);\r\n enemies.splice(enemyIndex, 1);\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n mySound.play();\r\n punkteAnzeige.innerHTML = score;\r\n score += 100;\r\n }\r\n if (projectile.x > canvas.width + projectile.w) {\r\n projectiles.splice(projectileIndex, 1);\r\n }\r\n });\r\n let dist = Math.hypot(player.x - enemy.x, player.y - enemy.y);\r\n if (dist - player.w\/3 - enemy.w\/3 < 1) {\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n mySound.play();\r\n cancelAnimationFrame(animationID);\r\n backgroundMusic.pause();\r\n spieleUI.style.display = \"block\";\r\n punkteUI.innerHTML = score - 100;\r\n clearInterval(timer);\r\n }\r\n });\r\n\r\n projectiles.forEach(projectile => {\r\n projectile.draw();\r\n projectile.move();\r\n });\r\n}\r\n\r\nstartGame.addEventListener(\"click\", function () {\r\n init()\r\n createGame();\r\n createEnemy();\r\n backgroundMusic.play();\r\n backgroundMusic.loop = true;\r\n spieleUI.style.display = \"none\";\r\n});\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\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\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>spaceShooter Punkte: 0 0 Punkte Start Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2844","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2844"}],"version-history":[{"count":64,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2844\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2844\/revisions\/3332"}],"wp:attachment":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n \r\n spaceShooter<\/title>\r\n <link rel=\"stylesheet\" href=\"spaceShooter.css\">\r\n <style>\r\n body{\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n}\r\n\r\n#background {\r\n display: none;\r\n}\r\n#player {\r\n display: none;\r\n}\r\n#enemy {\r\n display: none;\r\n}\r\n#projectile {\r\n display: none;\r\n}\r\n#boom {\r\n display: none;\r\n}\r\n\r\n.punkteAnzeige{\r\n position: fixed;\r\n background-color: white;\r\n font-size: 10;\r\n user-select: none;\r\n}\r\n\r\n.spieleUI {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 300px;\r\n height: 100px;\r\n background-color: white;\r\n padding: 20px;\r\n text-align: center;\r\n border-radius: 20px;\r\n}\r\n\r\nbutton {\r\n background: green;\r\n color: white;\r\n width: 300px;\r\n padding: 10px;\r\n border-radius: 20px;\r\n border: 0px;\r\n margin-top: 10px;\r\n}\r\n\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"punkteAnzeige\">\r\n <span>Punkte: <\/span><span id=\"punkteAnzeige\">0<\/span>\r\n <div class=\"spieleUI\" id=\"spieleUI\">\r\n <h1 id=\"punkteUI\">0<\/h1>\r\n <p>Punkte<\/p>\r\n <div class=\"button\">\r\n <button id=\"startGame\">Start Game<\/button>\r\n <\/div>\r\n <\/div>\r\n <canvas id=\"canvas\"><\/canvas>\r\n <img decoding=\"async\" id=\"background\" src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/background.png\" alt=\"\">\r\n <img id=\"destiny\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/destiny.png\" alt=\"\">\r\n <img id=\"hive\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/hive.png\" alt=\"\">\r\n <img id=\"arcStaff\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/arcStaff.png\" alt=\"\">\r\n <img id=\"strandWarlock\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/strandWarlock.png\" alt=\"\">\r\n <img id=\"boom\"src=\"https:\/\/22mosers.bplaced.net\/wp-content\/uploads\/2025\/05\/boom.png\" alt=\"\">\r\n\r\n <script>\r\n \/** @type {HTMLCanvasElement} *\/\r\nlet canvas = document.getElementById(\"canvas\");\r\nlet ctx = canvas.getContext(\"2d\");\r\ncanvas.width = 1500;\r\ncanvas.height = 750;\r\n\r\nlet backgroundImg = document.getElementById(\"background\");\r\nlet destinyImg = document.getElementById(\"destiny\");\r\nlet hiveImg = document.getElementById(\"hive\");\r\nlet arcStaffImg = document.getElementById(\"arcStaff\");\r\nlet strandWarlockImg = document.getElementById(\"strandWarlock\");\r\nlet boomImg = document.getElementById(\"boom\");\r\nlet punkteAnzeige = document.getElementById(\"punkteAnzeige\");\r\nlet spieleUI = document.getElementById(\"spieleUI\")\r\nlet punkteUI = document.getElementById(\"punkteUI\")\r\nlet startGame = document.getElementById(\"startGame\");\r\nlet animationID;\r\n\r\nlet projectileSound = new Audio();\r\nprojectileSound.src = \".\/projectileSound.mp3\";\r\n\r\nlet mySound = new Audio();\r\nmySound.src = \".\/mySound.wav\";\r\n\r\nlet backgroundMusic = new Audio();\r\nbackgroundMusic.src = \".\/destinyBackgroundMusic.mp3\"\r\n\r\nfunction init() {\r\n player = new Player(canvas.width\/2, canvas.height-100, 100, 80, 8);\r\n enemies = [];\r\n projectiles = [];\r\n score = 0;\r\n punkteUI.innerHTML = score;\r\n punkteAnzeige.innerHTML = score;\r\n}\r\n\r\nlet leftPressed = false;\r\nlet rightPressed = false;\r\n\r\naddEventListener(\"keydown\", function (event) {\r\n if (event.key == \"a\") {\r\n leftPressed = true;\r\n }\r\n if (event.key == \"d\") {\r\n rightPressed = true;\r\n }\r\n});\r\n\r\naddEventListener(\"keyup\", function (event) {\r\n if (event.key == \"a\") {\r\n leftPressed = false;\r\n }\r\n if (event.key == \"d\") {\r\n rightPressed = false;\r\n }\r\n});\r\n\r\nclass Player{\r\n constructor(x,y,w,h,speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.w = w;\r\n this.h = h;\r\n this.speed = speed;\r\n }\r\n draw() {\r\n ctx.drawImage(destinyImg, this.x, this.y, this.w, this.h);\r\n }\r\n move() {\r\n if (leftPressed == true) {\r\n this.x -= this.speed;\r\n }\r\n if (rightPressed == true) {\r\n this.x += this.speed;\r\n }\r\n }\r\n collDetect() {\r\n if (this.x < 0) {\r\n this.x = 0;\r\n }\r\n if (this.x > canvas.width - this.w) {\r\n this.x = canvas.width - this.w;\r\n }\r\n }\r\n}\r\n\r\nlet enemies = [];\r\nclass Enemy{\r\n constructor(x,y,w,h,speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.w = w;\r\n this.h = h;\r\n this.speed = speed;\r\n }\r\n draw() {\r\n ctx.drawImage(hiveImg, this.x, this.y, this.w, this.h); \r\n }\r\n move() {\r\n this.y += this.speed;\r\n }\r\n}\r\n\r\nfunction createEnemy() {\r\n timer = setInterval(() => {\r\n let h = 100;\r\n let w = 60;\r\n let x = Math.random() * Math.abs(canvas.width - w);\r\n let y = 0-h\r\n let speed = 4;\r\n enemies.push(new Enemy(x,y,w,h,speed));\r\n }, 500);\r\n}\r\n\r\nlet projectiles = [];\r\nclass Projectile {\r\n constructor(x, y, w, h, speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.w = w;\r\n this.h = h;\r\n this.speed = speed;\r\n }\r\n draw() {\r\n ctx.drawImage(arcStaffImg, this.x, this.y, this.w, this.h); \r\n }\r\n move() {\r\n this.y -= this.speed;\r\n }\r\n}\r\n\r\naddEventListener(\"click\", function () {\r\n let x = player.x + player.w\/3;\r\n let y = player.y-40;\r\n let w = 30;\r\n let h = 80;\r\n let speed = 20;\r\n projectiles.push(new Projectile(x,y,w,h,speed));\r\n projectileSound.play();\r\n});\r\n\r\nfunction createGame() {\r\n animationID= requestAnimationFrame(createGame);\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);\r\n player.draw();\r\n player.move();\r\n player.collDetect();\r\n\r\n enemies.forEach((enemy,enemyIndex) => {\r\n enemy.draw();\r\n enemy.move();\r\n if (enemy.x < 100) {\r\n enemies.splice(enemyIndex, 1);\r\n }\r\n projectiles.forEach((projectile, projectileIndex) => {\r\n let dist = Math.hypot(projectile.x - enemy.x, projectile.y - enemy.y);\r\n if (dist - projectile.w\/2 - enemy.w\/2 < 1) {\r\n projectiles.splice(projectileIndex, 1);\r\n enemies.splice(enemyIndex, 1);\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n mySound.play();\r\n punkteAnzeige.innerHTML = score;\r\n score += 100;\r\n }\r\n if (projectile.x > canvas.width + projectile.w) {\r\n projectiles.splice(projectileIndex, 1);\r\n }\r\n });\r\n let dist = Math.hypot(player.x - enemy.x, player.y - enemy.y);\r\n if (dist - player.w\/3 - enemy.w\/3 < 1) {\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n mySound.play();\r\n cancelAnimationFrame(animationID);\r\n backgroundMusic.pause();\r\n spieleUI.style.display = \"block\";\r\n punkteUI.innerHTML = score - 100;\r\n clearInterval(timer);\r\n }\r\n });\r\n\r\n projectiles.forEach(projectile => {\r\n projectile.draw();\r\n projectile.move();\r\n });\r\n}\r\n\r\nstartGame.addEventListener(\"click\", function () {\r\n init()\r\n createGame();\r\n createEnemy();\r\n backgroundMusic.play();\r\n backgroundMusic.loop = true;\r\n spieleUI.style.display = \"none\";\r\n});\r\n <\/script>\r\n<\/body>\r\n\r\n<\/html>\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\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>spaceShooter Punkte: 0 0 Punkte Start Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2844","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2844"}],"version-history":[{"count":64,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2844\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/2844\/revisions\/3332"}],"wp:attachment":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}