{"id":403,"date":"2025-02-27T07:13:00","date_gmt":"2025-02-27T07:13:00","guid":{"rendered":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/?page_id=403"},"modified":"2025-03-21T20:45:26","modified_gmt":"2025-03-21T20:45:26","slug":"spieleprojekte-javascript","status":"publish","type":"page","link":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/spieleprojekte-javascript\/","title":{"rendered":"JavaScript"},"content":{"rendered":"\n<p class=\"has-text-align-center\">Diese Seite habe ich im Rahmen meines Informatikunterrichts erstellt. Hier findest du verschiedene Spiele, die ich mit&nbsp;JavaScript&nbsp;und der p5 Bibliothek&nbsp;programmiert habe. Sie sind nicht nur funktionsf\u00e4hig, sondern auch farblich auf das Design der Website abgestimmt. Jedes Spiel hat auch noch seine individuelle Erkl\u00e4rung daneben stehen. Nat\u00fcrlich kann man alle Spiele direkt hier ausprobieren. &nbsp;<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Flappy Bird <\/h2>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:0;margin-bottom:0\"\/>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id403_6249dd-8e > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id403_6249dd-8e > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id403_6249dd-8e > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id403_6249dd-8e > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id403_6249dd-8e > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id403_6249dd-8e > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id403_6249dd-8e alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column403_3f64ce-63 > .kt-inside-inner-col,.kadence-column403_3f64ce-63 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_3f64ce-63 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_3f64ce-63 > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_3f64ce-63 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_3f64ce-63 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_3f64ce-63{position:relative;}@media all and (max-width: 1024px){.kadence-column403_3f64ce-63 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_3f64ce-63 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_3f64ce-63\"><div class=\"kt-inside-inner-col\">\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:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                \/\/Variablen f\u00fcr Bird\nlet birdX = 150;\nlet birdY = 300;\nlet birdRadius = 20;\nlet birdVelocity = 0;\nlet gravity = 0.8;\nlet lift = -10;\n \n \n\/\/Variablen f\u00fcr die R\u00f6hren\nlet pipes = [];\nlet pipeWidth = 50;\nlet pipeGap = 150;\nlet pipeSpeed = 5;\n \n\/\/Variable Score\nlet score = 0;\n \n \nfunction setup() {\n  createCanvas(400, 400);\n  pipes.push(createPipe());\n}\n \nfunction draw() {\n  background(44,44,44);\n \n  birdVelocity += gravity;\n  birdY += birdVelocity;\n \n  fill(166,166,166);\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 \n  if (frameCount % 120 == 0) {\n    pipes.push(createPipe());\n  }\n \n  for (let i = 0; i < pipes.length; i++) {\n    pipes[i][0] -= pipeSpeed;\n \n    fill(&quot;black&quot;);\n    rect(pipes[i][0], 0, pipeWidth, pipes[i][1]);\n    rect(pipes[i][0], pipes[i][2], pipeWidth, height - pipes[i][2]);\n \n    if (birdX + birdRadius &gt; pipes[i][0]\n      &amp;&amp; birdX - birdRadius < pipes[i][0] + pipeWidth\n      &amp;&amp; (birdY - birdRadius < pipes[i][1] || birdY + birdRadius &gt; pipes[i][2])\n    ) {\n      noLoop();\n    }\n  }\n \n \n  if (pipes.length &gt; 0 &amp;&amp; pipes[0][0] + pipeWidth < 0) {\n    pipes.shift(); \/\/ L\u00f6scht erstes Element in einem Array\n    score++;\n  }\n \n  \/\/Score sichtbar machen auf der Spielfl\u00e4che\n  fill(0);\n  textSize(16);\n  text(&quot;Score: &quot; + score, 10, 40);\n \n \n}\n \nfunction keyPressed() {\n  if (key == &quot; &quot;) {\n    birdVelocity = lift; \/\/ Bird wird nach oben bewegt\n  }\n}\n \nfunction createPipe() {\n  let topHeight = random(height \/ 2)\n  let bottomStart = topHeight + pipeGap;\n  return [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><\/div>\n\n\n<style>.kadence-column403_727295-21 > .kt-inside-inner-col,.kadence-column403_727295-21 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_727295-21 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_727295-21 > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_727295-21 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_727295-21 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_727295-21{position:relative;}@media all and (max-width: 1024px){.kadence-column403_727295-21 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_727295-21 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_727295-21\"><div class=\"kt-inside-inner-col\">\n<p>Dieses Spiel ist inspiriert von dem originalen Flappy Bird aus 2013. Wir haben es im Informatikunterricht gemeinsam vereinfacht nachprogrammiert. <\/p>\n\n\n\n<p>Steuere die kleine Kugel durch eine Reihe von Hindernissen! Dr\u00fccke die&nbsp;<strong>Leertaste<\/strong>, um sie in der Luft zu halten, und weiche den schwarzen R\u00f6hren aus. Ber\u00fchrst du sie oder den Boden, ist das Spiel vorbei. <\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Schere Stein Papier <\/h2>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:0;margin-bottom:0\"\/>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id403_4699ed-94 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id403_4699ed-94 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id403_4699ed-94 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id403_4699ed-94 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id403_4699ed-94 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id403_4699ed-94 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id403_4699ed-94 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column403_419919-53 > .kt-inside-inner-col,.kadence-column403_419919-53 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_419919-53 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_419919-53 > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_419919-53 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_419919-53 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_419919-53{position:relative;}@media all and (max-width: 1024px){.kadence-column403_419919-53 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_419919-53 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_419919-53\"><div class=\"kt-inside-inner-col\">\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:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/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:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2025\/03\/sschere.png&quot;) }); \/\/ Index 0: Schere\n  choices.push({ name: &quot;Stein&quot;, img:(&quot;https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2025\/03\/sstein.png&quot;) });  \/\/ Index 1: Stein\n  choices.push({ name: &quot;Papier&quot;, img:(&quot;https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2025\/03\/ppapier.png&quot;) }); \/\/ Index 2: Papier\n}\n \nfunction setup() {\n  createCanvas(400, 400);\n \n  \/\/ Erstelle Buttons f\u00fcr die Optionen\n  let schereButton = createButton(&quot;&quot;);\n  schereButton.position(50, 300);\n  schereButton.size(50, 50);\n  schereButton.style(&quot;background-image&quot;, &quot;url('https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2025\/03\/sschere.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(180, 300);\n  steinButton.size(50, 50);\n  steinButton.style(&quot;background-image&quot;, &quot;url('https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2025\/03\/sstein.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(300, 300);\n  papierButton.size(50, 50);\n  papierButton.style(&quot;background-image&quot;, &quot;url('https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2025\/03\/ppapier.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(44,44,44);\n \n   \/\/ Score anzeigen\n   textSize(16);\n   fill(0);\n   text(`Your Score: ${playerScore}  |  Computer: ${computerScore}`, width \/ 2, 50);\n \n   if (playerScore &gt;= 3) {\n     textSize(40);\n     fill( 74, 99, 125);\n     text(&quot;Winner!!&quot;, width \/ 2, height - 200);\n     noLoop();\n     return;\n   } else if (computerScore &gt;= 3) {\n     textSize(40);\n     fill(74, 99, 125);\n     text(&quot;Loser!&quot;, width \/ 2, height - 200\n     );\n     noLoop();\n     return;\n   }\n \n \n  \/\/ Anleitung\n  if (!playerChoice) {\n    text(&quot;Choose your Element&quot;, width \/ 2, height \/ 3);\n  }\n \/\/ Ladeanimation anzeigen, wenn der Computer w\u00e4hlt\n if (isLoading) {\n  text(&quot;Loading...&quot;, width \/ 2, height - 150);\n \n  \/\/ Lade-Animation (rotierender Kreis)\n  push();\n  translate(width \/ 2, height - 210);\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;You Choice: &quot; + playerChoice.name, width \/ 2, height - 285);\n  if (computerChoice) {\n    text(&quot;Computer Choice: &quot; + computerChoice.name, width \/ 2, height - 260);\n  }\n \n    \/\/ Ergebnis anzeigen\n    if (result) {\n      text(result, width \/ 2, height -380);\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 win!&quot;;\n    playerScore++; \/\/ Spieler-Score erh\u00f6hen\n  } else {\n    result = &quot;You loose!&quot;;\n    computerScore++; \/\/ Computer-Score erh\u00f6hen\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><\/div>\n\n\n<style>.kadence-column403_8d81d9-72 > .kt-inside-inner-col,.kadence-column403_8d81d9-72 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_8d81d9-72 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_8d81d9-72 > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_8d81d9-72 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_8d81d9-72 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_8d81d9-72{position:relative;}@media all and (max-width: 1024px){.kadence-column403_8d81d9-72 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_8d81d9-72 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_8d81d9-72\"><div class=\"kt-inside-inner-col\">\n<p>Schere Stein Papier war eine Partneraufgabe mit meinen Freundinnen. Wir mussten uns selber schlau machen und mit unserem Wissen und Unterst\u00fctzung von KI ein eigenes Spiel programmieren. <\/p>\n\n\n\n<p>W\u00e4hle zwischen&nbsp;<strong>Schere, Stein oder Papier<\/strong>&nbsp;und finde heraus, ob du gewinnst, verlierst oder es ein Unentschieden gibt. Schere schl\u00e4gt Papier, Papier schl\u00e4gt Stein und Stein schl\u00e4gt Schere. In diesem Spiel, spielst du gegen den Computer. <\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Mine Sweeper<\/h2>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:0;margin-bottom:0\"\/>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id403_24c231-f0 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id403_24c231-f0 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id403_24c231-f0 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id403_24c231-f0 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id403_24c231-f0 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id403_24c231-f0 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id403_24c231-f0 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column403_4e8d21-fe > .kt-inside-inner-col,.kadence-column403_4e8d21-fe > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_4e8d21-fe > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_4e8d21-fe > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_4e8d21-fe > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_4e8d21-fe > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_4e8d21-fe{position:relative;}@media all and (max-width: 1024px){.kadence-column403_4e8d21-fe > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_4e8d21-fe > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_4e8d21-fe\"><div class=\"kt-inside-inner-col\">\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:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                let cols, rows;\nlet w = 40; \/\/ Gr\u00f6\u00dfe der Zellen\nlet grid = [];\nlet mines = [];\nlet revealed = [];\nlet flagged = [];\nlet mineCount = 10;\nlet gameOver = false;\nlet won = false;\n \nfunction setup() {\n  createCanvas(400, 400);\n  cols = floor(width \/ w);\n  rows = floor(height \/ w);\n \n  canvas.oncontextmenu = function (e) { \/\/Unterdr\u00fccken des Kontextmen\u00fcs, Rechtsklick\n    e.preventDefault();\n  };\n \n \n  for (let i = 0; i < rows; i++) { \/\/Variablen f\u00fcllen mit dynamischen Spalten und Zeilen,\n    grid[i] = [];\n    mines[i] = [];\n    revealed[i] = [];\n    flagged[i] = [];\n    for (let j = 0; j < cols; j++) { \/\/ Standwardwerte setzen\n      grid[i][j] = 0;\n      mines[i][j] = false;\n      revealed[i][j] = false;\n      flagged[i][j] = false;\n    }\n  }\n \n  \/\/ Minen zuf\u00e4llig platzieren\n  for (let n = 0; n < mineCount; n++) {\n    let i, j;\n    do {\n      i = floor(random(cols));\n      j = floor(random(rows));\n    } while (mines[i][j]);  \/\/Mine neu platzieren falls Feld schon Besetzt\n    mines[i][j] = true;\n  }\n \n  \/\/ Zahlen berechnen\n  for (let i = 0; i < rows; i++) {\n    for (let j = 0; j < cols; j++) {\n      if (!mines[i][j]) {\n        let count = 0;\n        for (let xOff = -1; xOff <= 1; xOff++) {\n          for (let yOff = -1; yOff <= 1; yOff++) {\n            let ni = i + xOff;\n            let nj = j + yOff;\n            if (ni &gt;= 0 &amp;&amp; ni < cols &amp;&amp; nj &gt;= 0 &amp;&amp; nj < rows &amp;&amp; mines[ni][nj]) {\n              count++;\n            }\n          }\n        }\n        grid[i][j] = count;\n      }\n    }\n  }\n}\n \nfunction draw() {\n  background(44,44,44);\n  if (gameOver) {\n    fill(166,166,166);\n    textSize(32);\n    textAlign(CENTER, CENTER);\n    text(&quot;Game Over&quot;, width \/ 2, height \/ 2);\n    return;\n  }\n \n  if (won) {\n    fill(44,44,44);\n    textSize(32);\n    textAlign(CENTER, CENTER);\n    text(&quot;You Win!&quot;, width \/ 2, height \/ 2);\n    return;\n  }\n \n  for (let i = 0; i < cols; i++) {\n    for (let j = 0; j < rows; j++) {\n      stroke(0);\n      fill(44,44,44);\n      rect(i * w, j * w, w, w);\n \n      if (flagged[i][j]) {\n        fill(166,166,166);\n        triangle(i * w + w * 0.2, j * w + w * 0.8, i * w + w * 0.5, j * w + w * 0.2, i * w + w * 0.8, j * w + w * 0.8);\n      } else if (revealed[i][j]) {\n        if (mines[i][j]) {\n          fill(166,166,166);\n          ellipse(i * w + w \/ 2, j * w + w \/ 2, w * 0.5);\n        } else {\n          fill(166,166,166);\n          rect(i * w, j * w, w, w);\n          if (grid[i][j] &gt; 0) {\n            fill(0);\n            textSize(16);\n            textAlign(CENTER, CENTER);\n            text(grid[i][j], i * w + w \/ 2, j * w + w \/ 2);\n          }\n        }\n      }\n    }\n  }\n  checkWin();\n}\n \nfunction mousePressed() {\n  if (gameOver || won) return;\n  let i = floor(mouseX \/ w);\n  let j = floor(mouseY \/ w);\n  if (i &gt;= 0 &amp;&amp; i < cols &amp;&amp; j &gt;= 0 &amp;&amp; j < rows) {\n    if (mouseButton === LEFT) {\n      if (mines[i][j]) {\n        gameOver = true;\n      }\n      reveal(i, j);\n    } else if (mouseButton === RIGHT) {\n      flagged[i][j] = !flagged[i][j];\n    }\n  }\n}\n \nfunction reveal(i, j) {\n  if (i < 0 || i &gt;= cols || j < 0 || j &gt;= rows || revealed[i][j] || flagged[i][j]) {\n    return;\n  }\n  revealed[i][j] = true;\n  if (grid[i][j] === 0) {\n    for (let xOff = -1; xOff <= 1; xOff++) {\n      for (let yOff = -1; yOff <= 1; yOff++) {\n        reveal(i + xOff, j + yOff);\n      }\n    }\n  }\n}\n \nfunction checkWin() {\n  let unrevealedCount = 0;\n  for (let i = 0; i < cols; i++) {\n    for (let j = 0; j < rows; j++) {\n      if (!revealed[i][j] &amp;&amp; !mines[i][j]) {\n        unrevealedCount++;\n      }\n    }\n  }\n  if (unrevealedCount == 0) {\n    won = true;\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><\/div>\n\n\n<style>.kadence-column403_305998-d2 > .kt-inside-inner-col,.kadence-column403_305998-d2 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_305998-d2 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_305998-d2 > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_305998-d2 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_305998-d2 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_305998-d2{position:relative;}@media all and (max-width: 1024px){.kadence-column403_305998-d2 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_305998-d2 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_305998-d2\"><div class=\"kt-inside-inner-col\">\n<p>Finde alle sicheren Felder, ohne auf eine Mine zu treten. Klicke auf ein Feld, um es aufzudecken. Die Zahlen zeigen dir, wie viele Minen sich in der N\u00e4he befinden. Nutze diese Hinweise, um das Spielfeld strategisch frei zu machen.<\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Snake <\/h2>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:0;margin-bottom:0\"\/>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id403_76cae2-88 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id403_76cae2-88 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id403_76cae2-88 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id403_76cae2-88 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id403_76cae2-88 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id403_76cae2-88 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id403_76cae2-88 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column403_1272e6-1d > .kt-inside-inner-col,.kadence-column403_1272e6-1d > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_1272e6-1d > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_1272e6-1d > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_1272e6-1d > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_1272e6-1d > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_1272e6-1d{position:relative;}@media all and (max-width: 1024px){.kadence-column403_1272e6-1d > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_1272e6-1d > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_1272e6-1d\"><div class=\"kt-inside-inner-col\">\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:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                let snake = []\nlet direction = [0, 0] \/\/bewegungsrichtung al Array [x,y]\nlet food;\nlet gridSize = 20;\nlet resolution = 20; \/\/ Pixelgr\u00f6\u00dfe\nlet hasEaten = false;\nlet headPosition;\nlet score;\n \nfunction setup() {\n  createCanvas(400, 400);\n  frameRate(5);\n \n  snake.push([floor(gridSize \/ 2), floor(gridSize \/ 2)]);\n  spawnFood();\n  score = 0;\n \n \n}\n \n \nfunction draw() {\n  background(44,44,44);\n  fill(0)\n  textSize(15)\n  text(&quot;Score: &quot; + String(score), 10, height)\n \n  drawGrid();\n \n  fill('black');\n  rect(food[0] * resolution, food[1] * resolution, resolution, resolution);\n  updateSnake();\n  drawSnake();\n \n  headPosition = snake[snake.length - 1];\n \n  if (headPosition[0] == food[0] &amp;&amp; headPosition[1] == food[1]) {\n    hasEaten = true;\n    score++;\n    spawnFood();\n  }\n \n  if(isDead()){\n    noLoop();\n    textAlign(CENTER,CENTER);\n    textSize(32);\n    fill(0);\n    text(&quot;Loser&quot;,width\/2,height\/2)\n  }\n \n \n}\n \nfunction isDead() {\n  let head = snake[snake.length - 1];\n \n  if (head[0] < 0 || head[0] &gt;= gridSize || head[1] < 0 || head[1] &gt;= gridSize) {\n    return true;\n  }\n \n  for (let i = 0; i < snake.length-1; i++) {\n    if (snake[i][0] == head[0] &amp;&amp; snake[i][1] == head[1]) {\n      return true;\n    }\n  }\n \n  return false;\n \n}\n \n \nfunction drawSnake() {\n  for (let i = 0; i < snake.length; i++) {\n    fill(74, 99, 125)\n    rect(snake[i][0] * resolution, snake[i][1] * resolution, resolution, resolution);\n  }\n}\n \nfunction updateSnake() {\n  if (direction[0] == 0 &amp;&amp; direction[1] == 0) {\n \n  }\n \n  let head = [\n    snake[snake.length - 1][0] + direction[0],\/\/Neue x-Postition\n    snake[snake.length - 1][1] + direction[1] \/\/Neue y-postion\n  ];\n \n  snake.push(head); \/\/neuen Kopf in snake array anh\u00e4ngen\n \n  if (!hasEaten) { \/\/1 ist der NOT operator, dreht Bool um\n    snake.shift()\/\/\n  } else {\n    hasEaten = false;\n  }\n \n \n}\n \nfunction drawGrid() {\n  stroke('black')\n  for (let i = 0; i < gridSize; i++) {\n    line(i * resolution, 0, i * resolution, height)\n    line(0, i * resolution, width, i * resolution)\n \n  }\n \n}\nfunction spawnFood() {\n  food = [floor(random(gridSize)), floor(random(gridSize))]\n \n}\n \nfunction keyPressed() {\n  if (key == &quot;W&quot; || key == &quot;w&quot;) {\n    if (direction[1] == 0) {\n      direction = [0, -1];\n    }\n  } else if (key == &quot;S&quot; || key == &quot;s&quot;) {\n    if (direction[1] == 0) {\n      direction = [0, 1];\n    }\n  } else if (key == &quot;A&quot; || key == &quot;a&quot;) {\n    if (direction[0] == 0) {\n      direction = [-1, 0];\n    }\n  } else if (key == &quot;D&quot; || key == &quot;d&quot;) {\n    if (direction[0] == 0) {\n      direction = [1, 0];\n    }\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><\/div>\n\n\n<style>.kadence-column403_72eabe-ac > .kt-inside-inner-col,.kadence-column403_72eabe-ac > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_72eabe-ac > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_72eabe-ac > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_72eabe-ac > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_72eabe-ac > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_72eabe-ac{position:relative;}@media all and (max-width: 1024px){.kadence-column403_72eabe-ac > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_72eabe-ac > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_72eabe-ac\"><div class=\"kt-inside-inner-col\">\n<p>Steuere das graue Quadrat mit den&nbsp;<strong>Tasten W, A, S,  D<\/strong>&nbsp;\u00fcber das Spielfeld. Sammle die blauen Punkte, die am ganzen Spielfeld an verschiedenen Orten vorkommen. Je pr\u00e4ziser du dich bewegst, desto besser wird dein Highscore. <\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">TikTakToe<\/h2>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:0;margin-bottom:0\"\/>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kb-row-layout-id403_ec0b41-7b > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id403_ec0b41-7b > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id403_ec0b41-7b > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id403_ec0b41-7b > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id403_ec0b41-7b > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id403_ec0b41-7b > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id403_ec0b41-7b alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column403_16757c-ef > .kt-inside-inner-col,.kadence-column403_16757c-ef > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_16757c-ef > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_16757c-ef > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_16757c-ef > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_16757c-ef > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_16757c-ef{position:relative;}@media all and (max-width: 1024px){.kadence-column403_16757c-ef > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_16757c-ef > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_16757c-ef\"><div class=\"kt-inside-inner-col\">\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:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                \/*\n\/\/TicTacToe\n\nlet board;\nlet currentPlayer;\nlet gameOver;\n\nfunction setup() {\n  createCanvas(400, 400);\n  currentPlayer = &quot;X&quot;\n  gameOver = false;\n  board = [\n    [&quot;&quot;, &quot;&quot;, &quot;&quot;],\n    [&quot;&quot;, &quot;&quot;, &quot;&quot;],\n    [&quot;&quot;, &quot;&quot;, &quot;&quot;]\n\n  ]\n}\n\nfunction draw() {\n  background(220);\n  drawBoard();\n  checkWinner();\n}\n\n\nfunction drawBoard(){\n  \/\/ Raster zeichnen\n\n  strokeWeight(4);\n\n  for(let i = 1; i < 3; i++){\n    line(i*width\/3,0,i*width\/3,height)\n    line(0,i*height\/3,width,i*height\/3)\n  }\n\n  \/\/Zeichne Xs und Os\n  textSize(64);\n  textAlign(CENTER,CENTER);\n\n  for(let row=0;row<3;row++){\n    for(let col = 0; col<3; col++){\n\n      let x = col * width\/3 + width\/6;\n      let y = row * height\/3 + height \/6;\n\n\n    text(board[row][col], x, y)\n    }\n  }\n\n}\n\nfunction mousePressed(){\n  if (gameOver){\n    return; \n  }\n\nlet row;\nlet col;\n\nif(mouseY < height\/3){\n  row = 0; \n} else if (mouseY < (height\/3)*2){\n  row = 1;\n} else if (mouseY < height){\n  row = 2;\n}\n\nif (mouseX < width\/3){\n  col = 0;\n} else if (mouseX < (width\/3)*2){\n  col = 1;\n} else if (mouseX  < width){\n  col = 2;\n}\n\nif(board[row][col]==&quot;&quot;){\n  board[row][col] = currentPlayer;\n\n  if(currentPlayer == &quot;X&quot;){\n    currentPlayer = &quot;O&quot;;\n  } else {\n    currentPlayer = &quot;X&quot;\n  }\n}\n\n}\n\n\n\n\nfunction checkWinner(){ \n\n  let winner; \n  \/\/\u00dcberpr\u00fcfe Gewinner in Spalten, Reihen und Diagonalen\n  for(let i = 0; i < 3; i++){\n    if (board[i][0]==board[i][1] &amp;&amp; board [i][0]== board[i][2]){\n      winner = board[i][0];\n    }\n    if (board[0][i]==board[1][i] &amp;&amp; board [0][i]== board[2][i]){\n      winner = board[0][i];\n  }\n}\n\n  if(board[0][0] == board[1][1] &amp;&amp; board [0][0] == [2][2]){\n    winner = board [0][0];\n  }\n  if(board[0][2] == board[1][1] &amp;&amp; board [0][2] == [2][0]){\n    winner = board [0][2];\n  }\n\n  \/\/Unentschieden\n\n  let openSpots = 0;\n  for(let row = 0; row < 3; row++){\n    for(let col = 0; col < 3; col++){\n      if (board[row][col] == &quot;&quot;){\n        openSpots++;\n      }\n    }\n  }\n\n  if (winner == &quot;X&quot;){\n    textSize(32);\n    text(winner + &quot; gewinnt!!&quot;, width \/ 2, height \/ 2);\n    gameOver = true;\n  } else if (winner == &quot;O&quot;){\n    textSize(32);\n    text(winner + &quot; gewinnt!!&quot;, width \/ 2, height \/ 2);\n    gameOver = true;\n  } else if(openSpots == 0){\n    textSize(32);\n    text(winner + &quot; unentschieden&quot;, width \/ 2, height \/ 2);\n    gameOver = true;\n  }\n\n}\n*\/\n\n\n\n\n\/\/ TicTacToe\n\nlet board;\nlet currentPlayer;\nlet gameOver;\n\n\nfunction setup() {\n  createCanvas(400, 400);\n  currentPlayer = &quot;X&quot;\n  gameOver = false;\n  board = [\n    [&quot;&quot;, &quot;&quot;, &quot;&quot;],\n    [&quot;&quot;, &quot;&quot;, &quot;&quot;],\n    [&quot;&quot;, &quot;&quot;, &quot;&quot;]\n  ]\n\n}\n\nfunction draw() {\n  background(44,44,44);\n  drawBoard();\n  checkWinner();\n}\n\n\nfunction drawBoard() {\n  \/\/Raster zeichnen\n\n  strokeWeight(4);\n\n  for (let i = 1; i < 3; i++) {\n    line(i * width \/ 3, 0, i * width \/ 3, height)\n    line(0, i * height \/ 3, width, i * height \/ 3)\n  }\n\n\n  \/\/Zeichne Xs und Os\n  textSize(64);\n  textAlign(CENTER, CENTER);\n\n  for (let row = 0; row < 3; row++) {\n    for (let col = 0; col < 3; col++) {\n\n      let x = col * width \/ 3 + width \/ 6;\n      let y = row * height \/ 3 + height \/ 6;\n      text(board[row][col], x, y)\n    }\n  }\n}\n\nfunction mousePressed() {\n  if (gameOver) {\n    return;\n  }\n\n  let row;\n  let col;\n\n  if (mouseY < height \/ 3) {\n    row = 0;\n  } else if (mouseY < (height \/ 3) * 2) {\n    row = 1;\n  } else if (mouseY < height) {\n    row = 2;\n  }\n\n  if (mouseX < width \/ 3) {\n    col = 0;\n  } else if (mouseX < (width \/ 3) * 2) {\n    col = 1;\n  } else if (mouseX < width) {\n    col = 2;\n  }\n\n  if (board[row][col] == &quot;&quot;) {\n    board[row][col] = currentPlayer;\n    if (currentPlayer == &quot;X&quot;) {\n      currentPlayer = &quot;O&quot;;\n    } else {\n      currentPlayer = &quot;X&quot;\n    }\n\n  }\n\n\n}\n\n\nfunction checkWinner() {\n\n  let winner;\n  \/\/ \u00dcberpr\u00fcfe Gewinner in Spalten, Reihen und Diagonalen\n  for (let i = 0; i < 3; i++) {\n    if (board[i][0] == board[i][1] &amp;&amp; board[i][0] == board[i][2]) {\n      winner = board[i][0];\n    }\n    if (board[0][i] == board[1][i] &amp;&amp; board[0][i] == board[2][i]) {\n      winner = board[0][i]\n    }\n  }\n  if (board[0][0] == board[1][1] &amp;&amp; board[0][0] == board[2][2]) {\n    winner = board[0][0];\n  }\n\n  if (board[0][2] == board[1][1] &amp;&amp; board[0][2] == board[2][0]) {\n    winner = board[0][2];\n  }\n\n  \/\/ Unentschieden\n  let openSpots = 0;\n  for (let row = 0; row < 3; row++) {\n    for (let col = 0; col < 3; col++) {\n      if (board[row][col] == &quot;&quot;) {\n        openSpots++;\n      }\n    }\n  }\n\n\n  if (winner == &quot;X&quot;) {\n    textSize(32);\n    text(winner + &quot; gewinnt!&quot;, width \/ 2, height \/ 2);\n    gameOver = true;\n  } else if (winner == &quot;O&quot;) {\n    textSize(32);\n    text(winner + &quot; gewinnt&quot;, width \/ 2, height \/ 2);\n    gameOver = true;\n  } else if (openSpots == 0) {\n    textSize(32);\n    text(&quot;Unentschieden&quot;, width \/ 2, height \/ 2);\n    gameOver = true;\n  }\n\n\n\n\n\n\n\n\n\n\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><\/div>\n\n\n<style>.kadence-column403_709c69-a4 > .kt-inside-inner-col,.kadence-column403_709c69-a4 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column403_709c69-a4 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column403_709c69-a4 > .kt-inside-inner-col{flex-direction:column;}.kadence-column403_709c69-a4 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column403_709c69-a4 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column403_709c69-a4{position:relative;}@media all and (max-width: 1024px){.kadence-column403_709c69-a4 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column403_709c69-a4 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column403_709c69-a4\"><div class=\"kt-inside-inner-col\">\n<p>Das bekannte 3\u00d73-Spiel f\u00fcr zwei Spieler. Setze abwechselnd&nbsp;<strong>X<\/strong>&nbsp;oder&nbsp;<strong>O<\/strong>&nbsp;in ein freies Feld (X-Beginnt). Wer zuerst drei in einer Reihe, Spalte oder Diagonale hat, gewinnt. Dieses Spiel muss mit einer zweiten Person gespielt werden. <\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diese Seite habe ich im Rahmen meines Informatikunterrichts erstellt. Hier findest du verschiedene Spiele, die ich mit&nbsp;JavaScript&nbsp;und der p5 Bibliothek&nbsp;programmiert habe. Sie sind nicht nur funktionsf\u00e4hig, sondern auch farblich auf das Design der Website abgestimmt. Jedes Spiel hat auch noch seine individuelle Erkl\u00e4rung daneben stehen. Nat\u00fcrlich kann man alle Spiele direkt hier ausprobieren. &nbsp; Flappy &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/spieleprojekte-javascript\/\" class=\"more-link\">Mehr <span class=\"screen-reader-text\">\u00fcber &#8222;JavaScript&#8220; <\/span>Lesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":382,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":false,"footnotes":""},"class_list":["post-403","page","type-page","status-publish","has-post-thumbnail","hentry"],"featured_media_urls":{"thumbnail":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-150x150.jpg",150,150,true],"medium":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-300x169.jpg",300,169,true],"medium_large":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled.jpg",768,432,false],"large":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-1024x576.jpg",950,534,true],"1536x1536":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-2048x1152.jpg",2048,1152,true],"inspiro-featured-image":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-2000x1125.jpg",2000,1125,true],"inspiro-loop":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-950x320.jpg",950,320,true],"inspiro-loop@2x":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-1900x640.jpg",1900,640,true],"portfolio_item-thumbnail":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-600x400.jpg",600,400,true],"portfolio_item-thumbnail@2x":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-1200x800.jpg",1200,800,true],"portfolio_item-masonry":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-600x338.jpg",600,338,true],"portfolio_item-masonry@2x":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-1200x675.jpg",1200,675,true],"portfolio_item-thumbnail_cinema":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-800x335.jpg",800,335,true],"portfolio_item-thumbnail_portrait":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-600x900.jpg",600,900,true],"portfolio_item-thumbnail_portrait@2x":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-1200x1440.jpg",1200,1440,true],"portfolio_item-thumbnail_square":["https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/wp-content\/uploads\/2024\/06\/IMG_7576-scaled-800x800.jpg",800,800,true]},"_links":{"self":[{"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/pages\/403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":41,"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/pages\/403\/revisions"}],"predecessor-version":[{"id":481,"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/pages\/403\/revisions\/481"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/media\/382"}],"wp:attachment":[{"href":"https:\/\/pesendorfer-sophie.web.kslinz.at\/pesendorfers2024\/index.php\/wp-json\/wp\/v2\/media?parent=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}