Touch Ground<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\r\n\r\n \/* Body auf 100%, schwarzer Hintergrund, Scrollen erlaubt wenn extrem klein *\/\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #000;\r\n overflow: auto;\r\n }\r\n\r\n \/*\r\n Der Monitor ist 96% breit,\r\n 90% hoch und sitzt zentriert mit 2% oben, 8% unten Rand.\r\n *\/\r\n #c64-screen {\r\n position: relative;\r\n width: 96vw;\r\n height: 90vh;\r\n margin: 2% auto 8% auto;\r\n\r\n background-color: #483AAA; \/* Dunkles Blauviolett *\/\r\n color: #867ADE; \/* Helles Blauviolett *\/\r\n padding: 2%;\r\n box-sizing: border-box;\r\n border: 15px solid #867ADE;\r\n box-shadow: 0 0 20px 4px #000, inset 0 0 10px #000;\r\n border-radius: 15px;\r\n font-family: 'Press Start 2P', cursive;\r\n \/* Schriftgr\u00f6\u00dfe kann jetzt st\u00e4rker schrumpfen: min 0.5rem, max 1rem *\/\r\n font-size: clamp(0.5rem, 1.2vw, 1rem);\r\n \/* Weniger Zeilenabstand *\/\r\n line-height: 1.0em;\r\n overflow: hidden; \r\n transition: background-color 1s ease, color 1s ease, border-color 1s ease;\r\n }\r\n\r\n \/* Statische Zeilen (oben) *\/\r\n #static-text-container {\r\n margin: 0;\r\n padding: 0;\r\n line-height: 1.0;\r\n }\r\n \/* Erste und zweite Zeile zentriert *\/\r\n .center-line {\r\n text-align: center;\r\n white-space: nowrap;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \/* Leere Zeile (zentriert), damit READY. tiefer sitzt *\/\r\n .empty-line {\r\n text-align: center;\r\n white-space: nowrap;\r\n margin: 0;\r\n padding: 0;\r\n height: 1em;\r\n }\r\n \/* READY. linksb\u00fcndig *\/\r\n .left-line {\r\n text-align: left;\r\n white-space: nowrap;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Dynamischer Textbereich (links ausgerichtet) *\/\r\n #dynamic-text-container {\r\n margin-top: 0;\r\n position: relative;\r\n display: block;\r\n text-align: left;\r\n }\r\n \/* Der Text, der Zeichen f\u00fcr Zeichen ausgegeben wird *\/\r\n #touch-ground-text {\r\n display: block;\r\n white-space: pre;\r\n }\r\n\r\n \/* Cursor (Block) \u2013 blinkt mit Hintergrund-Farbwechsel + Textfarbe *\/\r\n #touch-ground-cursor {\r\n position: absolute;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 1ch;\r\n height: 1.2em;\r\n \/* Anfangszustand: heller Hintergrund, dunkles ? *\/\r\n background: #867ADE;\r\n color: #483AAA;\r\n pointer-events: none;\r\n animation: cursor-blink 1s steps(2) infinite;\r\n }\r\n @keyframes cursor-blink {\r\n 0%, 50% {\r\n background: #867ADE; \/* hellblau *\/\r\n color: #483AAA; \/* dunkelblau *\/\r\n }\r\n 51%, 100% {\r\n background: #483AAA; \/* dunkelblau *\/\r\n color: #867ADE; \/* hellblau *\/\r\n }\r\n }\r\n\r\n \/* Start-Button *\/\r\n #start-button {\r\n position: absolute;\r\n bottom: 5%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: #867ADE;\r\n color: #483AAA;\r\n font-family: 'Press Start 2P', cursive;\r\n font-size: clamp(0.6rem, 1vw, 0.9rem);\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 5px;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n box-shadow: 0 0 10px #000;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n #start-button:hover {\r\n background-color: #483AAA;\r\n color: #867ADE;\r\n }\r\n\r\n \/* Zerfallene Pixel *\/\r\n .pixel {\r\n position: absolute;\r\n background-color: #867ADE;\r\n width: 5px;\r\n height: 5px;\r\n opacity: 1;\r\n transition: transform 2s ease-in-out, opacity 2s ease-in-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"c64-screen\">\r\n \r\n <div id=\"static-text-container\">\r\n <div class=\"center-line\">**** TOMMODORE 7604 BASIC V12 ****<\/div>\r\n <div class=\"center-line\">64K RAM SYSTEM 38911 BASIC BYTES FREE<\/div>\r\n <div class=\"empty-line\"><\/div>\r\n <div class=\"left-line\">READY.<\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"dynamic-text-container\">\r\n <div id=\"touch-ground-text\"><\/div>\r\n <div id=\"touch-ground-cursor\"><\/div>\r\n <\/div>\r\n\r\n \r\n <button id=\"start-button\">Start Game<\/button>\r\n <\/div>\r\n\r\n <script>\r\n \/*\r\n Zeilen:\r\n 1) LOAD \"NEON*\",8,1\r\n 2) [Leerzeile => '']\r\n 3) SEARCHING FOR NEON*\r\n 4) LOADING (mit 8 Punkten \/ 1 Sek. Abstand)\r\n 5) READY.\r\n 6) RUN? (hier wird das \"?\" zum Cursor)\r\n *\/\r\n const fullText = [\r\n 'LOAD \"NEON*\",8,1',\r\n '',\r\n 'SEARCHING FOR NEON*',\r\n 'LOADING',\r\n 'READY.',\r\n 'RUN?'\r\n ];\r\n\r\n \/* Einstellungen *\/\r\n const typingSpeed = 100; \/\/ ms pro Zeichen\r\n const lineDelay = 2000; \/\/ 2 Sekunden warten, bevor die n\u00e4chste Zeile getippt wird\r\n const dotInterval = 1000; \/\/ 1 Sek. pro \".\" bei LOADING\r\n\r\n let lineIndex = 0; \/\/ Welche Zeile aus fullText\r\n let currentText = \"\"; \/\/ bisher getippter Text\r\n\r\n const textEl = document.getElementById(\"touch-ground-text\");\r\n const cursorEl = document.getElementById(\"touch-ground-cursor\");\r\n const btnStart = document.getElementById(\"start-button\");\r\n const screen = document.getElementById(\"c64-screen\");\r\n\r\n \/* Start: Wir beginnen direkt mit Zeile 0 (aber warten je Zeile 2s) *\/\r\n typeNextLine();\r\n\r\n \/*\r\n Tippt jeweils die n\u00e4chste Zeile, wartet vorher 2 Sekunden \r\n (Cursor blinkt leer am Zeilenanfang).\r\n *\/\r\n function typeNextLine() {\r\n if (lineIndex >= fullText.length) {\r\n \/\/ Alle Zeilen fertig -> nach 2 Sek. Button zeigen\r\n setTimeout(showStartButton, 2000);\r\n return;\r\n }\r\n \/\/ 2 Sekunden warten\r\n setTimeout(() => {\r\n const line = fullText[lineIndex];\r\n\r\n if (line === \"LOADING\") {\r\n \/\/ Wort LOADING tippen, dann 8 Punkte\r\n typeCharacters(line, () => {\r\n addLoadingDots(8, () => {\r\n finishLine();\r\n });\r\n });\r\n }\r\n else if (line === \"RUN?\") {\r\n \/\/ Tippe nur \"RUN\", Fragezeichen kommt in den Cursor\r\n typeCharacters(\"RUN\", () => {\r\n cursorEl.textContent = \"?\"; \r\n finishLine();\r\n });\r\n }\r\n else {\r\n \/\/ Normale Zeile (inkl. Leerzeile)\r\n typeCharacters(line, () => {\r\n finishLine();\r\n });\r\n }\r\n }, lineDelay);\r\n }\r\n\r\n \/*\r\n * Schlie\u00dft die aktuelle Zeile ab, erzeugt Zeilenumbruch (falls nicht letzte Zeile),\r\n * dann n\u00e4chste Zeile.\r\n *\/\r\n function finishLine() {\r\n lineIndex++;\r\n if (lineIndex < fullText.length) {\r\n currentText += \"\\n\";\r\n }\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n typeNextLine();\r\n }\r\n\r\n \/*\r\n * Tippt lineToType Zeichen f\u00fcr Zeichen\r\n *\/\r\n function typeCharacters(lineToType, onComplete) {\r\n let i = 0;\r\n function step() {\r\n if (i < lineToType.length) {\r\n \/\/ Wenn Cursor \"?\" anzeigt, entfernen wir es w\u00e4hrend des Tippvorgangs\r\n cursorEl.textContent = \"\";\r\n currentText += lineToType[i];\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n i++;\r\n setTimeout(step, typingSpeed);\r\n } else {\r\n onComplete();\r\n }\r\n }\r\n step();\r\n }\r\n\r\n \/*\r\n * F\u00fcgt n Punkte an (LOADING...), je 1 Sekunde Zeit\r\n *\/\r\n function addLoadingDots(n, onComplete) {\r\n let count = 0;\r\n function addDot() {\r\n if (count < n) {\r\n \/\/ Falls Cursor \"?\" => kurz entfernen\r\n cursorEl.textContent = \"\";\r\n currentText += \".\";\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n count++;\r\n setTimeout(addDot, dotInterval);\r\n } else {\r\n onComplete();\r\n }\r\n }\r\n addDot();\r\n }\r\n\r\n \/*\r\n * Cursor ans Ende der letzten Zeile positionieren\r\n *\/\r\n function adjustCursor() {\r\n const lines = currentText.split(\"\\n\");\r\n const lineHeight = parseFloat(getComputedStyle(textEl).lineHeight);\r\n const lineCount = lines.length;\r\n\r\n \/\/ Letzte Zeile\r\n const lastLine = lines[lineCount - 1] || \"\";\r\n\r\n \/\/ Unsichtbarer Span zum Messen der Breite\r\n const measure = document.createElement(\"span\");\r\n measure.style.visibility = \"hidden\";\r\n measure.style.whiteSpace = \"pre\";\r\n measure.textContent = lastLine;\r\n textEl.appendChild(measure);\r\n const lastLineWidth = measure.offsetWidth;\r\n measure.remove();\r\n\r\n \/\/ Cursor hinter der letzten Zeile\r\n cursorEl.style.left = lastLineWidth + \"px\";\r\n cursorEl.style.top = (lineCount - 1) * lineHeight + \"px\";\r\n }\r\n\r\n \/*\r\n * \"Start Game\"-Button nach Ende der Eingabe\r\n *\/\r\n function showStartButton() {\r\n btnStart.style.opacity = 1;\r\n btnStart.addEventListener(\"click\", fillWithRun);\r\n }\r\n\r\n \/*\r\n * Bildschirm mit \"RUN\" f\u00fcllen (Original, blockweise)\r\n *\/\r\n function fillWithRun() {\r\n btnStart.style.opacity = 0;\r\n let row = 0;\r\n const runText = \"RUN\".repeat(20);\r\n const maxLines = 30;\r\n\r\n const timer = setInterval(() => {\r\n if (row < maxLines) {\r\n currentText += runText + \"\\n\";\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n row++;\r\n } else {\r\n clearInterval(timer);\r\n setTimeout(shatterScreen, 500);\r\n }\r\n }, 100);\r\n }\r\n\r\n \/*\r\n * Zerlege Bildschirm, leite weiter\r\n *\/\r\n function shatterScreen() {\r\n const rect = screen.getBoundingClientRect();\r\n const rows = 30;\r\n const cols = 40;\r\n const pixelWidth = rect.width \/ cols;\r\n const pixelHeight = rect.height \/ rows;\r\n\r\n for (let y = 0; y < rows; y++) {\r\n for (let x = 0; x < cols; x++) {\r\n const pixel = document.createElement(\"div\");\r\n pixel.classList.add(\"pixel\");\r\n pixel.style.width = `${pixelWidth}px`;\r\n pixel.style.height= `${pixelHeight}px`;\r\n pixel.style.left = `${rect.left + x * pixelWidth}px`;\r\n pixel.style.top = `${rect.top + y * pixelHeight}px`;\r\n document.body.appendChild(pixel);\r\n\r\n setTimeout(() => {\r\n pixel.style.transform = `translate(${(Math.random() - 0.5)*500}px,\r\n ${(Math.random() - 0.5)*500}px)`;\r\n pixel.style.opacity = 0;\r\n }, 100);\r\n\r\n setTimeout(() => pixel.remove(), 2000);\r\n }\r\n }\r\n \/\/ Bildschirm auf Schwarz\r\n screen.style.backgroundColor = \"#000\";\r\n screen.style.color = \"#000\";\r\n screen.style.borderColor = \"#000\";\r\n\r\n \/\/ Weiterleitung\r\n setTimeout(() => {\r\n window.location.href = \"https:\/\/www.builtbybricks.art\/pixelart\";\r\n }, 2000);\r\n }\r\n <\/script>\r\n\r\n \r\n <script>\r\n (function overrideFillWithRun() {\r\n\r\n \/\/ Pr\u00fcfe, ob die Funktion existiert\r\n if (typeof window.fillWithRun === \"function\") {\r\n\r\n window.fillWithRun = function() {\r\n \/\/ Button ausblenden\r\n btnStart.style.opacity = 0;\r\n\r\n \/\/ Cursor evtl. \"?\", entfernen wir\r\n cursorEl.textContent = \"\";\r\n\r\n \/\/ => \"RUN\" (ohne Leerzeichen)\r\n \/\/ Messen Container-Breite\r\n const textEl = document.getElementById(\"touch-ground-text\");\r\n const measureSpan = document.createElement(\"span\");\r\n measureSpan.style.visibility = \"hidden\";\r\n measureSpan.style.whiteSpace = \"pre\";\r\n measureSpan.textContent = \"RUN\"; \/\/ ohne Leerzeichen\r\n textEl.appendChild(measureSpan);\r\n const segWidth = measureSpan.offsetWidth;\r\n measureSpan.remove();\r\n\r\n const containerWidth = textEl.offsetWidth || 300;\r\n let timesPerLine = Math.floor(containerWidth \/ segWidth);\r\n if (timesPerLine < 1) timesPerLine = 1;\r\n\r\n \/\/ => \"RUN\".repeat( timesPerLine ) => \"RUNRUNRUN...\"\r\n \/\/ wir tippen es ZEICHENWEISE\r\n const lineString = \"RUN\".repeat(timesPerLine);\r\n\r\n const maxRows = 30;\r\n let rowIndex = 0;\r\n\r\n \/\/ Tipp-Geschwindigkeit => 10 ms pro Zeichen => deutlich schneller\r\n const typedSpeed = 10; \r\n\r\n function writeNextLine() {\r\n if (rowIndex >= maxRows) {\r\n setTimeout(shatterScreen, 500);\r\n return;\r\n }\r\n let i = 0;\r\n function typeChar() {\r\n if (i < lineString.length) {\r\n \/\/ Cursor => leer\r\n cursorEl.textContent = \"\";\r\n currentText += lineString[i];\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n i++;\r\n setTimeout(typeChar, typedSpeed);\r\n } else {\r\n \/\/ Zeilenumbruch\r\n currentText += \"\\n\";\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n rowIndex++;\r\n \/\/ n\u00e4chste Zeile\r\n setTimeout(writeNextLine, 50); \r\n }\r\n }\r\n typeChar();\r\n }\r\n writeNextLine();\r\n };\r\n\r\n }\r\n\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ec3a5b8 e-flex e-con-boxed e-con e-child\" data-id=\"ec3a5b8\" 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-1482362 elementor-widget elementor-widget-html\" data-id=\"1482362\" 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>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Press Spacebar<\/title>\r\n <style>\r\n \/* Importiere eine typische 80er-Jahre-Schriftart *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\r\n\r\n \/* Spacebar Prompt Styling *\/\r\n #spacebar-prompt {\r\n position: fixed;\r\n bottom: 20px; \/* Position oberhalb der Fu\u00dfzeile *\/\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: white;\r\n font-size: clamp(0.6rem, 1.5vw, 1.2rem); \/* Dynamische Schriftgr\u00f6\u00dfe mit mind. 0.6rem *\/\r\n text-align: center;\r\n font-family: 'Press Start 2P', cursive;\r\n z-index: 9999; \/* H\u00f6chste Priorit\u00e4t, bleibt \u00fcber allen anderen Elementen *\/\r\n pointer-events: auto; \/* Erm\u00f6glicht Klicks auf den Text *\/\r\n opacity: 1;\r\n animation: fade-in-out 2s infinite; \/* Dauerhafte Animation *\/\r\n white-space: nowrap; \/* Verhindert Zeilenumbr\u00fcche *\/\r\n padding: 0 5px; \/* Mindestabstand von 5px links und rechts *\/\r\n box-sizing: border-box; \/* Padding wird in die Breite einbezogen *\/\r\n max-width: calc(100% - 10px); \/* Sorgt f\u00fcr Abstand von 5px links und rechts *\/\r\n overflow: hidden; \/* Verhindert, dass der Text abgeschnitten wird *\/\r\n background: transparent; \/* Der Container-Hintergrund bleibt transparent *\/\r\n }\r\n\r\n \/* Styling f\u00fcr das Wort \"spacebar\" als Button *\/\r\n #spacebar-prompt .key {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.2); \/* Beibehaltung des farbigen Hintergrunds *\/\r\n color: white;\r\n padding: 0.4em 0.8em;\r\n border-radius: 5px;\r\n font-weight: bold;\r\n text-align: center;\r\n vertical-align: middle;\r\n line-height: 1.5;\r\n text-shadow: 1px 1px 0 black, \/* Schwarze Kontur f\u00fcr Text *\/\r\n -1px 1px 0 black,\r\n 1px -1px 0 black,\r\n -1px -1px 0 black;\r\n box-shadow: 0 0 0 2px black; \/* Schwarze Kontur um den Button *\/\r\n }\r\n\r\n \/* Animation f\u00fcr den Blink-Effekt *\/\r\n @keyframes fade-in-out {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n }\r\n\r\n \/* Optionaler Hintergrundstil *\/\r\n body {\r\n margin: 0;\r\n background: transparent; \/* Der Seitenhintergrund bleibt transparent *\/\r\n height: 100vh;\r\n color: white;\r\n overflow: hidden;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"spacebar-prompt\" onclick=\"redirectToGoogle()\">\r\n Press <span class=\"key\">spacebar<\/span> to skip intro\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Funktion zum \u00d6ffnen von Google\r\n function redirectToGoogle() {\r\n window.location.href = \"https:\/\/www.google.de\";\r\n }\r\n\r\n \/\/ \u00dcberwacht das Dr\u00fccken einer Taste\r\n document.addEventListener('keydown', (event) => {\r\n if (event.code === 'Space') { \/\/ Wenn die Leertaste gedr\u00fcckt wird\r\n redirectToGoogle();\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Touch Ground **** TOMMODORE 7604 BASIC V12 **** 64K RAM SYSTEM 38911 BASIC BYTES FREE READY. Start Game Press Spacebar Press spacebar to skip intro<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"class_list":["post-14985","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/14985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/comments?post=14985"}],"version-history":[{"count":377,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/14985\/revisions"}],"predecessor-version":[{"id":15419,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/14985\/revisions\/15419"}],"wp:attachment":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/media?parent=14985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Touch Ground<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\r\n\r\n \/* Body auf 100%, schwarzer Hintergrund, Scrollen erlaubt wenn extrem klein *\/\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #000;\r\n overflow: auto;\r\n }\r\n\r\n \/*\r\n Der Monitor ist 96% breit,\r\n 90% hoch und sitzt zentriert mit 2% oben, 8% unten Rand.\r\n *\/\r\n #c64-screen {\r\n position: relative;\r\n width: 96vw;\r\n height: 90vh;\r\n margin: 2% auto 8% auto;\r\n\r\n background-color: #483AAA; \/* Dunkles Blauviolett *\/\r\n color: #867ADE; \/* Helles Blauviolett *\/\r\n padding: 2%;\r\n box-sizing: border-box;\r\n border: 15px solid #867ADE;\r\n box-shadow: 0 0 20px 4px #000, inset 0 0 10px #000;\r\n border-radius: 15px;\r\n font-family: 'Press Start 2P', cursive;\r\n \/* Schriftgr\u00f6\u00dfe kann jetzt st\u00e4rker schrumpfen: min 0.5rem, max 1rem *\/\r\n font-size: clamp(0.5rem, 1.2vw, 1rem);\r\n \/* Weniger Zeilenabstand *\/\r\n line-height: 1.0em;\r\n overflow: hidden; \r\n transition: background-color 1s ease, color 1s ease, border-color 1s ease;\r\n }\r\n\r\n \/* Statische Zeilen (oben) *\/\r\n #static-text-container {\r\n margin: 0;\r\n padding: 0;\r\n line-height: 1.0;\r\n }\r\n \/* Erste und zweite Zeile zentriert *\/\r\n .center-line {\r\n text-align: center;\r\n white-space: nowrap;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \/* Leere Zeile (zentriert), damit READY. tiefer sitzt *\/\r\n .empty-line {\r\n text-align: center;\r\n white-space: nowrap;\r\n margin: 0;\r\n padding: 0;\r\n height: 1em;\r\n }\r\n \/* READY. linksb\u00fcndig *\/\r\n .left-line {\r\n text-align: left;\r\n white-space: nowrap;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Dynamischer Textbereich (links ausgerichtet) *\/\r\n #dynamic-text-container {\r\n margin-top: 0;\r\n position: relative;\r\n display: block;\r\n text-align: left;\r\n }\r\n \/* Der Text, der Zeichen f\u00fcr Zeichen ausgegeben wird *\/\r\n #touch-ground-text {\r\n display: block;\r\n white-space: pre;\r\n }\r\n\r\n \/* Cursor (Block) \u2013 blinkt mit Hintergrund-Farbwechsel + Textfarbe *\/\r\n #touch-ground-cursor {\r\n position: absolute;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 1ch;\r\n height: 1.2em;\r\n \/* Anfangszustand: heller Hintergrund, dunkles ? *\/\r\n background: #867ADE;\r\n color: #483AAA;\r\n pointer-events: none;\r\n animation: cursor-blink 1s steps(2) infinite;\r\n }\r\n @keyframes cursor-blink {\r\n 0%, 50% {\r\n background: #867ADE; \/* hellblau *\/\r\n color: #483AAA; \/* dunkelblau *\/\r\n }\r\n 51%, 100% {\r\n background: #483AAA; \/* dunkelblau *\/\r\n color: #867ADE; \/* hellblau *\/\r\n }\r\n }\r\n\r\n \/* Start-Button *\/\r\n #start-button {\r\n position: absolute;\r\n bottom: 5%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: #867ADE;\r\n color: #483AAA;\r\n font-family: 'Press Start 2P', cursive;\r\n font-size: clamp(0.6rem, 1vw, 0.9rem);\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 5px;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n box-shadow: 0 0 10px #000;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n #start-button:hover {\r\n background-color: #483AAA;\r\n color: #867ADE;\r\n }\r\n\r\n \/* Zerfallene Pixel *\/\r\n .pixel {\r\n position: absolute;\r\n background-color: #867ADE;\r\n width: 5px;\r\n height: 5px;\r\n opacity: 1;\r\n transition: transform 2s ease-in-out, opacity 2s ease-in-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"c64-screen\">\r\n \r\n <div id=\"static-text-container\">\r\n <div class=\"center-line\">**** TOMMODORE 7604 BASIC V12 ****<\/div>\r\n <div class=\"center-line\">64K RAM SYSTEM 38911 BASIC BYTES FREE<\/div>\r\n <div class=\"empty-line\"><\/div>\r\n <div class=\"left-line\">READY.<\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"dynamic-text-container\">\r\n <div id=\"touch-ground-text\"><\/div>\r\n <div id=\"touch-ground-cursor\"><\/div>\r\n <\/div>\r\n\r\n \r\n <button id=\"start-button\">Start Game<\/button>\r\n <\/div>\r\n\r\n <script>\r\n \/*\r\n Zeilen:\r\n 1) LOAD \"NEON*\",8,1\r\n 2) [Leerzeile => '']\r\n 3) SEARCHING FOR NEON*\r\n 4) LOADING (mit 8 Punkten \/ 1 Sek. Abstand)\r\n 5) READY.\r\n 6) RUN? (hier wird das \"?\" zum Cursor)\r\n *\/\r\n const fullText = [\r\n 'LOAD \"NEON*\",8,1',\r\n '',\r\n 'SEARCHING FOR NEON*',\r\n 'LOADING',\r\n 'READY.',\r\n 'RUN?'\r\n ];\r\n\r\n \/* Einstellungen *\/\r\n const typingSpeed = 100; \/\/ ms pro Zeichen\r\n const lineDelay = 2000; \/\/ 2 Sekunden warten, bevor die n\u00e4chste Zeile getippt wird\r\n const dotInterval = 1000; \/\/ 1 Sek. pro \".\" bei LOADING\r\n\r\n let lineIndex = 0; \/\/ Welche Zeile aus fullText\r\n let currentText = \"\"; \/\/ bisher getippter Text\r\n\r\n const textEl = document.getElementById(\"touch-ground-text\");\r\n const cursorEl = document.getElementById(\"touch-ground-cursor\");\r\n const btnStart = document.getElementById(\"start-button\");\r\n const screen = document.getElementById(\"c64-screen\");\r\n\r\n \/* Start: Wir beginnen direkt mit Zeile 0 (aber warten je Zeile 2s) *\/\r\n typeNextLine();\r\n\r\n \/*\r\n Tippt jeweils die n\u00e4chste Zeile, wartet vorher 2 Sekunden \r\n (Cursor blinkt leer am Zeilenanfang).\r\n *\/\r\n function typeNextLine() {\r\n if (lineIndex >= fullText.length) {\r\n \/\/ Alle Zeilen fertig -> nach 2 Sek. Button zeigen\r\n setTimeout(showStartButton, 2000);\r\n return;\r\n }\r\n \/\/ 2 Sekunden warten\r\n setTimeout(() => {\r\n const line = fullText[lineIndex];\r\n\r\n if (line === \"LOADING\") {\r\n \/\/ Wort LOADING tippen, dann 8 Punkte\r\n typeCharacters(line, () => {\r\n addLoadingDots(8, () => {\r\n finishLine();\r\n });\r\n });\r\n }\r\n else if (line === \"RUN?\") {\r\n \/\/ Tippe nur \"RUN\", Fragezeichen kommt in den Cursor\r\n typeCharacters(\"RUN\", () => {\r\n cursorEl.textContent = \"?\"; \r\n finishLine();\r\n });\r\n }\r\n else {\r\n \/\/ Normale Zeile (inkl. Leerzeile)\r\n typeCharacters(line, () => {\r\n finishLine();\r\n });\r\n }\r\n }, lineDelay);\r\n }\r\n\r\n \/*\r\n * Schlie\u00dft die aktuelle Zeile ab, erzeugt Zeilenumbruch (falls nicht letzte Zeile),\r\n * dann n\u00e4chste Zeile.\r\n *\/\r\n function finishLine() {\r\n lineIndex++;\r\n if (lineIndex < fullText.length) {\r\n currentText += \"\\n\";\r\n }\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n typeNextLine();\r\n }\r\n\r\n \/*\r\n * Tippt lineToType Zeichen f\u00fcr Zeichen\r\n *\/\r\n function typeCharacters(lineToType, onComplete) {\r\n let i = 0;\r\n function step() {\r\n if (i < lineToType.length) {\r\n \/\/ Wenn Cursor \"?\" anzeigt, entfernen wir es w\u00e4hrend des Tippvorgangs\r\n cursorEl.textContent = \"\";\r\n currentText += lineToType[i];\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n i++;\r\n setTimeout(step, typingSpeed);\r\n } else {\r\n onComplete();\r\n }\r\n }\r\n step();\r\n }\r\n\r\n \/*\r\n * F\u00fcgt n Punkte an (LOADING...), je 1 Sekunde Zeit\r\n *\/\r\n function addLoadingDots(n, onComplete) {\r\n let count = 0;\r\n function addDot() {\r\n if (count < n) {\r\n \/\/ Falls Cursor \"?\" => kurz entfernen\r\n cursorEl.textContent = \"\";\r\n currentText += \".\";\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n count++;\r\n setTimeout(addDot, dotInterval);\r\n } else {\r\n onComplete();\r\n }\r\n }\r\n addDot();\r\n }\r\n\r\n \/*\r\n * Cursor ans Ende der letzten Zeile positionieren\r\n *\/\r\n function adjustCursor() {\r\n const lines = currentText.split(\"\\n\");\r\n const lineHeight = parseFloat(getComputedStyle(textEl).lineHeight);\r\n const lineCount = lines.length;\r\n\r\n \/\/ Letzte Zeile\r\n const lastLine = lines[lineCount - 1] || \"\";\r\n\r\n \/\/ Unsichtbarer Span zum Messen der Breite\r\n const measure = document.createElement(\"span\");\r\n measure.style.visibility = \"hidden\";\r\n measure.style.whiteSpace = \"pre\";\r\n measure.textContent = lastLine;\r\n textEl.appendChild(measure);\r\n const lastLineWidth = measure.offsetWidth;\r\n measure.remove();\r\n\r\n \/\/ Cursor hinter der letzten Zeile\r\n cursorEl.style.left = lastLineWidth + \"px\";\r\n cursorEl.style.top = (lineCount - 1) * lineHeight + \"px\";\r\n }\r\n\r\n \/*\r\n * \"Start Game\"-Button nach Ende der Eingabe\r\n *\/\r\n function showStartButton() {\r\n btnStart.style.opacity = 1;\r\n btnStart.addEventListener(\"click\", fillWithRun);\r\n }\r\n\r\n \/*\r\n * Bildschirm mit \"RUN\" f\u00fcllen (Original, blockweise)\r\n *\/\r\n function fillWithRun() {\r\n btnStart.style.opacity = 0;\r\n let row = 0;\r\n const runText = \"RUN\".repeat(20);\r\n const maxLines = 30;\r\n\r\n const timer = setInterval(() => {\r\n if (row < maxLines) {\r\n currentText += runText + \"\\n\";\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n row++;\r\n } else {\r\n clearInterval(timer);\r\n setTimeout(shatterScreen, 500);\r\n }\r\n }, 100);\r\n }\r\n\r\n \/*\r\n * Zerlege Bildschirm, leite weiter\r\n *\/\r\n function shatterScreen() {\r\n const rect = screen.getBoundingClientRect();\r\n const rows = 30;\r\n const cols = 40;\r\n const pixelWidth = rect.width \/ cols;\r\n const pixelHeight = rect.height \/ rows;\r\n\r\n for (let y = 0; y < rows; y++) {\r\n for (let x = 0; x < cols; x++) {\r\n const pixel = document.createElement(\"div\");\r\n pixel.classList.add(\"pixel\");\r\n pixel.style.width = `${pixelWidth}px`;\r\n pixel.style.height= `${pixelHeight}px`;\r\n pixel.style.left = `${rect.left + x * pixelWidth}px`;\r\n pixel.style.top = `${rect.top + y * pixelHeight}px`;\r\n document.body.appendChild(pixel);\r\n\r\n setTimeout(() => {\r\n pixel.style.transform = `translate(${(Math.random() - 0.5)*500}px,\r\n ${(Math.random() - 0.5)*500}px)`;\r\n pixel.style.opacity = 0;\r\n }, 100);\r\n\r\n setTimeout(() => pixel.remove(), 2000);\r\n }\r\n }\r\n \/\/ Bildschirm auf Schwarz\r\n screen.style.backgroundColor = \"#000\";\r\n screen.style.color = \"#000\";\r\n screen.style.borderColor = \"#000\";\r\n\r\n \/\/ Weiterleitung\r\n setTimeout(() => {\r\n window.location.href = \"https:\/\/www.builtbybricks.art\/pixelart\";\r\n }, 2000);\r\n }\r\n <\/script>\r\n\r\n \r\n <script>\r\n (function overrideFillWithRun() {\r\n\r\n \/\/ Pr\u00fcfe, ob die Funktion existiert\r\n if (typeof window.fillWithRun === \"function\") {\r\n\r\n window.fillWithRun = function() {\r\n \/\/ Button ausblenden\r\n btnStart.style.opacity = 0;\r\n\r\n \/\/ Cursor evtl. \"?\", entfernen wir\r\n cursorEl.textContent = \"\";\r\n\r\n \/\/ => \"RUN\" (ohne Leerzeichen)\r\n \/\/ Messen Container-Breite\r\n const textEl = document.getElementById(\"touch-ground-text\");\r\n const measureSpan = document.createElement(\"span\");\r\n measureSpan.style.visibility = \"hidden\";\r\n measureSpan.style.whiteSpace = \"pre\";\r\n measureSpan.textContent = \"RUN\"; \/\/ ohne Leerzeichen\r\n textEl.appendChild(measureSpan);\r\n const segWidth = measureSpan.offsetWidth;\r\n measureSpan.remove();\r\n\r\n const containerWidth = textEl.offsetWidth || 300;\r\n let timesPerLine = Math.floor(containerWidth \/ segWidth);\r\n if (timesPerLine < 1) timesPerLine = 1;\r\n\r\n \/\/ => \"RUN\".repeat( timesPerLine ) => \"RUNRUNRUN...\"\r\n \/\/ wir tippen es ZEICHENWEISE\r\n const lineString = \"RUN\".repeat(timesPerLine);\r\n\r\n const maxRows = 30;\r\n let rowIndex = 0;\r\n\r\n \/\/ Tipp-Geschwindigkeit => 10 ms pro Zeichen => deutlich schneller\r\n const typedSpeed = 10; \r\n\r\n function writeNextLine() {\r\n if (rowIndex >= maxRows) {\r\n setTimeout(shatterScreen, 500);\r\n return;\r\n }\r\n let i = 0;\r\n function typeChar() {\r\n if (i < lineString.length) {\r\n \/\/ Cursor => leer\r\n cursorEl.textContent = \"\";\r\n currentText += lineString[i];\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n i++;\r\n setTimeout(typeChar, typedSpeed);\r\n } else {\r\n \/\/ Zeilenumbruch\r\n currentText += \"\\n\";\r\n textEl.textContent = currentText;\r\n adjustCursor();\r\n rowIndex++;\r\n \/\/ n\u00e4chste Zeile\r\n setTimeout(writeNextLine, 50); \r\n }\r\n }\r\n typeChar();\r\n }\r\n writeNextLine();\r\n };\r\n\r\n }\r\n\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ec3a5b8 e-flex e-con-boxed e-con e-child\" data-id=\"ec3a5b8\" 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-1482362 elementor-widget elementor-widget-html\" data-id=\"1482362\" 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>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Press Spacebar<\/title>\r\n <style>\r\n \/* Importiere eine typische 80er-Jahre-Schriftart *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&display=swap');\r\n\r\n \/* Spacebar Prompt Styling *\/\r\n #spacebar-prompt {\r\n position: fixed;\r\n bottom: 20px; \/* Position oberhalb der Fu\u00dfzeile *\/\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: white;\r\n font-size: clamp(0.6rem, 1.5vw, 1.2rem); \/* Dynamische Schriftgr\u00f6\u00dfe mit mind. 0.6rem *\/\r\n text-align: center;\r\n font-family: 'Press Start 2P', cursive;\r\n z-index: 9999; \/* H\u00f6chste Priorit\u00e4t, bleibt \u00fcber allen anderen Elementen *\/\r\n pointer-events: auto; \/* Erm\u00f6glicht Klicks auf den Text *\/\r\n opacity: 1;\r\n animation: fade-in-out 2s infinite; \/* Dauerhafte Animation *\/\r\n white-space: nowrap; \/* Verhindert Zeilenumbr\u00fcche *\/\r\n padding: 0 5px; \/* Mindestabstand von 5px links und rechts *\/\r\n box-sizing: border-box; \/* Padding wird in die Breite einbezogen *\/\r\n max-width: calc(100% - 10px); \/* Sorgt f\u00fcr Abstand von 5px links und rechts *\/\r\n overflow: hidden; \/* Verhindert, dass der Text abgeschnitten wird *\/\r\n background: transparent; \/* Der Container-Hintergrund bleibt transparent *\/\r\n }\r\n\r\n \/* Styling f\u00fcr das Wort \"spacebar\" als Button *\/\r\n #spacebar-prompt .key {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.2); \/* Beibehaltung des farbigen Hintergrunds *\/\r\n color: white;\r\n padding: 0.4em 0.8em;\r\n border-radius: 5px;\r\n font-weight: bold;\r\n text-align: center;\r\n vertical-align: middle;\r\n line-height: 1.5;\r\n text-shadow: 1px 1px 0 black, \/* Schwarze Kontur f\u00fcr Text *\/\r\n -1px 1px 0 black,\r\n 1px -1px 0 black,\r\n -1px -1px 0 black;\r\n box-shadow: 0 0 0 2px black; \/* Schwarze Kontur um den Button *\/\r\n }\r\n\r\n \/* Animation f\u00fcr den Blink-Effekt *\/\r\n @keyframes fade-in-out {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.5;\r\n }\r\n }\r\n\r\n \/* Optionaler Hintergrundstil *\/\r\n body {\r\n margin: 0;\r\n background: transparent; \/* Der Seitenhintergrund bleibt transparent *\/\r\n height: 100vh;\r\n color: white;\r\n overflow: hidden;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"spacebar-prompt\" onclick=\"redirectToGoogle()\">\r\n Press <span class=\"key\">spacebar<\/span> to skip intro\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Funktion zum \u00d6ffnen von Google\r\n function redirectToGoogle() {\r\n window.location.href = \"https:\/\/www.google.de\";\r\n }\r\n\r\n \/\/ \u00dcberwacht das Dr\u00fccken einer Taste\r\n document.addEventListener('keydown', (event) => {\r\n if (event.code === 'Space') { \/\/ Wenn die Leertaste gedr\u00fcckt wird\r\n redirectToGoogle();\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Touch Ground **** TOMMODORE 7604 BASIC V12 **** 64K RAM SYSTEM 38911 BASIC BYTES FREE READY. Start Game Press Spacebar Press spacebar to skip intro<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"class_list":["post-14985","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/14985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/comments?post=14985"}],"version-history":[{"count":377,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/14985\/revisions"}],"predecessor-version":[{"id":15419,"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/pages\/14985\/revisions\/15419"}],"wp:attachment":[{"href":"https:\/\/www.builtbybricks.art\/en\/wp-json\/wp\/v2\/media?parent=14985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}