KI als Werkzeug zur Erstellung von Webspielen: Unterricht für Schüler
Schüler hatten bereits grundlegendes HTML und CSS gemeistert. Bevor sie KI nutzten, mussten sie die Fähigkeit entwickeln, fremden Code zu lesen. Die Aufgabe: Eine Datei mit Kommentaren öffnen, den Wert für background-color in einer bestimmten Zeile ändern, speichern und die Seite im Browser aktualisieren. Dieser Ansatz verknüpft Codeänderungen schnell mit visuellen Ergebnissen und reduziert die Angst vor unbekannten Quellen.
Als nächstes gingen sie zu Papierprototypen über. Sie wählten eine Spielmechanik im Stil von "Whac-A-Mole" mit Personalisierung: Anstelle von Standardobjekten verwendeten sie Fotos der Schüler im normalen Zustand und mit aufgeblasenen Wangen im aktivierten Zustand.
Spiel-Logik und Tech-Stack-Auswahl
Wichtige Elemente der Mechanik:
Google AdInline article slot
- Ein 3×3-Raster aus Zellen (Löchern).
- Zufälliges Erscheinen eines aktiven Bildes alle 5 Sekunden.
- Die Geschwindigkeit steigt mit jedem Zyklus.
- Ein Klick auf eine aktive Zelle setzt sie auf normal zurück.
- Verlustbedingung: Alle 9 Zellen gleichzeitig aktiv – Eingabe für 5 Sekunden blockiert, Blinken, modales Fenster zum Neustart.
Tech-Stack: Reines HTML, CSS, JavaScript in einer Datei. Lernvorteile:
- Keine Umgebungseinrichtung erforderlich – nur ein Browser nötig.
- Sofortiges Feedback mit F5.
- Volle Portabilität: Eine HTML-Datei funktioniert überall.
Für den Prototyp verwendeten sie Kätzchenbilder: Basis und Reaktion (generiert von KI via Prompt).
Erstellen eines effektiven Prompts
KI wird als Ausführungswerkzeug wahrgenommen, das eine detaillierte Beschreibung erfordert. Zusammen mit den Kindern formulierten sie einen Prompt für Gemini:
Google AdInline article slot
Details:
- Rolle: Erfahrener Frontend-Entwickler.
- Spiel: Whac-A-Mole-Analogon mit Fotos (normal und aufgeblasene Wangen).
- Stil: Heller Hintergrund, zentriert.
- Feld: Weißes 3×3-Panel mit abgerundeten Ecken und Schatten.
- Zellen: 9 Bilder mit Druckeffekt, mobil-responsiv.
- 18 Dateien: photo1_normal.jpg ... photo9_highlighted.jpg.
- Logik: Timer, Beschleunigung, Spielende, Modal mit Unschärfe.
- Anforderungen: Einzelne Datei, modernes JS, Kommentare, keine mobilen Hervorhebungen.
Ergebnis: Fertiger Spielcode
KI lieferte in Sekunden einen funktionierenden Prototyp. Nach minimalen Anpassungen war die endgültige Version fertig. Der Code verwendet CSS-Variablen, Flexbox/Grid, backdrop-filter, moderne Übergänge und Media Queries.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kätzchen!</title>
<style>
/* Variablen für einfache Anpassung von Größen und Farben an einer Stelle */
:root {
--bg-color: #f0f2f5;
--grid-gap: 15px;
--cell-size: 180px;
--text-color: #333;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--bg-color);
font-family: 'Segoe UI', Tahoma, sans-serif;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.main-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.instructions {
text-align: center;
color: var(--text-color);
font-size: 1.8rem;
line-height: 1.4;
margin-bottom: 25px;
font-weight: 500;
}
.game-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: var(--grid-gap);
padding: 20px;
background: white;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
position: relative;
}
.game-container.disabled {
pointer-events: none;
}
.cell {
width: var(--cell-size);
height: var(--cell-size);
overflow: hidden;
border-radius: 16px;
cursor: pointer;
transition: transform 0.1s ease;
background: #f9f9f9;
}
.cell:active {
transform: scale(0.96);
}
.cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.01);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-content {
background: white;
padding: 50px;
border-radius: 30px;
text-align: center;
box-shadow: 0 15px 60px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.3);
}
.modal-content h2 {
margin: 0 0 30px 0;
font-size: 28px;
color: #222;
}
.modal-content button {
background: #222;
color: white;
border: none;
padding: 16px 50px;
font-size: 18px;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-content button:hover {
background: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@media (max-width: 650px) {
:root {
--cell-size: 28vw;
}
}
</style>
</head>
<body>
<div class="main-wrapper">
<div class="instructions">Klicke auf Kätzchen mit aufgeblasenen Wangen!</div>
<div class="game-container" id="gameContainer">
<!-- 9 Zellen werden von JS generiert -->
</div>
</div>
<div id="modal">
<div class="modal-content">
<h2>😿 Alle Kätzchen aufgeblasen!</h2>
<p>Nochmal versuchen?</p>
<button onclick="resetGame()">Ja!</button>
</div>
</div>
<script>
let gameActive = true;
let activeCell = null;
let intervalId = null;
let speed = 5000;
let highlightedCount = 0;
const cells = [];
const totalCells = 9;
const images = {
1: { normal: 'photo1_normal.jpg', highlighted: 'photo1_highlighted.jpg' },
2: { normal: 'photo2_normal.jpg', highlighted: 'photo2_highlighted.jpg' },
// ... bis 9
};
function initGame() {
const container = document.getElementById('gameContainer');
container.innerHTML = '';
cells.length = 0;
highlightedCount = 0;
for (let i = 1; i <= totalCells; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.index = i;
const img = document.createElement('img');
img.src = images[i].normal;
img.alt = `Kätzchen ${i}`;
cell.appendChild(img);
cell.addEventListener('click', handleClick);
container.appendChild(cell);
cells.push(cell);
}
startGameLoop();
}
function startGameLoop() {
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
if (!gameActive || highlightedCount >= totalCells) return;
const availableCells = cells.filter(cell => !cell.classList.contains('highlighted'));
if (availableCells.length === 0) return;
const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
activateCell(randomCell);
}, speed);
}
function activateCell(cell) {
cell.classList.add('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].highlighted;
highlightedCount++;
if (highlightedCount >= totalCells) {
gameOver();
}
}
function handleClick(e) {
const cell = e.currentTarget;
if (!cell.classList.contains('highlighted') || !gameActive) return;
cell.classList.remove('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].normal;
highlightedCount--;
}
function gameOver() {
gameActive = false;
clearInterval(intervalId);
const container = document.getElementById('gameContainer');
container.classList.add('disabled');
const blinkInterval = setInterval(() => {
cells.forEach(cell => {
const img = cell.querySelector('img');
const index = parseInt(cell.dataset.index);
img.src = cell.classList.contains('blinking') ?
images[index].normal : images[index].highlighted;
cell.classList.toggle('blinking');
});
}, 500);
setTimeout(() => {
clearInterval(blinkInterval);
document.getElementById('modal').style.display = 'flex';
}, 5000);
}
function resetGame() {
document.getElementById('modal').style.display = 'none';
document.getElementById('gameContainer').classList.remove('disabled');
speed = Math.max(1000, speed - 500);
gameActive = true;
initGame();
}
window.addEventListener('load', initGame);
</script>
</body>
</html>Wichtige Erkenntnisse
- Detaillierte Prompts beschleunigen die Generierung: Die Angabe von Rolle, Stil, Mechanik und Code-Anforderungen liefert in Sekunden einen funktionierenden Prototyp.
- Code lesen vor KI: Grundlegende Analysefähigkeiten senken die Hemmschwelle zum Experimentieren.
- Papierprototypen: Die Visualisierung der Logik vor dem Codieren vereinfacht die Aufgabe für die KI.
- Einzelne Datei für alles: Ideal zum Lernen und Verteilen.
- Responsiveness und Effekte: CSS Grid, Variablen, backdrop-filter sorgen für modernes UX.
— Editorial Team
Google AdInline article slot
Noch keine Kommentare.