[{"text":"Projekt","spriteCssClass":"fa fa-folder","items":[{"text":"index.html","spriteCssClass":"fa fa-file-code-o","code":"\n\n\n \n \n Cell Defense\n \n\n\n

CodeRoom AI Project Lab

Cell Defense

Pflanze Zellen, beobachte einfache Evolution und bereite die Verteidigung des Kerns vor.

\n Kernstatus\n stabil\n

\n\n

\n \n \n \n \n

\n Klicke auf Felder, um lebende Zellen zu setzen oder zu entfernen.\n

\n\n

Missionsdaten

\n Runde\n 0\n

\n Lebende Zellen\n 0\n

\n Gegner\n 0\n

\n Energie\n 100\n

\n\n

Spätere Systeme

TODO: Gegnerwellen vom Rand starten
TODO: Zellmuster als Türme erkennen
TODO: Punkte, Schaden und Spielende ergänzen

\n\n

\n ■■
■■\n

Ein stabiler Block könnte später ein Schild-Turm werden.

\n\n

Scanner

Noch keine besonderen Muster erkannt.

\n \n lebende Zelle\n

\n \n Kern\n

\n \n Gegner-Platzhalter\n

\n\n \n\n","isMain":true},{"text":"script.js","spriteCssClass":"fa fa-file-code-o","code":"const breite = 24;\nconst hoehe = 16;\nconst kern = {\n x: Math.floor(breite / 2),\n y: Math.floor(hoehe / 2)\n};\n\nlet runde = 0;\nlet lebendeZellen = [];\nlet gegner = [\n { x: 1, y: 1, leben: 2, typ: 'Laeufer' },\n { x: breite - 2, y: hoehe - 2, leben: 3, typ: 'Panzer' }\n];\nlet energie = 100;\nlet autoEvolutionInterval = null;\nlet autoEvolutionLauft = false;\n\n\nconst rasterElement = document.querySelector('#raster');\nconst rundenAnzeige = document.querySelector('#rundenAnzeige');\nconst zellenAnzeige = document.querySelector('#zellenAnzeige');\nconst gegnerAnzeige = document.querySelector('#gegnerAnzeige');\nconst scannerText = document.querySelector('#scannerText');\nconst energieAnzeige = document.querySelector('#energieAnzeige');\n\nconst musterBibliothek = {\n block: {\n name: 'Block',\n form: [[1, 1], [1, 1]],\n breite: 2,\n hoehe: 2,\n kosten: 10\n },\n tub: {\n name: 'Tub',\n form: [[0, 1, 0], [1, 0, 1], [0, 1, 0]],\n breite: 3,\n hoehe: 3,\n kosten: 15\n },\n boot: {\n name: 'Boot',\n form: [[1, 1, 0], [1, 0, 1], [0, 1, 0]],\n breite: 3,\n hoehe: 3,\n kosten: 15\n },\n bienenstock: {\n name: 'Bienenstock',\n form: [[0, 1, 1, 0], [1, 0, 0, 1], [0, 1, 1, 0]],\n breite: 4,\n hoehe: 3,\n kosten: 20\n }\n};\n\nlet aktuellesMuster = null;\n\nfunction schluessel(x, y) {\n return x + '-' + y;\n}\n\nfunction istKern(x, y) {\n return x === kern.x && y === kern.y;\n}\n\nfunction istLebendig(x, y) {\n return lebendeZellen.includes(schluessel(x, y));\n}\n\nfunction istGegner(x, y) {\n return gegner.some(function(einGegner) {\n return einGegner.x === x && einGegner.y === y;\n });\n}\n\nfunction setzeZelle(x, y) {\n if (istKern(x, y) || istGegner(x, y)) {\n return;\n }\n\n const key = schluessel(x, y);\n\n if (lebendeZellen.includes(key)) {\n lebendeZellen = lebendeZellen.filter(function(eintrag) {\n return eintrag !== key;\n });\n } else {\n lebendeZellen.push(key);\n }\n\n rendern();\n}\n\n\nfunction kannMusterPlatzieren(x, y, muster) {\n const startX = x - Math.floor(muster.breite / 2);\n const startY = y - Math.floor(muster.hoehe / 2);\n\n if (energie < muster.kosten) {\n return { kannPlatzieren: false, grund: 'nicht-genug-energie' };\n }\n\n for (let dy = 0; dy < muster.hoehe; dy++) {\n for (let dx = 0; dx < muster.breite; dx++) {\n const gridX = startX + dx;\n const gridY = startY + dy;\n\n if (gridX < 0 || gridX >= breite || gridY < 0 || gridY >= hoehe) {\n return { kannPlatzieren: false, grund: 'ausserhalb-raster' };\n }\n\n if (muster.form[dy][dx] === 1) {\n if (istKern(gridX, gridY)) {\n return { kannPlatzieren: false, grund: 'kern-ueberschneidung' };\n }\n if (istGegner(gridX, gridY)) {\n return { kannPlatzieren: false, grund: 'gegner-ueberschneidung' };\n }\n }\n }\n }\n\n return { kannPlatzieren: true };\n}\n\nfunction musterEinfuegen(x, y, muster) {\n const pruefung = kannMusterPlatzieren(x, y, muster);\n\n if (!pruefung.kannPlatzieren) {\n let nachricht = '';\n switch (pruefung.grund) {\n case 'nicht-genug-energie':\n nachricht = 'Nicht genug Energie, um das Muster \"' + muster.name + '\" zu platzieren!'\n break;\n case 'ausserhalb-raster':\n nachricht = 'Das Muster \"' + muster.name + '\" passt nicht ins Raster an dieser Position.';\n break;\n case 'kern-ueberschneidung':\n nachricht = 'Das Muster \"' + muster.name + '\" würde den Kern überschreiben.';\n break;\n case 'gegner-ueberschneidung':\n nachricht = 'Das Muster \"' + muster.name + '\" würde Gegnerfelder überschreiben.';\n break;\n }\n scannerText.textContent = nachricht;\n return;\n }\n\n const startX = x - Math.floor(muster.breite / 2);\n const startY = y - Math.floor(muster.hoehe / 2);\n\n for (let dy = 0; dy < muster.hoehe; dy++) {\n for (let dx = 0; dx < muster.breite; dx++) {\n const gridX = startX + dx;\n const gridY = startY + dy;\n\n if (muster.form[dy][dx] === 1) {\n const key = schluessel(gridX, gridY);\n if (!lebendeZellen.includes(key)) {\n lebendeZellen.push(key);\n }\n }\n }\n }\n\n energie -= muster.kosten;\n musterModusDeaktivieren();\n rendern();\n}\n\nfunction musterModusAktivieren(musterName) {\n aktuellesMuster = musterBibliothek[musterName];\n scannerText.textContent = 'Klicke auf das Raster, um das Muster \"' + aktuellesMuster.name + '\" einzufügen.';\n}\n\nfunction musterModusDeaktivieren() {\n aktuellesMuster = null;\n scannerText.textContent = 'Noch keine besonderen Muster erkannt.';\n}\nfunction lebendeNachbarnZaehlen(x, y) {\n let anzahl = 0;\n\n for (let dy = -1; dy <= 1; dy = dy + 1) {\n for (let dx = -1; dx <= 1; dx = dx + 1) {\n if (dx !== 0 || dy !== 0) {\n if (istLebendig(x + dx, y + dy)) {\n anzahl = anzahl + 1;\n }\n }\n }\n }\n\n return anzahl;\n}\n\nfunction evolutionAusfuehren() {\n const naechsteZellen = [];\n\n for (let y = 0; y < hoehe; y = y + 1) {\n for (let x = 0; x < breite; x = x + 1) {\n if (!istKern(x, y) && !istGegner(x, y)) {\n const nachbarn = lebendeNachbarnZaehlen(x, y);\n const lebendig = istLebendig(x, y);\n\n if (lebendig && (nachbarn === 2 || nachbarn === 3)) {\n naechsteZellen.push(schluessel(x, y));\n }\n\n if (!lebendig && nachbarn === 3) {\n naechsteZellen.push(schluessel(x, y));\n }\n }\n }\n }\n\n lebendeZellen = naechsteZellen;\n runde = runde + 1;\n\n musterKurzScannen();\n gegnerPlatzhalterAktualisieren();\n rendern();\n}\n\n\nfunction zufaelligeGegnerPlatzieren() {\n const anzahlGegner = Math.floor(Math.random() * 9) + 2; // 2-10 Gegner\n gegner = [];\n \n const gegnerTypen = ['Laeufer', 'Panzer', 'Schnell', 'Stark'];\n \n for (let i = 0; i < anzahlGegner; i++) {\n let x, y;\n const randSeite = Math.floor(Math.random() * 4);\n \n // Zufällige Position am Rand wählen\n switch (randSeite) {\n case 0: // Oben\n x = Math.floor(Math.random() * breite);\n y = 0;\n break;\n case 1: // Rechts\n x = breite - 1;\n y = Math.floor(Math.random() * hoehe);\n break;\n case 2: // Unten\n x = Math.floor(Math.random() * breite);\n y = hoehe - 1;\n break;\n case 3: // Links\n x = 0;\n y = Math.floor(Math.random() * hoehe);\n break;\n }\n \n // Sicherstellen, dass es nicht der Kern ist\n if (istKern(x, y)) {\n if (x === 0) x = 1;\n else if (x === breite - 1) x = breite - 2;\n else if (y === 0) y = 1;\n else if (y === hoehe - 1) y = hoehe - 2;\n }\n \n gegner.push({\n x: x,\n y: y,\n leben: Math.floor(Math.random() * 3) + 2,\n typ: gegnerTypen[Math.floor(Math.random() * gegnerTypen.length)]\n });\n }\n}\nfunction musterKurzScannen() {\n // TODO: Später werden hier 3er Linien, 2x2 Bloecke und L Formen erkannt.\n if (lebendeZellen.length >= 4) {\n scannerText.textContent = 'Der Scanner sieht genug Zellen fuer erste Muster. Die genaue Turm-Erkennung fehlt noch.';\n } else {\n scannerText.textContent = 'Noch keine besonderen Muster erkannt.';\n }\n}\n\nfunction gegnerPlatzhalterAktualisieren() {\n // Gegner bewegen sich Richtung Kern\n gegner = gegner.map(function(einGegner) {\n const newGegner = { ...einGegner };\n \n // Richtung zum Kern berechnen\n if (newGegner.x < kern.x) {\n newGegner.x = Math.min(newGegner.x + 1, kern.x);\n } else if (newGegner.x > kern.x) {\n newGegner.x = Math.max(newGegner.x - 1, kern.x);\n }\n \n if (newGegner.y < kern.y) {\n newGegner.y = Math.min(newGegner.y + 1, kern.y);\n } else if (newGegner.y > kern.y) {\n newGegner.y = Math.max(newGegner.y - 1, kern.y);\n }\n \n return newGegner;\n });\n \n gegnerAnzeige.textContent = gegner.length;\n}\n\n\nfunction autoEvolutionStarten() {\n if (autoEvolutionLauft) {\n return;\n }\n\n autoEvolutionLauft = true;\n const autoBtn = document.querySelector('#autoBtn');\n autoBtn.textContent = 'Auto-Stopp';\n\n autoEvolutionInterval = setInterval(function() {\n evolutionAusfuehren();\n }, 1000);\n}\n\nfunction autoEvolutionStoppen() {\n if (!autoEvolutionLauft) {\n return;\n }\n\n autoEvolutionLauft = false;\n const autoBtn = document.querySelector('#autoBtn');\n autoBtn.textContent = 'Auto-Start';\n\n if (autoEvolutionInterval) {\n clearInterval(autoEvolutionInterval);\n autoEvolutionInterval = null;\n }\n}\n\nfunction autoEvolutionToggle() {\n if (autoEvolutionLauft) {\n autoEvolutionStoppen();\n } else {\n autoEvolutionStarten();\n }\n}\nfunction statusAktualisieren() {\n rundenAnzeige.textContent = runde;\n zellenAnzeige.textContent = lebendeZellen.length;\n gegnerAnzeige.textContent = gegner.length;\n if (energieAnzeige) {\n energieAnzeige.textContent = energie;\n }\n}\n\nfunction rendern() {\n rasterElement.textContent = '';\n\n for (let y = 0; y < hoehe; y = y + 1) {\n for (let x = 0; x < breite; x = x + 1) {\n const feld = document.createElement('button');\n feld.className = 'zelle';\n feld.type = 'button';\n feld.dataset.x = x;\n feld.dataset.y = y;\n feld.setAttribute('aria-label', 'Feld ' + x + ' ' + y);\n\n if (istLebendig(x, y)) {\n feld.classList.add('lebendig');\n }\n\n if (istKern(x, y)) {\n feld.classList.add('kern');\n }\n\n if (istGegner(x, y)) {\n feld.classList.add('gegner');\n }\n\n feld.addEventListener('click', function() {\n if (aktuellesMuster) {\n musterEinfuegen(x, y, aktuellesMuster);\n musterModusDeaktivieren();\n } else {\n setzeZelle(x, y);\n }\n });\n\n rasterElement.appendChild(feld);\n }\n }\n\n statusAktualisieren();\n}\n\nfunction zufallsStartErzeugen() {\n lebendeZellen = [];\n energie = 100;\n zufaelligeGegnerPlatzieren();\n\n for (let i = 0; i < 45; i = i + 1) {\n const x = Math.floor(Math.random() * breite);\n const y = Math.floor(Math.random() * hoehe);\n\n if (!istKern(x, y) && !istGegner(x, y)) {\n const key = schluessel(x, y);\n if (!lebendeZellen.includes(key)) {\n lebendeZellen.push(key);\n }\n }\n }\n\n scannerText.textContent = 'Zufallszellen und Gegner bereit. Starte eine Evolution und beobachte die Formveraenderung.';\n rendern();\n}\n\nfunction rasterLeeren() {\n lebendeZellen = [];\n runde = 0;\n energie = 100;\n zufaelligeGegnerPlatzieren();\n scannerText.textContent = 'Raster geleert. Neue Gegner platziert. Setze Zellen zur Verteidigung.';\n rendern();\n}\n\ndocument.querySelector('#rundeBtn').addEventListener('click', evolutionAusfuehren);\ndocument.querySelector('#zufallBtn').addEventListener('click', zufallsStartErzeugen);\ndocument.querySelector('#leerenBtn').addEventListener('click', rasterLeeren);\ndocument.querySelector('#blockBtn').addEventListener('click', function() {\n musterModusAktivieren('block');\n});\n\ndocument.querySelector('#tubBtn').addEventListener('click', function() {\n musterModusAktivieren('tub');\n});\n\ndocument.querySelector('#bootBtn').addEventListener('click', function() {\n musterModusAktivieren('boot');\n});\n\ndocument.querySelector('#bienenstockBtn').addEventListener('click', function() {\n musterModusAktivieren('bienenstock');\n});\n\ndocument.querySelector('#autoBtn').addEventListener('click', autoEvolutionToggle);\n\n\n\nzufallsStartErzeugen();","isMain":false},{"text":"style.css","spriteCssClass":"fa fa-file-code-o","code":"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n min-height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: #f4f7fb;\n background:\n radial-gradient(circle at top left, rgba(58, 190, 255, 0.28), transparent 32rem),\n radial-gradient(circle at bottom right, rgba(91, 255, 142, 0.18), transparent 28rem),\n #0b1020;\n}\n\n.app {\n width: min(1180px, 96vw);\n margin: 0 auto;\n padding: 24px 0 34px;\n}\n\n.heldenbereich {\n display: flex;\n justify-content: space-between;\n gap: 18px;\n align-items: stretch;\n margin-bottom: 18px;\n}\n\n.label {\n margin: 0 0 8px;\n color: #7ee7ff;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n font-size: 0.78rem;\n font-weight: 700;\n}\n\nh1 {\n color: #333;\n margin: 0;\n font-size: clamp(2rem, 5vw, 4rem);\n line-height: 1;\n}\n\n.untertitel {\n max-width: 720px;\n margin: 12px 0 0;\n color: #c8d3e6;\n font-size: 1.05rem;\n}\n\n.statuskarte,\n.seitenpanel,\n.rasterrahmen,\n.steuerung {\n border: 1px solid rgba(126, 231, 255, 0.2);\n background: rgba(15, 24, 48, 0.78);\n box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n}\n\n.statuskarte {\n min-width: 170px;\n padding: 18px;\n display: grid;\n align-content: center;\n gap: 8px;\n}\n\n.statuslabel {\n color: #94a9c8;\n font-size: 0.85rem;\n}\n\n#kernStatus {\n color: #89ffb2;\n font-size: 1.3rem;\n}\n\n.steuerung {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 12px;\n padding: 14px;\n margin-bottom: 18px;\n}\n\nbutton {\n border: 0;\n border-radius: 999px;\n padding: 11px 16px;\n color: #06101f;\n background: linear-gradient(135deg, #7ee7ff, #89ffb2);\n font-weight: 800;\n cursor: pointer;\n}\n\nbutton:hover {\n transform: translateY(-1px);\n}\n\n.hinweis {\n color: #c8d3e6;\n}\n\n#autoBtn {\n background: linear-gradient(135deg, #ff6b7a, #ff9a8b);\n}\n\n#autoBtn.auto-lauft {\n background: linear-gradient(135deg, #ff9a8b, #ff6b7a);\n}\n\n.musterbuttons {\n display: flex;\n gap: 8px;\n margin-left: auto;\n}\n\n.musterbtn {\n padding: 6px 12px;\n font-size: 0.85rem;\n background: linear-gradient(135deg, #89ffb2, #7ee7ff);\n}\n\n\n.spielfeldbereich {\n display: grid;\n grid-template-columns: 240px 1fr 240px;\n gap: 18px;\n align-items: start;\n}\n\n.seitenpanel {\n padding: 18px;\n}\n\n.seitenpanel h2,\n.seitenpanel h3 {\n margin: 0 0 12px;\n}\n\n.datenzeile {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n padding: 10px 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.datenzeile span {\n color: #aebbd1;\n}\n\n.todobox {\n margin: 0;\n padding-left: 18px;\n color: #c8d3e6;\n line-height: 1.55;\n}\n\n.musterkarte {\n margin-top: 18px;\n padding: 14px;\n border-radius: 16px;\n background: rgba(126, 231, 255, 0.08);\n}\n\n.musterbild {\n display: inline-block;\n color: #89ffb2;\n letter-spacing: 4px;\n line-height: 1.1;\n font-size: 1.4rem;\n}\n\n.musterkarte p {\n margin: 10px 0 0;\n color: #c8d3e6;\n}\n\n.rasterrahmen {\n padding: 16px;\n overflow: auto;\n}\n\n.raster {\n display: grid;\n grid-template-columns: repeat(24, 22px);\n gap: 3px;\n justify-content: center;\n}\n\n.zelle {\n width: 22px;\n height: 22px;\n border-radius: 6px;\n background: rgba(255, 255, 255, 0.07);\n border: 1px solid rgba(255, 255, 255, 0.08);\n cursor: pointer;\n transition: transform 0.12s, background 0.12s, box-shadow 0.12s;\n}\n\n.zelle:hover {\n transform: scale(1.18);\n border-color: rgba(126, 231, 255, 0.7);\n}\n\n.zelle.lebendig {\n background: #89ffb2;\n box-shadow: 0 0 16px rgba(137, 255, 178, 0.75);\n}\n\n.zelle.kern {\n background: #7ee7ff;\n box-shadow: 0 0 22px rgba(126, 231, 255, 0.95);\n cursor: default;\n}\n\n.zelle.gegner {\n background: #ff6b7a;\n box-shadow: 0 0 18px rgba(255, 107, 122, 0.8);\n}\n\n.scannerbox {\n display: flex;\n align-items: center;\n gap: 10px;\n color: #c8d3e6;\n margin: 10px 0;\n}\n\n.punkt {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n display: inline-block;\n}\n\n.punkt.lebendig {\n background: #89ffb2;\n}\n\n.punkt.kern {\n background: #7ee7ff;\n}\n\n.punkt.gegner {\n background: #ff6b7a;\n}\n\n#scannerText {\n min-height: 70px;\n color: #c8d3e6;\n line-height: 1.45;\n}\n\n@media (max-width: 920px) {\n .heldenbereich,\n .spielfeldbereich {\n grid-template-columns: 1fr;\n display: grid;\n }\n\n .heldenbereich {\n grid-template-columns: 1fr;\n }\n\n .statuskarte {\n min-width: 0;\n }\n\n .raster {\n grid-template-columns: repeat(24, 18px);\n }\n\n .zelle {\n width: 18px;\n height: 18px;\n border-radius: 5px;\n }\n}","isMain":false}]}]

Cell Defence 0.91

Code-Snapshot