{"id":4496,"date":"2025-06-03T15:36:36","date_gmt":"2025-06-03T13:36:36","guid":{"rendered":"https:\/\/22schneebergerf.bplaced.net\/?page_id=4496"},"modified":"2025-06-05T11:01:48","modified_gmt":"2025-06-05T09:01:48","slug":"elementor-4496","status":"publish","type":"page","link":"https:\/\/22schneebergerf.bplaced.net\/?page_id=4496","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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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
\n\t\t\t
<\/div>\n\t\t<\/div>\n\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\r\n\r\n\r\n \r\n Space Shooter<\/title>\r\n <style>\r\n\r\n <style>\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n width: 100vw;\r\n height: 100vh;\r\n background: black;\r\n }\r\n\r\n canvas {\r\n display: block;\r\n width: 100vw;\r\n height: 100vh;\r\n background: black;\r\n }\r\n\r\n #punkteAnzeige {\r\n position: fixed;\r\n top: 10px;\r\n left: 10px;\r\n color: white;\r\n font-size: 18px;\r\n font-family: sans-serif;\r\n z-index: 100;\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 background: white;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n z-index: 101;\r\n }\r\n\r\n button {\r\n padding: 10px 20px;\r\n border: none;\r\n background: green;\r\n color: white;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n }\r\n<\/style>\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"punkteAnzeige\">Punkte: 0<\/div>\r\n <div class=\"spieleUI\" id=\"spieleUI\">\r\n <h1 id=\"punkteUI\">0<\/h1>\r\n <p>Punkte<\/p>\r\n <button id=\"startGame\">Start Game<\/button>\r\n <\/div>\r\n <canvas id=\"canvas\"><\/canvas>\r\n\r\n <!-- Bilder -->\r\n <img decoding=\"async\" id=\"background\" src=\"https:\/\/22schneebergerf.bplaced.net\/wp-content\/uploads\/2025\/06\/background.png\" style=\"display:none\">\r\n <img decoding=\"async\" id=\"player\" src=\"https:\/\/22schneebergerf.bplaced.net\/wp-content\/uploads\/2025\/06\/player.png\" style=\"display:none\">\r\n <img decoding=\"async\" id=\"enemy\" src=\"https:\/\/22schneebergerf.bplaced.net\/wp-content\/uploads\/2025\/06\/enemy.png\" style=\"display:none\">\r\n <img decoding=\"async\" id=\"projectile\" src=\"https:\/\/22schneebergerf.bplaced.net\/wp-content\/uploads\/2025\/06\/projectile.png\" style=\"display:none\">\r\n <img decoding=\"async\" id=\"boom\" src=\"https:\/\/22schneebergerf.bplaced.net\/wp-content\/uploads\/2025\/06\/boom.png\" style=\"display:none\">\r\n\r\n <!-- Audio -->\r\n <audio id=\"projectileSound\" src=\"projectileSound.wav\"><\/audio>\r\n <audio id=\"boomSound\" src=\"boomSound.wav\"><\/audio>\r\n <audio id=\"backgroundMusic\" src=\"backgroundMusic.mp3\" loop><\/audio>\r\n\r\n <script>\r\n const canvas = document.getElementById(\"canvas\");\r\n const ctx = canvas.getContext(\"2d\");\r\n canvas.width = innerWidth;\r\n canvas.height = innerHeight;\r\n\r\n const playerImg = document.getElementById(\"player\");\r\n const enemyImg = document.getElementById(\"enemy\");\r\n const projectileImg = document.getElementById(\"projectile\");\r\n const backgroundImg = document.getElementById(\"background\");\r\n const boomImg = document.getElementById(\"boom\");\r\n\r\n const projectileSound = document.getElementById(\"projectileSound\");\r\n const boomSound = document.getElementById(\"boomSound\");\r\n const backgroundMusic = document.getElementById(\"backgroundMusic\");\r\n\r\n const punkteAnzeige = document.getElementById(\"punkteAnzeige\");\r\n const punkteUI = document.getElementById(\"punkteUI\");\r\n const spieleUI = document.getElementById(\"spieleUI\");\r\n const startGame = document.getElementById(\"startGame\");\r\n\r\n let player, enemies = [], projectiles = [], bullets = [];\r\n let animationID, score = 0, timer;\r\n let upPressed = false, downPressed = false;\r\n\r\n class Player {\r\n constructor(x, y, w, h, speed) {\r\n this.x = x; this.y = y; this.w = w; this.h = h; 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) this.y -= this.speed;\r\n if (downPressed) this.y += this.speed;\r\n this.y = Math.max(0, Math.min(this.y, canvas.height - this.h));\r\n }\r\n }\r\n\r\n class Enemy {\r\n constructor(x, y, w, h, speed) {\r\n this.x = x; this.y = y; this.w = w; this.h = h; this.speed = speed;\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 }\r\n\r\n class Projectile {\r\n constructor(x, y, w, h, speed) {\r\n this.x = x; this.y = y; this.w = w; this.h = h; 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\n function init() {\r\n player = new Player(100, canvas.height \/ 2 - 25, 100, 50, 10);\r\n enemies = [];\r\n projectiles = [];\r\n bullets = [];\r\n score = 0;\r\n punkteAnzeige.textContent = \"Punkte: \" + score;\r\n punkteUI.textContent = score;\r\n }\r\n\r\n function createEnemy() {\r\n timer = setInterval(() => {\r\n let y = Math.random() * (canvas.height - 40);\r\n enemies.push(new Enemy(canvas.width, y, 100, 40, 4));\r\n }, 1000);\r\n }\r\n\r\n function checkCollision(rect1, rect2) {\r\n return rect1.x < rect2.x + rect2.w &&\r\n rect1.x + rect1.w > rect2.x &&\r\n rect1.y < rect2.y + rect2.h &&\r\n rect1.y + rect1.h > rect2.y;\r\n }\r\n\r\n function 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\r\n player.draw();\r\n player.move();\r\n\r\n projectiles.forEach((p, i) => {\r\n p.draw(); p.move();\r\n if (p.x > canvas.width) projectiles.splice(i, 1);\r\n });\r\n\r\n enemies.forEach((e, ei) => {\r\n e.draw(); e.move();\r\n\r\n \/\/ Kollision mit Projektil\r\n projectiles.forEach((p, pi) => {\r\n if (checkCollision(p, e)) {\r\n enemies.splice(ei, 1);\r\n projectiles.splice(pi, 1);\r\n ctx.drawImage(boomImg, e.x, e.y, e.w, e.h);\r\n boomSound.play();\r\n score += 100;\r\n punkteAnzeige.textContent = \"Punkte: \" + score;\r\n }\r\n });\r\n\r\n \/\/ Kollision mit Spieler\r\n if (checkCollision(e, player)) {\r\n ctx.drawImage(boomImg, e.x, e.y, e.w, e.h);\r\n boomSound.play();\r\n cancelAnimationFrame(animationID);\r\n backgroundMusic.pause();\r\n clearInterval(timer);\r\n spieleUI.style.display = \"block\";\r\n punkteUI.textContent = score;\r\n }\r\n\r\n if (e.x < -e.w) enemies.splice(ei, 1);\r\n });\r\n }\r\n\r\n startGame.addEventListener(\"click\", () => {\r\n init();\r\n createEnemy();\r\n createGame();\r\n spieleUI.style.display = \"none\";\r\n backgroundMusic.play();\r\n });\r\n\r\n document.addEventListener(\"keydown\", e => {\r\n if (e.key === \"ArrowUp\") upPressed = true;\r\n if (e.key === \"ArrowDown\") downPressed = true;\r\n });\r\n document.addEventListener(\"keyup\", e => {\r\n if (e.key === \"ArrowUp\") upPressed = false;\r\n if (e.key === \"ArrowDown\") downPressed = false;\r\n });\r\n\r\n document.addEventListener(\"click\", () => {\r\n let x = player.x + player.w;\r\n let y = player.y + player.h \/ 2 - 2;\r\n projectiles.push(new Projectile(x, y, 30, 4, 10));\r\n projectileSound.play();\r\n });\r\n <\/script>\r\n<\/body>\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<div class=\"elementor-element elementor-element-5660c32 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"5660c32\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9e989d elementor-widget elementor-widget-spacer\" data-id=\"b9e989d\" 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<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\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>Space Shooter 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":{"_seopress_robots_primary_cat":"","footnotes":""},"class_list":["post-4496","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/4496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4496"}],"version-history":[{"count":302,"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/4496\/revisions"}],"predecessor-version":[{"id":4856,"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/4496\/revisions\/4856"}],"wp:attachment":[{"href":"https:\/\/22schneebergerf.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}