{"id":162,"date":"2025-02-27T07:14:57","date_gmt":"2025-02-27T07:14:57","guid":{"rendered":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/?page_id=162"},"modified":"2025-03-06T08:44:29","modified_gmt":"2025-03-06T08:44:29","slug":"spieleprojekte-javascript","status":"publish","type":"page","link":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/?page_id=162","title":{"rendered":"CODING"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-text-align-center\">Informatik ist ein weiteres Computerfach meiner Schule. 2024\/25 haben wir begonnen, unsere ersten eigenen Spiele zu programmieren. Hier kannst du sehen, was mit ein wenig Code und Kreativit\u00e4t m\u00f6glich ist!<\/p>\n\n\n\n<p class=\"has-text-align-center\">Scrolle nach unten, um meine beiden Spiele auszuprobieren \u2013 viel Spa\u00df beim Spielen! <\/p>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-gutenbergp5-p5js gutenbergp5-align-center\"><iframe srcdoc=\"\n        <!DOCTYPE html&gt;\n        <html&gt;\n            <body style=&quot;padding: 0; margin: 0;&quot;&gt;<\/body&gt;\n            <script src=&quot;https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                let choices = []; \/\/ Array f\u00fcr die Bilder\nlet playerChoice;\nlet computerChoice;\nlet result;\nlet isLoading = false; \/\/ Status f\u00fcr den Ladevorgang\nlet loadingFrames = 0; \/\/ Z\u00e4hler f\u00fcr den Lade-Animationseffekt\nlet playerScore = 0; \/\/ Spieler-Score\nlet computerScore = 0; \/\/ Computer-Score\n \n \nfunction preload() {\n  \/\/ Lade die Bilder in das Array\n  choices.push({ name: &quot;Schere&quot;, img:(&quot;https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/uploads\/2025\/02\/sschere-1.png&quot;) }); \/\/ Index 0: Schere\n  choices.push({ name: &quot;Stein&quot;, img:(&quot;https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/uploads\/2025\/02\/sstein-1.png&quot;) });  \/\/ Index 1: Stein\n  choices.push({ name: &quot;Papier&quot;, img:(&quot;https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/uploads\/2025\/02\/ppapier-1.png&quot;) }); \/\/ Index 2: Papier\n}\n \nfunction setup() {\n  createCanvas(600, 600);\n \n  \/\/ Erstelle Buttons f\u00fcr die Optionen\n  let schereButton = createButton(&quot;&quot;);\n  schereButton.position(130, 410);\n  schereButton.size(100, 100);\n  schereButton.style(&quot;background-image&quot;, &quot;url('https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/uploads\/2025\/02\/sschere-1.png')&quot;);\n  schereButton.style(&quot;background-size&quot;, &quot;cover&quot;);\n  schereButton.style(&quot;border&quot;, &quot;none&quot;);  \n  schereButton.style(&quot;outline&quot;,&quot;none&quot;);\n  schereButton.mousePressed(() =&gt; playerSelect(0));\n \n \n  let steinButton = createButton(&quot;&quot;);\n  steinButton.position(260, 410);\n  steinButton.size(100, 100);\n  steinButton.style(&quot;background-image&quot;, &quot;url('https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/uploads\/2025\/02\/sstein-1.png')&quot;);\n  steinButton.style(&quot;background-size&quot;, &quot;cover&quot;);\n  steinButton.style(&quot;border&quot;, &quot;none&quot;);  \n  steinButton.style(&quot;outline&quot;,&quot;none&quot;);\n  steinButton.mousePressed(() =&gt; playerSelect(1));\n \n  let papierButton = createButton(&quot;&quot;);\n  papierButton.position(400, 410);\n  papierButton.size(100, 100);\n  papierButton.style(&quot;background-image&quot;, &quot;url('https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/uploads\/2025\/02\/ppapier-1.png')&quot;);\n  papierButton.style(&quot;background-size&quot;, &quot;cover&quot;);\n  papierButton.style(&quot;border&quot;, &quot;none&quot;);  \n  papierButton.style(&quot;outline&quot;,&quot;none&quot;);\n  papierButton.mousePressed(() =&gt; playerSelect(2));\n \n  textAlign(CENTER, CENTER);\n  textSize(20);\n}\n \nfunction draw() {\n  background(218, 246, 247);\n \n   \/\/ Score anzeigen\n   textSize(24);\n   fill(0);\n   text(`Dein Score: ${playerScore}  |  Computer: ${computerScore}`, width \/ 2, 50);\n \n   if (playerScore &gt;= 3) {\n     textSize(60);\n     fill(31, 176, 176);\n     text(&quot;Winner!!&quot;, width \/ 2, height -340);\n     noLoop();\n     return;\n   } else if (computerScore &gt;= 3) {\n     textSize(60);\n     fill(147, 21, 82);\n     text(&quot;Loser!!&quot;, width \/ 2, height -340);\n     noLoop();\n     return;\n   }\n \n \n  \/\/ Anleitung\n  if (!playerChoice) {\n    text(&quot;Choose your Element&quot;, width \/ 2, height -340);\n  }\n \/\/ Ladeanimation anzeigen, wenn der Computer w\u00e4hlt\n if (isLoading) {\n  text(&quot;Computer loading...&quot;, width \/ 2, height - 300);\n \n  \/\/ Lade-Animation (rotierender Kreis)\n  push();\n  translate(width \/ 2, height - 360);\n  rotate(frameCount \/ 10);\n  stroke(0);\n  noFill();\n  strokeWeight(4);\n  arc(0, 0, 50, 50, 0, PI + QUARTER_PI);\n  pop();\n \n  \/\/ Lade-Frames z\u00e4hlen\n  loadingFrames++;\n \n  \/\/ Nach 2 Sekunden (120 Frames bei 60 FPS) wird der Ladevorgang abgeschlossen\n  if (loadingFrames &gt; 120) {\n    isLoading = false;\n    computerChoice = choices[floor(random(choices.length))];\n    checkResult(playerChoice.index, choices.indexOf(computerChoice));\n  }\n}\n \n\/\/ Spieler- und Computerwahl anzeigen, wenn der Ladevorgang abgeschlossen ist\nif (playerChoice !== undefined &amp;&amp; !isLoading) {\n  text(&quot;Your Choice: &quot; + playerChoice.name, width \/ 2, height - 310);\n  if (computerChoice) {\n    text(&quot;Computer Choice: &quot; + computerChoice.name, width \/ 2, height - 270);\n  }\n \n    \/\/ Ergebnis anzeigen\n    if (result) {\n      text(result, width \/ 2, height -420);\n    }\n  }\n}\n \nfunction playerSelect(playerIndex) {\n  playerChoice = { ...choices[playerIndex], index: playerIndex }; \/\/ Spielerwahl aus dem Array\n  computerChoice = undefined; \/\/ Computerwahl zur\u00fccksetzen\n  result = undefined; \/\/ Ergebnis zur\u00fccksetzen\n  isLoading = true; \/\/ Ladevorgang starten\n  loadingFrames = 0; \/\/ Lade-Frames zur\u00fccksetzen\n}\n \nfunction checkResult(playerIndex, computerIndex) {\n  if (playerIndex === computerIndex) {\n    result = &quot;Tie!&quot;;\n  } else if (\n    (playerIndex === 0 &amp;&amp; computerIndex === 2) || \/\/ Schere schl\u00e4gt Papier\n    (playerIndex === 1 &amp;&amp; computerIndex === 0) || \/\/ Stein schl\u00e4gt Schere\n    (playerIndex === 2 &amp;&amp; computerIndex === 1)    \/\/ Papier schl\u00e4gt Stein\n  ) {\n    result = &quot;You won!&quot;;\n    playerScore++; \/\/ Spieler-Score erh\u00f6hen\n  } else {\n    result = &quot;You lost!&quot;;\n    computerScore++; \/\/ Computer-Score erh\u00f6hen\n  }\n}\n \n            <\/script&gt;\n        <\/html&gt;\" sandbox=\"allow-scripts allow-same-origin\" scrolling=\"no\" style=\"overflow:hidden;\" width=\"\" height=\"\" class=\"\" title=\"p5.js canvas\"><\/iframe><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><strong>Game 1: Schere Stein Papier<\/strong><\/p>\n\n\n\n<p>Hier mussten wir mit Hilfe der KI (Chat GPT), ein eigenes beliebiges Spiel programmieren. Zu Dritt in der Gruppe entschieden wir uns f\u00fcr &#8222;Schere Stein Papier&#8220;. W\u00e4hlen Sie zwischen den Buttons und warten Sie, bis der Computer auch entschieden hat. Wer als Erster 3 Punkte erzielt hat, GEWINNT!<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-gutenbergp5-p5js gutenbergp5-align-center\"><iframe srcdoc=\"\n        <!DOCTYPE html&gt;\n        <html&gt;\n            <body style=&quot;padding: 0; margin: 0;&quot;&gt;<\/body&gt;\n            <script src=&quot;https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                \/\/Variablen f\u00fcr B\u00f6rd\n\nlet birdX = 150;\nlet birdY = 300;\nlet birdRadius = 20;\nlet birdVelocity = 0;\nlet gravity = 0.9;\nlet lift = -11;\n\n\/\/Variablen f\u00fcr die R\u00f6hren\n\nlet pipes = [];\nlet pipeWidth = 50;\nlet pipeGap = 180;\nlet pipeSpeed = 7;\n\n\/\/Variable Score\n\nlet score = 0;\n\n\n\nfunction setup() {\n  createCanvas(600, 600);\n  pipes.push(createPipe());\n  noStroke()\n}\n\nfunction draw() {\n  background(218, 246, 247);\n\n  birdVelocity += gravity;\n  birdY += birdVelocity;\n\n\n  fill(255, 171, 150);\n  ellipse(birdX, birdY, birdRadius * 2);\n\n  if (birdY &gt; height) {\n    birdY = height;\n    birdVelocity = 0;\n  }\n\n  if (birdY < 0) {\n    birdY = 0;\n    birdVelocity = 0;\n  }\n\nif(frameCount % 50 == 0){\n  pipes.push(createPipe());\n}\n\n\n  for(let i = 0; i < pipes.length; i++){\npipes[i][0] -= pipeSpeed;\n\n\nfill(208, 237, 183);\nrect(pipes[i][0], 0, pipeWidth, pipes[i][1]);\nrect(pipes[i][0], pipes[i][2], pipeWidth, height-pipes[i][2]);\n\nif (birdX+birdRadius&gt;pipes[i][0] \n  &amp;&amp; birdX - birdRadius < pipes[i][0] + pipeWidth \n  &amp;&amp; (birdY - birdRadius < pipes[i][1] \n  || birdY + birdRadius &gt; pipes[i][2]) \n){\n  noLoop();\n}\n}\n\nif(pipes.length &gt; 0 &amp;&amp; pipes[0][0]+pipeWidth < 0){\n  pipes.shift(); \/\/l\u00f6scht erstes Element aus einem Array\n  score++;\n}\n\n\n\/\/score sichtbar machen\nfill (200, 200, 200 );\ntextSize(20);\ntext(&quot;Score: &quot; + score, 50, 580);\n\n\n}\n\n\nfunction keyPressed(){\n  if (key == &quot; &quot;){\n    birdVelocity = lift; \/\/B\u00f6rd wird nach oben bewegt\n  }\n}\n\nfunction createPipe() {\nlet topHeight = random(height\/2);\nlet bottomStart = topHeight + pipeGap;\nreturn [width, topHeight, bottomStart];\n}\n            <\/script&gt;\n        <\/html&gt;\" sandbox=\"allow-scripts allow-same-origin\" scrolling=\"no\" style=\"overflow:hidden;\" width=\"\" height=\"\" class=\"\" title=\"p5.js canvas\"><\/iframe><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Game 2: Flappy Bird<\/strong><\/p>\n\n\n\n<p>Hier programmierten wir den Klassiker &#8222;Flappy Bird&#8220;. <\/p>\n\n\n\n<p>Man dr\u00fcckt die Leertaste um den Ball zum Fliegen zu bringen, um den Hindernissen auszuweichen.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Informatik ist ein weiteres Computerfach meiner Schule. 2024\/25 haben wir begonnen, unsere ersten eigenen Spiele zu programmieren. Hier kannst du sehen, was mit ein wenig Code und Kreativit\u00e4t m\u00f6glich ist! Scrolle nach unten, um meine beiden Spiele auszuprobieren \u2013 viel Spa\u00df beim Spielen! Game 1: Schere Stein Papier Hier mussten wir mit Hilfe der KI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-temp2","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-162","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=\/wp\/v2\/pages\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=162"}],"version-history":[{"count":25,"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=\/wp\/v2\/pages\/162\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=\/wp\/v2\/pages\/162\/revisions\/221"}],"wp:attachment":[{"href":"https:\/\/bauer-emma.web.kslinz.at\/bauere2024\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}