{"id":5050,"date":"2025-05-15T11:14:21","date_gmt":"2025-05-15T09:14:21","guid":{"rendered":"https:\/\/22lampef.bplaced.net\/?page_id=5050"},"modified":"2025-06-03T20:49:47","modified_gmt":"2025-06-03T18:49:47","slug":"space-shooter","status":"publish","type":"page","link":"https:\/\/22lampef.bplaced.net\/?page_id=5050","title":{"rendered":"Space Shooter"},"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\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\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 \r\n \r\n spaceShooter<\/title>\r\n <link rel=\"stylesheet\" href=\"spaceShooter.css\">\r\n<\/head>\r\n\r\n<body>\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 margin: 5px;\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 \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:\/\/22lampef.bplaced.net\/wp-content\/uploads\/2025\/05\/background.png\" alt=\"\">\r\n <img decoding=\"async\" id=\"player\" src=\"https:\/\/22lampef.bplaced.net\/wp-content\/uploads\/2025\/05\/player.png\" alt=\"\">\r\n <img decoding=\"async\" id=\"enemy\" src=\"https:\/\/22lampef.bplaced.net\/wp-content\/uploads\/2025\/05\/enemy.png\" alt=\"\">\r\n <img decoding=\"async\" id=\"projectile\" src=\"https:\/\/22lampef.bplaced.net\/wp-content\/uploads\/2025\/05\/projectile.png\" alt=\"\">\r\n <img decoding=\"async\" id=\"boom\" src=\"https:\/\/22lampef.bplaced.net\/wp-content\/uploads\/2025\/05\/boom.png\" alt=\"\">\r\n <script src=\"spaceShooter.js\"><\/script>\r\n<\/body>\r\n<script>\r\n \/** @type {HTMLCanvasElement} *\/\r\nlet canvas = document.getElementById(\"canvas\");\r\nlet ctx = canvas.getContext(\"2d\");\r\ncanvas.width = innerWidth;\r\ncanvas.height = innerHeight;\r\n\r\nlet backgroundImg = document.getElementById(\"background\");\r\nlet playerImg = document.getElementById(\"player\");\r\nlet enemyImg = document.getElementById(\"enemy\");\r\nlet projectileImg = document.getElementById(\"projectile\");\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.wav\";\r\n\r\nlet boomSound = new Audio();\r\nboomSound.src = \".\/boomSound.wav\";\r\n\r\nlet backgroundMusic = new Audio();\r\nbackgroundMusic.src = \".\/backgroundMusic.mp3\";\r\n\r\nfunction init() {\r\n player = new Player(200, canvas.height \/ 2, 100, 50, 20);\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 upPressed = false;\r\nlet downPressed = false;\r\n\r\naddEventListener(\"keydown\", function (event) {\r\n if (event.key == \"ArrowUp\") {\r\n upPressed = true;\r\n }\r\n if (event.key == \"ArrowDown\") {\r\n downPressed = true;\r\n }\r\n});\r\n\r\naddEventListener(\"keyup\", function (event) {\r\n if (event.key == \"ArrowUp\") {\r\n upPressed = false;\r\n }\r\n if (event.key == \"ArrowDown\") {\r\n downPressed = 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(playerImg, this.x, this.y, this.w, this.h);\r\n }\r\n move() {\r\n if (upPressed == true) {\r\n this.y -= this.speed;\r\n }\r\n if (downPressed == true) {\r\n this.y += this.speed;\r\n }\r\n }\r\n collDetect() {\r\n if (this.y < 0) {\r\n this.y = 0;\r\n }\r\n if (this.y > canvas.height - this.h) {\r\n this.y = canvas.height - this.h;\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 this.shootInterval = Math.random() * 2000 + 1000; \/\/ Random shoot interval\r\n this.lastShootTime = 0;\r\n }\r\n draw() {\r\n ctx.drawImage(enemyImg, this.x, this.y, this.w, this.h);\r\n }\r\n move() {\r\n this.x -= this.speed;\r\n }\r\n shoot() {\r\n const currentTime = Date.now();\r\n if (currentTime - this.lastShootTime > this.shootInterval) {\r\n bullets.push(new Bullet(this.x, this.y + this.height \/ 2, -5)); \/\/ Shoot towards left\r\n this.lastShootTime = currentTime;\r\n }\r\n }\r\n}\r\n\r\nfunction createEnemy() {\r\n timer = setInterval(() => {\r\n let h = 40;\r\n let x = canvas.width;\r\n let y = Math.random() * Math.abs(canvas.height - h);\r\n let w = 100;\r\n let speed = 20;\r\n enemies.push(new Enemy(x, y, w, h, speed));\r\n }, 200);\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(projectileImg, this.x, this.y, this.w, this.h);\r\n }\r\n move() {\r\n this.x += this.speed;\r\n }\r\n}\r\n\r\naddEventListener(\"click\", function () {\r\n let x = player.x + player.w;\r\n let y = player.y + player.h \/ 2;\r\n let w = 30;\r\n let h = 4;\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\nlet bullets = [];\r\nclass Bullet {\r\n constructor(x, y, speed) {\r\n this.x = x;\r\n this.y = y;\r\n this.speed = speed;\r\n this.width = 5;\r\n this.height = 5;\r\n this.color = \"red\";\r\n }\r\n\r\n draw() {\r\n ctx.fillStyle = this.color;\r\n ctx.fillRect(this.x, this.y, this.width, this.height);\r\n }\r\n\r\n update() {\r\n this.x += this.speed;\r\n this.draw();\r\n }\r\n}\r\n\r\nfunction updateBullets() {\r\n bullets = bullets.filter((bullet) => bullet.x > 0);\r\n bullets.forEach((bullet) => {\r\n bullet.update();\r\n });\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 updateBullets();\r\n\r\n enemies.forEach((enemy, enemyIndex) => {\r\n enemy.draw();\r\n enemy.move();\r\n enemy.shoot();\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 boomSound.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 \/ 4 - enemy.w \/ 4 < 1) {\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n boomSound.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\r\n<\/script>\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>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-5050","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/5050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5050"}],"version-history":[{"count":61,"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/5050\/revisions"}],"predecessor-version":[{"id":5852,"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/5050\/revisions\/5852"}],"wp:attachment":[{"href":"https:\/\/22lampef.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}