{"id":163,"date":"2025-01-28T12:50:33","date_gmt":"2025-01-28T12:50:33","guid":{"rendered":"https:\/\/luis2.colex.io\/?page_id=163"},"modified":"2025-01-28T14:26:04","modified_gmt":"2025-01-28T14:26:04","slug":"seite-2","status":"publish","type":"page","link":"https:\/\/luis2.colex.io\/?page_id=163","title":{"rendered":"Vorangefertigte Spiele"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"163\" class=\"elementor elementor-163\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cc857d e-flex e-con-boxed e-con e-parent\" data-id=\"1cc857d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-161bd79 e-flex e-con-boxed e-con e-parent\" data-id=\"161bd79\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bf57a8 elementor-widget elementor-widget-html\" data-id=\"0bf57a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"erni-ball-game\" style=\"font-family: Arial, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; padding: 10px;\">\n    <div id=\"gameArea\" style=\"position: relative; width: 200px; height: 200px; border: 2px solid #000; background-color: #fff; overflow: hidden;\">\n        <div id=\"score\" style=\"position: absolute; top: 5px; left: 5px; font-size: 12px; font-weight: bold;\">Punkte: 0<\/div>\n        <div id=\"timer\" style=\"position: absolute; top: 5px; right: 5px; font-size: 12px; font-weight: bold;\">Zeit: 0s<\/div>\n        <div id=\"ball\" style=\"position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: red; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; z-index: 10;\"><\/div> <!-- z-index hinzugef\u00fcgt -->\n    <\/div>\n    <button id=\"restartButton\" onclick=\"startGame()\" style=\"margin-top: 10px; padding: 5px 10px; font-size: 12px; background-color: #4CAF50; color: white; border: none; cursor: pointer;\">Neustart<\/button>\n<\/div>\n\n<script>\n    let score = 0;\n    let startTime = null;\n    let gameOver = false;\n    const gameArea = document.getElementById('gameArea');\n    const ball = document.getElementById('ball');\n    const scoreElement = document.getElementById('score');\n    const timerElement = document.getElementById('timer');\n    const restartButton = document.getElementById('restartButton');\n    \n    function randomPosition() {\n        const x = Math.random() * (gameArea.offsetWidth - ball.offsetWidth);\n        const y = Math.random() * (gameArea.offsetHeight - ball.offsetHeight);\n        ball.style.left = `${x}px`;\n        ball.style.top = `${y}px`;\n    }\n\n    function startGame() {\n        score = 0;\n        gameOver = false;\n        scoreElement.textContent = `Punkte: ${score}`;\n        timerElement.textContent = `Zeit: 0s`;\n\n        randomPosition();\n        startTime = Date.now();\n\n        \/\/ Entferne die vorherige Klick-EventListener, falls er vorhanden war\n        ball.removeEventListener('click', handleBallClick);\n\n        \/\/ F\u00fcge den EventListener erneut hinzu, um das Spiel zu starten\n        ball.addEventListener('click', handleBallClick);\n\n        restartButton.style.display = 'none'; \/\/ Verstecke den Neustart-Button w\u00e4hrend des Spiels\n    }\n\n    function handleBallClick() {\n        if (gameOver) return;\n\n        score++;\n        scoreElement.textContent = `Punkte: ${score}`;\n        \n        \/\/ Animation nach dem Klick: Vergr\u00f6\u00dfern und Blinken\n        ball.style.transform = 'scale(1.2)';\n        ball.style.backgroundColor = 'green';\n        \n        setTimeout(() => {\n            ball.style.transform = 'scale(1)';\n            ball.style.backgroundColor = 'red';\n        }, 200);\n\n        if (score === 10) {\n            gameOver = true;\n            const elapsedTime = ((Date.now() - startTime) \/ 1000).toFixed(2);\n            timerElement.textContent = `Zeit: ${elapsedTime}s`;\n            alert(`Spiel vorbei! Deine Zeit: ${elapsedTime}s`);\n            restartButton.style.display = 'block'; \/\/ Zeige den Neustart-Button nach dem Spiel\n        } else {\n            randomPosition();\n        }\n    }\n\n    startGame(); \/\/ Spiel starten beim Laden der Seite\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88a0dda e-flex e-con-boxed e-con e-parent\" data-id=\"88a0dda\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3064792 e-flex e-con-boxed e-con e-parent\" data-id=\"3064792\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d115ea0 elementor-widget elementor-widget-html\" data-id=\"d115ea0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Nachricht mit Passwort<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            background-color: #f0f0f0;\n        }\n        .container {\n            background-color: white;\n            padding: 15px;\n            border-radius: 8px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n            max-width: 320px; \/* kleinere Breite *\/\n            width: 100%;\n        }\n        .input-field {\n            width: 100%;\n            padding: 8px; \/* kleinere Polsterung *\/\n            margin: 8px 0;\n            border-radius: 5px;\n            border: 1px solid #ccc;\n            font-size: 14px; \/* kleinere Schriftgr\u00f6\u00dfe *\/\n        }\n        .button {\n            padding: 8px;\n            width: 100%;\n            border-radius: 5px;\n            background-color: #4CAF50;\n            color: white;\n            border: none;\n            cursor: pointer;\n            font-size: 14px; \/* kleinere Schriftgr\u00f6\u00dfe *\/\n        }\n        .button:hover {\n            background-color: #45a049;\n        }\n        .message {\n            margin-top: 15px;\n            display: none;\n            padding: 8px;\n            background-color: #dff0d8;\n            border-radius: 5px;\n            border: 1px solid #d0e9c6;\n            font-size: 14px; \/* kleinere Schriftgr\u00f6\u00dfe *\/\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n    <h2 style=\"font-size: 18px; text-align: center;\">Geheime Nachricht<\/h2>\n    \n    <div id=\"set-message\">\n        <input type=\"text\" id=\"message\" class=\"input-field\" placeholder=\"Nachricht eingeben\" \/>\n        <input type=\"password\" id=\"password\" class=\"input-field\" placeholder=\"Passwort festlegen\" \/>\n        <button class=\"button\" onclick=\"saveMessage()\">Speichern<\/button>\n    <\/div>\n\n    <div id=\"view-message\" style=\"display: none;\">\n        <input type=\"password\" id=\"passwordInput\" class=\"input-field\" placeholder=\"Passwort eingeben\" \/>\n        <button class=\"button\" onclick=\"checkPassword()\">Nachricht anzeigen<\/button>\n        <div id=\"secretMessage\" class=\"message\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n    function saveMessage() {\n        var message = document.getElementById('message').value;\n        var password = document.getElementById('password').value;\n        \n        if (message && password) {\n            localStorage.setItem('secretMessage', message);\n            localStorage.setItem('messagePassword', password);\n            alert('Nachricht gespeichert! Du kannst sie jetzt ansehen, wenn du das Passwort eingibst.');\n            document.getElementById('set-message').style.display = 'none';\n            document.getElementById('view-message').style.display = 'block';\n        } else {\n            alert('Bitte f\u00fclle alle Felder aus.');\n        }\n    }\n\n    function checkPassword() {\n        var enteredPassword = document.getElementById('passwordInput').value;\n        var storedPassword = localStorage.getItem('messagePassword');\n        var storedMessage = localStorage.getItem('secretMessage');\n\n        if (enteredPassword === storedPassword) {\n            document.getElementById('secretMessage').textContent = storedMessage;\n            document.getElementById('secretMessage').style.display = 'block';\n        } else {\n            alert('Falsches Passwort!');\n        }\n    }\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Punkte: 0 Zeit: 0s Neustart Nachricht mit Passwort Geheime Nachricht Speichern Nachricht anzeigen<\/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-163","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/luis2.colex.io\/index.php?rest_route=\/wp\/v2\/pages\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luis2.colex.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/luis2.colex.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/luis2.colex.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luis2.colex.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=163"}],"version-history":[{"count":27,"href":"https:\/\/luis2.colex.io\/index.php?rest_route=\/wp\/v2\/pages\/163\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/luis2.colex.io\/index.php?rest_route=\/wp\/v2\/pages\/163\/revisions\/194"}],"wp:attachment":[{"href":"https:\/\/luis2.colex.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}