{"id":5170,"date":"2025-05-15T11:11:13","date_gmt":"2025-05-15T09:11:13","guid":{"rendered":"https:\/\/22straganzm.bplaced.net\/?page_id=5170"},"modified":"2025-06-05T10:49:59","modified_gmt":"2025-06-05T08:49:59","slug":"minecraft","status":"publish","type":"page","link":"https:\/\/22straganzm.bplaced.net\/?page_id=5170","title":{"rendered":"Minecraft"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\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 Space Shooter<\/title>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n <style>\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n position: relative;\r\n height: 100vh;\r\n width: 100vw;\r\n }\r\n\r\n canvas {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n display: block;\r\n }\r\n\r\n #background, #player, #enemy, #projectile, #boom {\r\n display: none;\r\n }\r\n\r\n .punkteAnzeige {\r\n position: fixed;\r\n top: 5px;\r\n left: 5px;\r\n background-color: white;\r\n font-size: 14px;\r\n margin: 5px;\r\n user-select: none;\r\n z-index: 2;\r\n padding: 5px 10px;\r\n border-radius: 8px;\r\n box-shadow: 0 0 6px rgba(0,0,0,0.3);\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 background-color: white;\r\n padding: 20px;\r\n text-align: center;\r\n border-radius: 20px;\r\n z-index: 3;\r\n box-shadow: 0 0 15px rgba(0,0,0,0.4);\r\n }\r\n\r\n button {\r\n background: green;\r\n color: white;\r\n width: 100%;\r\n padding: 10px;\r\n border-radius: 20px;\r\n border: none;\r\n margin-top: 10px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"punkteAnzeige\">\r\n <span>Punkte: <\/span><span id=\"punkteAnzeige\">0<\/span>\r\n <\/div>\r\n\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\r\n <canvas id=\"canvas\"><\/canvas>\r\n <img decoding=\"async\" src=\"https:\/\/22straganzm.bplaced.net\/wp-content\/uploads\/2025\/05\/background.jpg\" id=\"background\" alt=\"\">\r\n <img decoding=\"async\" src=\"https:\/\/22straganzm.bplaced.net\/wp-content\/uploads\/2025\/05\/player.png\" id=\"player\" alt=\"\">\r\n <img decoding=\"async\" src=\"https:\/\/22straganzm.bplaced.net\/wp-content\/uploads\/2025\/05\/enemy.png\" id=\"enemy\" alt=\"\">\r\n <img decoding=\"async\" src=\"https:\/\/22straganzm.bplaced.net\/wp-content\/uploads\/2025\/05\/projectile.png\" id=\"projectile\" alt=\"\">\r\n <img decoding=\"async\" src=\"https:\/\/22straganzm.bplaced.net\/wp-content\/uploads\/2025\/05\/boom.png\" id=\"boom\" alt=\"\">\r\n\r\n <script>\r\n let canvas = document.getElementById(\"canvas\");\r\n let ctx = canvas.getContext(\"2d\");\r\n\r\n let backgroundImg = document.getElementById(\"background\");\r\n let playerImg = document.getElementById(\"player\");\r\n let enemyImg = document.getElementById(\"enemy\");\r\n let projectileImg = document.getElementById(\"projectile\");\r\n let boomImg = document.getElementById(\"boom\"); \r\n let punkteAnzeige = document.getElementById(\"punkteAnzeige\");\r\n let spieleUI = document.getElementById(\"spieleUI\");\r\n let punkteUI = document.getElementById(\"punkteUI\");\r\n let startGame = document.getElementById(\"startGame\");\r\n\r\n let score = 0;\r\n let animationID;\r\n let rightPressed = false;\r\n let leftPressed = false;\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n\r\n resizeCanvas();\r\n\r\n class 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 (leftPressed) this.x -= this.speed;\r\n if (rightPressed) this.x += this.speed;\r\n }\r\n collDetect() {\r\n if (this.x < 0) this.x = 0;\r\n if (this.x > canvas.width - this.w) this.x = canvas.width - this.w;\r\n }\r\n }\r\n\r\n class 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(enemyImg, 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\n class 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.y -= this.speed;\r\n }\r\n }\r\n\r\n let playerWidth = canvas.width * 0.08;\r\n let playerHeight = canvas.height * 0.15;\r\n let player = new Player(canvas.width \/ 2, canvas.height - playerHeight - 20, playerWidth, playerHeight, 15);\r\n\r\n window.addEventListener(\"resize\", () => {\r\n resizeCanvas();\r\n player.w = canvas.width * 0.08;\r\n player.h = canvas.height * 0.15;\r\n player.y = canvas.height - player.h - 20;\r\n player.collDetect();\r\n });\r\n\r\n let enemies = [];\r\n let projectiles = [];\r\n let enemyInterval;\r\n\r\n function createEnemy() {\r\n enemyInterval = setInterval(() => {\r\n let w = canvas.width * 0.07;\r\n let h = canvas.height * 0.1;\r\n let x = Math.random() * (canvas.width - w);\r\n let y = 0;\r\n let speed = 8;\r\n enemies.push(new Enemy(x, y, w, h, speed));\r\n }, 700);\r\n }\r\n\r\n addEventListener(\"keydown\", (event) => {\r\n if (event.key == \"ArrowRight\") rightPressed = true;\r\n if (event.key == \"ArrowLeft\") leftPressed = true;\r\n });\r\n\r\n addEventListener(\"keyup\", (event) => {\r\n if (event.key == \"ArrowRight\") rightPressed = false;\r\n if (event.key == \"ArrowLeft\") leftPressed = false;\r\n });\r\n\r\n addEventListener(\"click\", () => {\r\n let x = player.x + player.w \/ 2 - (canvas.width * 0.025) \/ 2;\r\n let y = player.y;\r\n let w = canvas.width * 0.025;\r\n let h = canvas.height * 0.05;\r\n let speed = 15;\r\n projectiles.push(new Projectile(x, y, w, h, speed));\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 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\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 + enemy.w) {\r\n projectiles.splice(projectileIndex, 1);\r\n enemies.splice(enemyIndex, 1);\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n score += 100;\r\n punkteAnzeige.innerHTML = score;\r\n }\r\n });\r\n\r\n let dist = Math.hypot(player.x - enemy.x, player.y - enemy.y);\r\n if (dist < player.w \/ 2 + enemy.w \/ 2) {\r\n ctx.drawImage(boomImg, enemy.x, enemy.y);\r\n cancelAnimationFrame(animationID);\r\n clearInterval(enemyInterval);\r\n spieleUI.style.display = \"block\";\r\n punkteUI.innerHTML = score;\r\n punkteAnzeige.innerHTML = score;\r\n startGame.style.display = \"block\";\r\n }\r\n });\r\n\r\n projectiles.forEach(p => {\r\n p.draw();\r\n p.move();\r\n });\r\n }\r\n\r\n startGame.addEventListener(\"click\", () => {\r\n score = 0;\r\n enemies = [];\r\n projectiles = [];\r\n playerWidth = canvas.width * 0.08;\r\n playerHeight = canvas.height * 0.15;\r\n player = new Player(canvas.width \/ 2, canvas.height - playerHeight - 20, playerWidth, playerHeight, 15);\r\n punkteAnzeige.innerHTML = \"0\";\r\n punkteUI.innerHTML = \"0\";\r\n startGame.style.display = \"none\";\r\n spieleUI.style.display = \"none\";\r\n createGame();\r\n createEnemy();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ee436f elementor-widget elementor-widget-spacer\" data-id=\"6ee436f\" 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-5c3bb17 elementor-widget elementor-widget-spacer\" data-id=\"5c3bb17\" 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\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\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":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5170","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/5170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5170"}],"version-history":[{"count":80,"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/5170\/revisions"}],"predecessor-version":[{"id":6506,"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/5170\/revisions\/6506"}],"wp:attachment":[{"href":"https:\/\/22straganzm.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}