{"id":758,"date":"2025-02-27T07:13:03","date_gmt":"2025-02-27T07:13:03","guid":{"rendered":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/?page_id=758"},"modified":"2025-07-27T17:35:15","modified_gmt":"2025-07-27T17:35:15","slug":"spieleprojekte-javascript","status":"publish","type":"page","link":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/spieleprojekte-javascript\/","title":{"rendered":"Spieleprojekte JavaScript"},"content":{"rendered":"\n<p>Dino Game<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns has-ti-fg-background-color has-background 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\" style=\"flex-basis:100%\">\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:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                let playerX, playerY; \/\/ Spieler-Koordinaten\nlet playerSize = 20; \/\/ Gr\u00f6\u00dfe des Spielerquadrats\nlet gravity = 0.8;\nlet jumpForce = -10 ;\nlet velocityY = 0;\n \nlet groundY;\nlet obstacles = [];\nlet obstacleWidth = 20;\nlet obstacleHeight = 20;\nlet spawnInterval = 90; \/\/ Interval f\u00fcr Hindernis-Spawn\nlet frameCountSinceLastObstacle = 0;\n \nlet isGameOver = false;\nlet jumpCount = 0; \/\/ Anzahl der Spr\u00fcnge (maximal 2 f\u00fcr Doppel-Jump)\nlet score = 0;\nlet highscore = 0;\n \nfunction setup() {\n  createCanvas(600, 400);\n  playerX = 50;\n  playerY = height - 50;\n  groundY = height - 30;\n}\n \nfunction draw() {\n  background('#3a572e');\n \n  if (!isGameOver) {\n    \/\/ Spielerlogik\n    velocityY += gravity;\n    playerY += velocityY;\n \n    if (playerY &gt;= groundY - playerSize) {\n      playerY = groundY - playerSize;\n      velocityY = 0;\n      jumpCount = 0;\n    }\n \n   \/\/ Hindernis-Logik\n   if (frameCountSinceLastObstacle &gt;= spawnInterval) {\n    let obstacleX = width;\n    let obstacleY = groundY - random([20, 40, 60]);\n    let obstacleW = random([20, 40, 60]);\n    let obstacleH = groundY - obstacleY;\n    obstacles.push([obstacleX, obstacleY, obstacleW, obstacleH]);\n    frameCountSinceLastObstacle = 0;\n    spawnInterval = random(30, 120);\n  } else {\n    frameCountSinceLastObstacle++;\n  }\n\n  for (let i = obstacles.length - 1; i &gt;= 0; i--) {\n    let obsX = obstacles[i][0];\n    let obsY = obstacles[i][1];\n    let obsW = obstacles[i][2];\n    let obsH = obstacles[i][3];\n\n    obstacles[i][0] -= 5; \/\/ Hindernis nach links bewegen\n\n    if (obsX + obsW < 0) {\n      obstacles.splice(i, 1);\n      score++;\n    }\n\n    \/\/ Korrigierte Kollisionsabfrage\n    if (\n      playerX < obsX + obsW &amp;&amp;\n      playerX + playerSize &gt; obsX &amp;&amp;\n      playerY < obsY + obsH &amp;&amp;\n      playerY + playerSize &gt; obsY\n    ) {\n      isGameOver = true;\n      if (score &gt; highscore) {\n        highscore = score;\n      }\n    }\n  }\n\n\n\n    textSize(16)\n    textAlign(LEFT, CENTER);\n    fill(300)\n    text(&quot;Score: &quot; + String(score), 30, 20)\n    text(&quot;HighScore: &quot; + String(highscore), 30, 50)\n    text(&quot;Tap R for reset&quot;,400 ,20)\n \n    \/\/ Zeichne Hindernisse\n    fill('#a62929');\n    for (let obstacle of obstacles) {\n      rect(obstacle[0], obstacle[1], obstacle[2], obstacle[3]);\n    }\n \n    \/\/ Zeichne Spieler\n    fill(300);\n    rect(playerX, playerY, playerSize, playerSize);\n \n    \/\/ Zeichne Boden\n    fill('#6a9159');\n    rect(0, groundY, width, height - groundY);\n  } else {\n    textSize(32);\n    fill(300);\n    textAlign(CENTER, CENTER);\n    text(&quot;Game Over&quot;, width \/ 2, height \/ 2);\n    text(&quot;HighScore: &quot; + String(highscore), width\/2, height \/ 2 + 50 )\n  }\n}\n \nfunction keyPressed() {\n  \/\/ Sprunglogik: Doppelsprung\n  if (key === ' ' &amp;&amp; (playerY === groundY - playerSize || jumpCount < 2)) {\n    velocityY = jumpForce;\n    jumpCount++; \/\/ Erh\u00f6he die Sprunganzahl\n  }\n \n  if (key === 'R' || key === 'r') {\n    resetGame();\n  }\n}\n \nfunction resetGame() {\n  isGameOver = false;\n  playerY = groundY - playerSize;\n  velocityY = 0;\n  obstacles = [];\n  frameCountSinceLastObstacle = 0;\n  jumpCount = 0;\n  score = 0;\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<\/div>\n<\/div>\n\n\n\n<p>Snake<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns has-ti-fg-background-color has-background 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\" style=\"flex-basis:100%\">\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:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/wp-content\/plugins\/easy-p5-js-block\/\/assets\/js\/p5.min.js&quot;&gt;<\/script&gt;\n            <script&gt;\n                \nlet snake = [];\nlet direction = [0, 0]\/\/Bewegunsrichtung als 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\n  createCanvas(400, 400);\n  frameRate(7);\n \n  snake.push([floor(gridSize \/ 2), floor(gridSize \/ 2)])\n\n  spawnFood();\n  score = 0;\n\n\n\n}\n\nfunction draw() {\n  background('#3a572e');\n  drawGrid();\n  fill(300);\n  text(&quot;Score:&quot; + String(score), 10, height - 10)\n\n  fill('#a62929')\n  rect(food[0] * resolution, food[1] * resolution, resolution, resolution)\n\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(300);\n    text(&quot;GAME OVER&quot;, width\/2, height\/2)\n  }\n}\n\nfunction isDead(){\nlet head = snake[snake.length -1];\nif (head[0]<0 || head[0] &gt;= gridSize || head[1]<0 || head[1] &gt;= gridSize){\n  return true\n}\n\nfor (let i = 0; i < snake.length-1; i++){\n\nif(snake[i][0] == head[0] &amp;&amp; snake[i][1]== head[1]){\n\n  return true\n}\n\n}\nreturn false;\n}\n\nfunction drawSnake() {\n\n  for (let i = 0; i < snake.length; i++) {\n    fill(300)\n    rect(snake[i][0] * resolution, snake[i][1] * resolution, resolution, resolution)\n\n  }\n\n}\nfunction updateSnake() {\n\n  if (direction[0] == 0 &amp;&amp; direction[1] == 0) {\n\n    return;\n  }\n  let head = [\n    snake[snake.length - 1][0] + direction[0], \/\/neue x position\n    snake[snake.length - 1][1] + direction[1] \/\/neue y position\n  ];\n\n  snake.push(head); \/\/neuen Kopf in Snake array anh\u00e4ngen\n\n  if (!hasEaten) { \/\/! ist der Not_Operator, Dreht Pool um\n\n    snake.shift()\n  } else {\n\n    hasEaten = false;\n\n  }\n\n}\n\n\n\nfunction drawGrid() {\n\n  stroke(&quot;#3a572e&quot;)\n\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\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];\/\/nach oben\n    }\n  }\n\n  else if (key == &quot;S&quot; || key == &quot;s&quot;) {\n\n    if (direction[1] == 0) {\n      direction = [0, 1];\n    }\n  }\n\n  else if (key == &quot;A&quot; || key == &quot;a&quot;) {\n    if (direction[0] == 0) {\n      direction = [-1, 0];\n    }\n\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\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<\/div>\n<\/div>\n\n\n\n<p>Tic-Tac-Toe<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns has-ti-fg-background-color has-background 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\" style=\"flex-basis:100%\">\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:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/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\nfunction draw() {\n  background('#3a572e');\n  drawBoard();\n  checkWinner();\n\n\n}\n\n\nfunction drawBoard() {\n  \/\/Raster zeichnen\n\n  strokeWeight(4)\n  stroke(300)\n\n  for (let i = 1; i < 3; i++) {\n    line(i * width \/ 3, 0, i * width \/ 3, 400)\n    line(0, i * height \/ 3, 400, i * height \/ 3)\n  }\nnoStroke()\n  \/\/Zeichne Xs und Os\n  textSize(64);\n  textAlign(CENTER, CENTER);\n\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      text(board[row][col], x, y)\n\n\n    }\n  }\n\n}\n\nfunction mousePressed() {\n\n  if (gameOver) {\n    return;\n  }\n\n  let row;\n  let col;\n\n  fill(300)\n  if (mouseY < height \/ 3) {\n    row = 0;\n  }\n  else if (mouseY < (height \/ 3) * 2) {\n    row = 1;\n  }\n  else if (mouseY < height) {\n    row = 2;\n  }\n\n  if (mouseX < width \/ 3) {\n    col = 0;\n  }\n\n  else if (mouseX < (width \/ 3) * 2) {\n    col = 1;\n  }\n\n  else if (mouseX < width) {\n    col = 2;\n  }\n\n\n  if (board[row][col] == &quot;&quot;) {\n\n    board[row][col] = currentPlayer;\n\n    if (currentPlayer == &quot;X&quot;) {\n\n      currentPlayer = &quot;O&quot;\n    }\n    else {\n\n      currentPlayer=&quot;X&quot;\n    }\n\n  }\n\n\n}\n\nfunction checkWinner() {\n\nlet winner; \/\/\u00dcberpr\u00fcfe Gewinner in Spalten Reihen und Diagonalen\n\n\nfor(let i=0; i<3; i++){\n  if(board[i][0]== board[i][1]&amp;&amp; board[i][0]== board[i][2]){\n\n    winner= board[i][0];\n  }\n\n  if(board[0][i]== board[1][i]&amp;&amp; board[0][i]== board[2][i]){\n\n    winner= board[0][i];\n  }\n}\n\n  if(board[0][0]== board[1][1]&amp;&amp; board[0][0]== board[2][2]){\n\n    winner= board[0][0];\n  }\n\n  if(board[0][2]== board[1][1]&amp;&amp; board[0][2]== board[2][0]){\n\n    winner= board[0][2];\n  }\n\n\/\/Unentschieden\n\nlet openSpots =0;\nfor (let row = 0; row < 3; row++) {\n  for (let col = 0; col < 3; col++) {\n\n  if(board[row][col] == &quot;&quot;){\n\nopenSpots++;\n\n  }\n  }\n}\n\n\nif(winner==&quot;X&quot;){\ntextSize(32);\nfill('#a62929')\ntext(winner + &quot; gewinnt&quot;, width\/2, height\/2);\nfill(300)\ngameOver= true;\n\n}\n\nelse if(winner==&quot;O&quot;){\n  textSize(32);\n  fill('#a62929')\n  text(winner + &quot; gewinnt&quot;, width\/2, height\/2);\n  fill(300)\n  gameOver= true;\n  \n  }\n\n  else if(openSpots==0){\n    textSize(32);\n    fill('#a62929')\n    text(&quot;Unentschieden&quot;, width\/2, height\/2);\n    fill(300)\n    gameOver= true;\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<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dino Game Snake Tic-Tac-Toe<\/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-758","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/pages\/758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/comments?post=758"}],"version-history":[{"count":8,"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/pages\/758\/revisions"}],"predecessor-version":[{"id":776,"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/pages\/758\/revisions\/776"}],"wp:attachment":[{"href":"https:\/\/jetzinger-anika.web.kslinz.at\/jetzingera2024\/index.php\/wp-json\/wp\/v2\/media?parent=758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}