{"id":17,"date":"2025-02-25T19:29:26","date_gmt":"2025-02-25T19:29:26","guid":{"rendered":"https:\/\/orthofer-gertraud.web.kslinz.at\/?page_id=17"},"modified":"2025-05-28T10:06:32","modified_gmt":"2025-05-28T10:06:32","slug":"ps5-js-mit-plugin","status":"publish","type":"page","link":"https:\/\/orthofer-gertraud.web.kslinz.at\/?page_id=17","title":{"rendered":"PS5.js-mit Plugin"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Gitter-Anzeige<\/h2>\n\n\n<p>[ps5jsGitter]<\/p>\n<\/div>\n\n\n\n<p>Unicorn Spiel<\/p>\n\n\n<p>[ps5js_uja]<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\"><p>[ps5js]<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Hasendico<\/h2>\n\n\n\n<style>\n        #formInput label {\n        color: white;\n        }\n        #formInput input {\n        width: 50px;\n        }\n    <\/style>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/p5@1.9.0\/lib\/p5.min.js\"><\/script>\n    \n    <div id=\"formInput\"><\/div>\n    <div id=\"canvas-container\"><\/div>\n    <script>\n\nconst canvasSize = 500;\nlet score = 0; \/\/ Spielerstand\nlet gameDuration = 40;\nlet gameTime = gameDuration; \/\/ Zeit in Sekunden\nlet timer = 0; \/\/ Timer f\u00fcr das Spiel\nlet targetColor = '#9e5c56'; \/\/ Die Ziel-Farbe des Hasen am Anfang\nlet currentColor = ''; \/\/ Die Farbe des angezeigten Hasen\nlet currentHasePosition = -1; \/\/ Die Position des Hasen auf dem Spielfeld\nlet gameOver = false; \/\/ Spielstatus (ob es vorbei ist)\nlet colorChangeTimer; \/\/ Timer f\u00fcr das \u00c4ndern der Ziel-Farbe\nconst gridSize = 3;\nlet fieldWidth = canvasSize \/ gridSize;\nlet xCord = 0;\nlet yCord = 0;\nlet keyIsPressed = false;\nlet breite = canvasSize \/ 10;\nlet gameStarted = false;\nlet p;\n\nlet hasenGrid = Array(gridSize)\n    .fill(null)\n    .map(() => Array(gridSize).fill(null));\n\nnew p5((p5Instance) => {\n    p = p5Instance;\n    p.setup = setup;\n    p.draw = draw;\n    p.mousePressed = mousePressed;\n    p.keyPressed = keyPressed;\n});\n\nfunction setup() {\n    const canvas = p.createCanvas(canvasSize, canvasSize);\n    canvas.parent('canvas-container');\n    p.colorMode(p.HSB);\n    p.frameRate(1);\n    console.log('setup .... ' + gameStarted);\n    keyIsPressed = false;\n    gameOver = false;\n    if (!gameStarted) {\n        gameStarted = true;\n        startGame();\n    }\n}\nfunction keyPressed() {\n    console.log('Key Pressed');\n    keyIsPressed = false;\n    if (!gameStarted && gameOver) {\n        gameStarted = true;\n        gameOver = false;\n        gameTime = gameDuration;\n        console.log('... im if bei key pressed');\n        p.loop();\n        startGame();\n    }\n}\nfunction draw() {\n    console.log('draw ... ');\n    if (!gameStarted) {\n        console.log('in draw -- gameStarted ist false');\n        drawStartScreen();\n        return;\n    }\n    if (gameOver) {\n        console.log('in draw -- gameOver ist true');\n        console.log(gameOver);\n        drawGameOver();\n        return;\n    }\n    p.background('#8A9B68');\n    drawBurrows(); \/\/ Danach die L\u00f6cher, damit sie nicht die Hasen \u00fcberdecken.\n    drawHasen(); \/\/ Hasen zuerst zeichnen!\n    drawTargetColor();\n    drawScoreAndTime();\n}\nfunction drawBurrows() {\n    p.noStroke();\n    p.fill('#E5B181');\n    for (let row = 0; row < gridSize; row++) {\n        for (let col = 0; col < gridSize; col++) {\n            let x = col * fieldWidth + fieldWidth \/ 2;\n            let y = row * fieldWidth + fieldWidth \/ 2;\n            p.ellipse(x, y + 15, fieldWidth \/ 1.5);\n        }\n    }\n}\nfunction drawTargetColor() {\n    p.stroke(2);\n    p.fill(targetColor);\n    p.rect(canvasSize \/ 3, 10, canvasSize \/ 3, 20);\n    p.noStroke();\n    p.fill('white');\n    p.textSize(20);\n    p.textAlign(p.CENTER, p.BASELINE);\n    \/\/p.text('Zielfarbe', canvasSize \/ 2, 27);\n}\nfunction drawScoreAndTime() {\n    p.fill('black');\n    p.textSize(24);\n    p.text(`Score: ${score}`, canvasSize - 80, 30);\n    p.text(`Time: ${gameTime}`, 65, 30);\n}\nfunction drawHasen() {\n    for (let row = 0; row < gridSize; row++) {\n        for (let col = 0; col < gridSize; col++) {\n            if (hasenGrid[row][col]) {\n                drawHase(row, col, hasenGrid[row][col]);\n            }\n        }\n    }\n}\nfunction drawHase(row, col, color) {\n    const xCord = col * fieldWidth + fieldWidth \/ 2;\n    const yCord = row * fieldWidth + fieldWidth \/ 2;\n    p.fill(color);\n    \/\/ Hasenohren\n    p.ellipse(xCord - breite \/ 4, yCord - breite \/ 1.5, breite \/ 3, breite);\n    p.fill('black');\n    p.ellipse(xCord - breite \/ 4, yCord - breite \/ 1.5, breite \/ 4, breite - breite \/ 8);\n    p.fill(color);\n    p.ellipse(xCord + breite \/ 4, yCord - breite \/ 1.5, breite \/ 3, breite);\n    p.fill('black');\n    p.ellipse(xCord + breite \/ 4, yCord - breite \/ 1.5, breite \/ 4, breite - breite \/ 8);\n    \/\/ Kopf\n    p.fill(color);\n    p.circle(xCord, yCord, breite);\n    \/\/ Gesicht\n    p.fill('black');\n    \/\/ Nase\n    let noseBaseLeft = { x: xCord - breite \/ 10, y: yCord + breite \/ 5 };\n    let noseBaseRight = { x: xCord + breite \/ 10, y: yCord + breite \/ 5 };\n    let noseTip = { x: xCord, y: yCord + breite \/ 3 };\n    p.triangle(noseBaseLeft.x, noseBaseLeft.y, noseBaseRight.x, noseBaseRight.y, noseTip.x, noseTip.y);\n    \/\/ Augen\n    let eyeWidth = breite \/ 6;\n    let eyeHeight = (breite \/ 6) * 1.8;\n    let eyeOffset = breite \/ 5;\n    let d = eyeWidth \/ 4;\n    \/\/ Linkes Auge\n    p.fill('black');\n    p.ellipse(xCord - eyeOffset, yCord - breite \/ 10, eyeWidth, eyeHeight);\n    p.fill('white');\n    p.circle(xCord - eyeOffset - eyeWidth \/ 8, yCord - breite \/ 10 - eyeHeight \/ 6, d);\n    \/\/ Rechtes Auge\n    p.fill('black');\n    p.ellipse(xCord + eyeOffset, yCord - breite \/ 10, eyeWidth, eyeHeight);\n    p.fill('white');\n    p.circle(xCord + eyeOffset - eyeWidth \/ 8, yCord - breite \/ 10 - eyeHeight \/ 6, d);\n}\nfunction startGame() {\n    console.log('... START Game()');\n    gameStarted = true;\n    gameOver = false;\n    score = 0;\n    startTimer();\n    startColorChangeTimer();\n    spawnHase();\n}\nfunction startTimer() {\n    if (timer)\n        clearInterval(timer);\n    timer = setInterval(() => {\n        gameTime--;\n        if (gameTime <= -1) {\n            clearInterval(timer);\n            gameOver = true;\n        }\n    }, 1000);\n}\nfunction startColorChangeTimer() {\n    colorChangeTimer = setInterval(() => {\n        const colors = ['#9e5c56', '#8EB897', '#DDD78D', '#586F7C', '#B18FCF'];\n        let newColor;\n        do {\n            newColor = colors[Math.floor(Math.random() * colors.length)];\n        } while (newColor === targetColor);\n        targetColor = newColor;\n    }, 4000);\n}\nfunction spawnHase() {\n    if (gameOver)\n        return;\n    hasenGrid = Array(gridSize)\n        .fill(null)\n        .map(() => Array(gridSize).fill(null));\n    let row = Math.floor(Math.random() * gridSize);\n    let col = Math.floor(Math.random() * gridSize);\n    const colors = ['#9e5c56', '#8EB897', '#DDD78D', '#586F7C', '#B18FCF'];\n    hasenGrid[row][col] = colors[Math.floor(Math.random() * colors.length)];\n    setTimeout(() => {\n        hasenGrid[row][col] = null;\n        setTimeout(spawnHase, 200);\n    }, 2500);\n}\nfunction mousePressed() {\n    if (!gameStarted)\n        return;\n    for (let row = 0; row < gridSize; row++) {\n        for (let col = 0; col < gridSize; col++) {\n            let x = col * fieldWidth + fieldWidth \/ 2;\n            let y = row * fieldWidth + fieldWidth \/ 2;\n            let d = Math.sqrt(Math.pow((p.mouseX - x), 2) + Math.pow((p.mouseY - y), 2));\n            if (d < fieldWidth \/ 3 &#038;&#038; hasenGrid[row][col]) {\n                if (hasenGrid[row][col] === targetColor) {\n                    score++;\n                }\n                else {\n                    score--;\n                }\n                hasenGrid[row][col] = null;\n                p.redraw();\n                break;\n            }\n        }\n    }\n}\nfunction drawStartScreen() {\n    p.background('#FAFDF3');\n    p.fill('#A18167');\n    p.textSize(80);\n    p.textAlign(p.CENTER, p.CENTER);\n    p.text('DISCOHASE', canvasSize \/ 2, canvasSize \/ 3);\n    p.fill('#D1B7A1');\n    p.rect(canvasSize \/ 5, canvasSize \/ 2, canvasSize \/ 1.68, 50, 20);\n    p.fill('white');\n    p.textSize(38);\n    p.text('Los gehts!', canvasSize \/ 2, canvasSize \/ 2 + 25);\n}\nfunction drawGameOver() {\n    p.noLoop();\n    p.colorMode(p.RGB);\n    p.fill(0, 0, 0, 150);\n    p.rect(0, 0, canvasSize, canvasSize);\n    p.colorMode(p.HSB);\n    p.fill('white');\n    p.textSize(32);\n    p.textAlign(p.CENTER, p.CENTER);\n    if (score == 1 || score == -1) {\n        p.text(`Score: ${score} Hase`, canvasSize \/ 2, canvasSize \/ 2);\n    }\n    else {\n        p.text(`Score: ${score} Hasen`, canvasSize \/ 2, canvasSize \/ 2);\n    }\n    p.textSize(25);\n    p.text(`press KEY for restart`, canvasSize \/ 2, canvasSize \/ 1.5);\n    console.log('wir waren hier');\n    \/* if (keyIsPressed == true) {\n      gameStarted = true;\n    }*\/\n    gameStarted = false;\n}\n\n\n\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Gitter-Anzeige Unicorn Spiel Hasendico<\/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-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":19,"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/orthofer-gertraud.web.kslinz.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}