Eigenes Stirnraten: Mit KI leicht gemacht!

Andreas Büchler
12 min read
Eigenes Stirnraten
So sieht das eigene Strinraten aus.
Table of Contents
In: KI & Technologie

In der heutigen digitalen Ära hat sich die Welt aufgrund von KI verändert. Wenn Du bisschen technisches Flair hast, kannst Du ein eigenes Spiel programmieren. In diesem Artikel zeige ich dir, wie du mithilfe von KI und modernen Webtechnologien dein eigenes Spiel programmieren kannst.

Was ist Stirnraten?

Stirnraten ist ein beliebtes Partyspiel, bei dem ein Spieler ein Wort auf seiner Stirn trägt, das die anderen Spieler erklären müssen. Dank moderner Technologien und KI kannst du dieses klassische Spiel digital umsetzen und sogar personalisieren.

Schritt 1: Grundlegende Technologien und Werkzeuge

Um dein eigenes Stirnraten-Spiel zu programmieren, benötigst du folgende Tools und Programmiersprache:

  • HTML und CSS: Für das Grundgerüst und das Styling deiner Webseite.
  • JavaScript: Um die Spielmechanik zu implementieren.
  • Flask: Ein leichtgewichtiges Python-Framework für die Webentwicklung.
  • KI-Modelle: Für erweiterte Funktionen wie Wortgenerierung oder Spracherkennung.

Installation der Entwicklungsumgebung

1. Installation von Visual Studio Code

Visual Studio Code (VS Code) ist ein beliebter Code-Editor, der viele nützliche Funktionen für Entwickler bietet.

  • Besuche die Visual Studio Code Webseite.
  • Lade die entsprechende Version für dein Betriebssystem herunter und installiere sie.
  • Öffne VS Code nach der Installation.
2. Installation von Python

Python ist eine der am häufigsten verwendeten Programmiersprachen für die Webentwicklung.

  • Besuche die Python Webseite.
  • Lade die neueste Version von Python herunter und installiere sie.
  • Stelle sicher, dass du die Option "Add Python to PATH" während der Installation auswählst. Das ist wichtig!
3. Einrichtung einer virtuellen Python-Umgebung

Um Abhängigkeiten zu verwalten und Chaos zu vermeiden, ist es ratsam, eine virtuelle Umgebung zu erstellen.

  • Öffne das Terminal in VS Code:
    • Klicke auf "View" im oberen Menü und wähle "Terminal" aus.
  • Navigiere zu deinem Projektordner (mit cd) und führe folgende Befehle aus:

sh

python -m venv venv
source venv/bin/activate # Für macOS/Linux
venv\Scripts\activate # Für Windows

4. Installation der erforderlichen Bibliotheken

Installiere Flask und andere notwendige Bibliotheken:

sh

pip install Flask

Schritt 2: Das Grundgerüst erstellen

Erstelle die grundlegende Ordnerstruktur für dein Projekt. Struktur ist alles – auch beim Programmieren!

plain

stirnraten/
├── static/
│ ├── images/
│ │ └── videogames.png
│ │ └── footballers.png
│ │ └── animals.png
│ │ └── plants.png
│ │ └── movies.png
│ │ └── countries.png
│ │ └── cities.png
│ │ └── musicians.png
│ │ └── tvshows.png
│ │ └── brands.png
│ │ └── sports.png
│ ├── styles.css
│ ├── script.js
│ └── sui.mp3
│ └── Mama.mp3
│ └── countdown.mp3
│ └── gameover.mp3
├── templates/
│ └── index.html
├── app.py
└── README.md

1. Grundgerüst der HTML-Datei

Erstelle die index.html Datei in templates/ und füge das Grundgerüst hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stirnraten</title>
    <!-- Verlinkung der CSS-Datei -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <!-- Hauptmenü -->
        <div class="menu visible">
            <h1>Select Card Set</h1>
            <div class="menu-grid">
                <!-- Beispielmenüpunkte -->
                <div class="menu-item" onclick="startGame('Videospiele')">
                    <img src="{{ url_for('static', filename='images/videogames.png') }}" alt="Videospiele">
                    <p>Videospiele</p>
                </div>
                <!-- Weitere Menüpunkte folgen -->
            </div>
            <button class="fullscreen-button" onclick="toggleFullscreen()">Toggle Fullscreen</button>
        </div>
        <!-- Countdown vor Spielbeginn -->
        <div class="countdown">
            <h1>Starting in <span id="countdown">3</span></h1>
        </div>
        <!-- Spielbereich -->
        <div class="game">
            <h1>Stirnraten</h1>
            <div id="card">Card 1</div>
            <div id="timer">Time left: 60s</div>
            <div id="score">Score: 0</div>
        </div>
        <!-- Scoreboard nach Spielende -->
        <div class="scoreboard">
            <h1>Time's up!</h1>
            <p id="finalScore">Your score: 0</p>
            <button class="button" onclick="showMenu()">Back to Menu</button>
            <button class="fullscreen-button" onclick="toggleFullscreen()">Toggle Fullscreen</button>
        </div>
        <!-- Soundeffekte -->
        <audio id="correctSound" src="{{ url_for('static', filename='sui.mp3') }}"></audio>
        <audio id="incorrectSound" src="{{ url_for('static', filename='Mama.mp3') }}"></audio>
        <audio id="countdownSound" src="{{ url_for('static', filename='countdown.mp3') }}"></audio>
        <audio id="gameOverSound" src="{{ url_for('static', filename='gameover.mp3') }}"></audio>
    </div>
</body>
</html>

In diesem HTML-Gerüst:

  • <div class="menu">: Das Hauptmenü, das die verschiedenen Kategorien anzeigt.
  • <div class="countdown">: Ein Countdown-Timer, der vor Spielbeginn angezeigt wird.
  • <div class="game">: Der Hauptspielbereich.
  • <div class="scoreboard">: Das Scoreboard, das nach Spielende angezeigt wird.
  • <audio>: Die Soundeffekte, die während des Spiels abgespielt werden.
2. Styling mit CSS

Erstelle die Datei styles.css in static/:

/* Grundlegendes Styling für die Webseite */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    color: #333;
}

/* Container für den Inhalt */
.container {
    background: white;
    padding: 2em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 600px;
    overflow-y: auto;
    max-height: 80vh;
}

/* Überschriften */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #1e88e5;
    margin-bottom: 1em;
}

/* Kartenstyling */
#card {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    margin-bottom: 1em;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.3s ease;
    padding: 1em;
    border-radius: 10px;
    background-color: #1e88e5;
}

/* Styling für Timer und Score */
#score, #timer {
    font-size: 22px;
    color: #1e88e5;
    margin-top: 1em;
}

/* Unsichtbare Elemente */
.menu, .scoreboard, .game, .countdown {
    display: none;
}

/* Sichtbare Elemente */
.visible {
    display: block;
}

/* Buttons */
.button, .fullscreen-button {
    background-color: #1e88e5;
    color: white;
    padding: 12px 24px;
    margin: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 18px;
}

.button:hover, .fullscreen-button:hover {
    background-color: #1565c0;
    transform: scale(1.05);
}

/* Menügrid */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    justify-items: center;
}

/* Menüelemente */
.menu-item {
    background-color: #e3f2fd;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.menu-item img {
    max-width: 90px;
    height: auto;
    margin-bottom: 10px;
}

.menu-item:hover {
    transform: translateY(-10px);
}

/* Soundeffekte unsichtbar */
audio {
    display: none;
}

In diesem CSS:

  • Grundlegendes Styling: Das Aussehen der Webseite, einschliesslich Farben, Schriftarten und Layout.
  • Menü-Styling: Das Layout und das Design der Menüelemente.
  • Animationen: Hinzugefügte Animationen für ein interaktives Benutzererlebnis.
3. Spielmechanik mit JavaScript

Erstelle die Datei script.js in static/:

// Event Listener für den Startbutton
document.getElementById('startButton').addEventListener('click', startGame);

let score = 0;
let timeLeft = 60;
let timer;

// Funktion zum Starten des Spiels
function startGame() {
    score = 0;
    timeLeft = 60;
    document.getElementById('score').textContent = `Punkte: ${score}`;
    document.getElementById('timer').textContent = `Zeit: ${timeLeft}s`;
    nextCard();
    timer = setInterval(updateTimer, 1000);
}

// Funktion zum Aktualisieren des Timers
function updateTimer() {
    if (timeLeft > 0) {
        timeLeft--;
        document.getElementById('timer').textContent = `Zeit: ${timeLeft}s`;
    } else {
        clearInterval(timer);
        alert('Zeit ist um! Dein Score: ' + score);
    }
}

// Funktion zum Anzeigen der nächsten Karte
function nextCard() {
    const cards = ['Hund', 'Katze', 'Auto', 'Haus', 'Baum'];
    const card = cards[Math.floor(Math.random() * cards.length)];
    document.getElementById('card').textContent = card;
}

In diesem JavaScript:

  • Spielstart: Die startGame-Funktion initialisiert das Spiel, setzt den Score und Timer zurück und startet den Timer.
  • Timer: Die updateTimer-Funktion aktualisiert den Timer jede Sekunde und beendet das Spiel, wenn die Zeit abgelaufen ist.
  • Nächste Karte: Die nextCard-Funktion wählt zufällig eine neue Karte aus und zeigt sie an.

Schritt 3: Aufbau der Flask-Anwendung

Erstelle die Datei app.py im Hauptverzeichnis des Projekts:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0')

In diesem Python-Skript:

  • Flask-Setup: Der Code initialisiert eine Flask-Anwendung.
  • Routing: Die Route / rendert die index.html-Vorlage.
  • Anwendung starten: Die Anwendung wird im Debug-Modus gestartet und auf allen IP-Adressen deines Computers erreichbar gemacht, wenn das Skript direkt ausgeführt wird.

Schritt 4: Projekt starten

Um deine Flask-Anwendung zu starten, führe den folgenden Befehl im Terminal aus:

sh

python app.py

Verbindung zu deinem Mobilgerät herstellen

Damit du dein Spiel auch auf deinem Handy testen kannst, müssen dein Computer und dein Mobilgerät mit demselben Netzwerk verbunden sein. Hier ist eine einfache Schritt-für-Schritt-Anleitung:

  1. IP-Adresse deines Computers herausfinden:
    • Öffne ein Terminal und gib ipconfig (Windows) oder ifconfig (macOS/Linux) ein.
    • Suche die Zeile mit der IPv4-Adresse. Sie sieht etwa so aus: 192.168.1.x.
  2. Flask-Anwendung starten:
    1. Starte die Flask-Anwendung mit dem obengenannten Code.
    2. Stelle sicher, dass die Anwendung auf allen IP-Adressen deines Computers lauscht, indem du app.run(debug=True, host='0.0.0.0') in deiner app.py Datei verwendest.
  3. Webseite auf dem Mobilgerät aufrufen:
    • Gib die IP-Adresse deines Computers gefolgt von :5000 in den Browser deines Mobilgeräts ein (z.B. http://192.168.1.x:5000).

Neue Kategorien hinzufügen

Um neue Kategorien hinzuzufügen, musst du die JavaScript-Datei script.js aktualisieren.

1. Neue Kategorie in JavaScript hinzufügen

Öffne script.js und füge die neue Kategorie in das cardSets-Objekt ein:

const cardSets = {
    "Videospiele": ["The Legend of Zelda", "Super Mario"],
    "Fussballer": ["Lionel Messi", "Cristiano Ronaldo", "Neymar"],
    "Tiere": ["Hund", "Katze", "Pferd", "Kuh", "Schaf"],
    "Pflanzen": ["Rose", "Tulpe", "Lilie", "Orchidee", "Nelke"],
    "Filme": ["Titanic", "Avatar", "Inception", "The Dark Knight", "Pulp Fiction"],
    "Länder": ["Deutschland", "Frankreich", "Italien", "Spanien", "Portugal"],
    "Städte": ["Berlin", "Hamburg", "München", "Köln", "Frankfurt"],
    "Musiker": ["Herbert Grönemeyer", "Nena", "Peter Maffay"],
    "TV-Serien": ["Tatort", "Der Bergdoktor", "Lindenstraße"],
    "Marken": ["Adidas", "Puma", "Nike", "Mercedes-Benz", "BMW"],
    "Sportarten": ["Fußball", "Basketball", "Tennis", "Handball", "Volleyball"],
    // Neue Kategorie hinzufügen
    "Getränke": ["Wasser", "Cola", "Bier", "Wein", "Saft"]
};
2. Neues Menüelement in HTML hinzufügen

Öffne index.html und füge das neue Menüelement hinzu:

<div class="menu-item" onclick="startGame('Getränke')">
    <p>Getränke</p>
</div>

Hier der komplette Code zusammengesetzt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stirnraten</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f0f4f8; /* Heller Hintergrund für modernes Design */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            flex-direction: column;
            color: #333;
        }
        .container {
            background: white;
            padding: 2em;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            text-align: center;
            width: 90%;
            max-width: 600px;
            overflow-y: auto;
            max-height: 80vh;
        }
        h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: 28px;
            color: #1e88e5;
            margin-bottom: 1em;
        }
        #card {
            font-family: 'Montserrat', sans-serif;
            font-size: 34px;
            margin-bottom: 1em;
            color: #fff;
            transition: transform 0.3s ease, background-color 0.3s ease;
            padding: 1em;
            border-radius: 10px;
            background-color: #1e88e5;
        }
        #score, #timer {
            font-size: 22px;
            color: #1e88e5;
            margin-top: 1em;
        }
        .menu, .scoreboard, .game, .countdown {
            display: none;
        }
        .visible {
            display: block;
        }
        .button {
            background-color: #1e88e5;
            color: white;
            padding: 12px 24px;
            margin: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            font-size: 18px;
        }
        .button:hover {
            background-color: #1565c0;
            transform: scale(1.05);
        }
        .fullscreen-button {
            background-color: #000;
            color: white;
            padding: 12px 24px;
            margin: 20px 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            font-size: 18px;
        }
        .fullscreen-button:hover {
            background-color: #333;
            transform: scale(1.05);
        }
        .hidden {
            display: none;
        }
        .menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            justify-items: center;
        }
        .menu-item {
            background-color: #e3f2fd;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        .menu-item img {
            max-width: 90px;
            height: auto;
            margin-bottom: 10px;
        }
        .menu-item:hover {
            transform: translateY(-10px);
        }
        audio {
            display: none;
        }
    </style>
    <script>
        let score = 0;
        let startX = null;
        let timer;
        let timeLeft = 60;
        let countdown;
        let countdownTime = 5;
        let flashcards = [];
        const cardSets = {
            "Videospiele": ["The Legend of Zelda", "Super Mario", "Minecraft", "Fortnite", "Call of Duty"],
            "Fußballer": ["Lionel Messi", "Cristiano Ronaldo", "Neymar", "Kylian Mbappe", "Robert Lewandowski"],
            "Tiere": ["Hund", "Katze", "Pferd", "Kuh", "Schaf"],
            "Pflanzen": ["Rose", "Tulpe", "Lilie", "Orchidee", "Nelke"],
            "Filme": ["Titanic", "Avatar", "Inception", "The Dark Knight", "Pulp Fiction"],
            "Länder": ["Deutschland", "Frankreich", "Italien", "Spanien", "Portugal"],
            "Städte": ["Berlin", "Hamburg", "München", "Köln", "Frankfurt"],
            "Musiker": ["Herbert Grönemeyer", "Nena", "Peter Maffay", "Helene Fischer", "Xavier Naidoo"],
            "TV-Serien": ["Tatort", "Der Bergdoktor", "Lindenstraße", "Alarm für Cobra 11", "Deutschland 83"],
            "Marken": ["Adidas", "Puma", "Nike", "Mercedes-Benz", "BMW"],
            "Sportarten": ["Fußball", "Basketball", "Tennis", "Handball", "Volleyball"],
            // Neue Kategorie hinzufügen
            "Getränke": ["Wasser", "Cola", "Bier", "Wein", "Saft"]
        };

        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        function showMenu() {
            document.querySelector('.menu').classList.add('visible');
            document.querySelector('.game').classList.remove('visible');
            document.querySelector('.scoreboard').classList.remove('visible');
            document.querySelector('.countdown').classList.remove('visible');
        }

        function startGame(set) {
            flashcards = shuffle([...cardSets[set]]);
            score = 0;
            timeLeft = 60;
            countdownTime = 3;
            document.querySelector('.menu').classList.remove('visible');
            document.querySelector('.countdown').classList.add('visible');
            document.querySelector('.fullscreen-button').classList.add('hidden');
            startCountdown(set);
        }

        function startCountdown(set) {
            document.getElementById('countdown').innerText = countdownTime;
            document.getElementById('countdownSound').play(); // Countdown-Sound abspielen
            countdown = setInterval(() => {
                countdownTime--;
                document.getElementById('countdown').innerText = countdownTime;
                if (countdownTime <= 0) {
                    clearInterval(countdown);
                    startActualGame(set);
                }
            }, 1000);
        }

        function startActualGame(set) {
            document.querySelector('.countdown').classList.remove('visible');
            document.getElementById('card').innerText = flashcards[0];
            document.getElementById('score').innerText = `Score: 0`;
            document.getElementById('timer').innerText = `Time left: 60s`;
            document.querySelector('.game').classList.add('visible');
            document.addEventListener('touchstart', handleTouchStart, false);
            document.addEventListener('touchmove', handleTouchMove, false);
            document.addEventListener('touchend', handleTouchEnd, false);
            timer = setInterval(updateTimer, 1000);
        }

        function handleTouchStart(event) {
            const firstTouch = event.touches[0];
            startX = firstTouch.clientX;
        }

        function handleTouchMove(event) {
            if (!startX) return;

            const firstTouch = event.touches[0];
            const diffX = firstTouch.clientX - startX;
            const card = document.getElementById('card');
            card.style.transform = `translateX(${diffX}px)`;
        }

        function handleTouchEnd(event) {
            if (!startX) return;

            const firstTouch = event.changedTouches[0];
            const diffX = firstTouch.clientX - startX;

            if (diffX > 50) {
                swipe('right');
            } else if (diffX < -50) {
                swipe('left');
            } else {
                const card = document.getElementById('card');
                card.style.transform = `translateX(0px)`;
            }

            startX = null;
        }

        function swipe(direction) {
            const card = document.getElementById('card');
            if (direction === 'right') {
                score++;
                card.style.backgroundColor = '#4caf50'; /* Grüne Farbe für korrekt */
                document.getElementById('correctSound').play();
            } else {
                card.style.backgroundColor = '#f44336'; /* Rote Farbe für falsch */
                document.getElementById('incorrectSound').play();
            }
            document.getElementById('score').innerText = `Score: ${score}`;
            setTimeout(() => {
                flashcards.shift();
                if (flashcards.length === 0) {
                    clearTimeout(timer);
                    showNoCardsMessage();
                    setTimeout(showScoreboard, 2000);
                } else {
                    card.style.transform = `translateX(0px)`;
                    card.innerText = flashcards[0];
                    card.style.backgroundColor = '#1e88e5';
                }
            }, 300);
        }

        function showNoCardsMessage() {
            const msg = document.createElement('div');
            msg.className = 'message';
            msg.innerText = "Keine Karten mehr";
            document.querySelector('.game').appendChild(msg);
        }

        function showScoreboard() {
            document.querySelector('.game').classList.remove('visible');
            document.querySelector('.scoreboard').classList.add('visible');
            document.querySelector('.fullscreen-button').classList.remove('hidden');
            document.getElementById('finalScore').innerText = `Your score: ${score}`;
            document.removeEventListener('touchstart', handleTouchStart, false);
            document.removeEventListener('touchmove', handleTouchMove, false);
            document.removeEventListener('touchend', handleTouchEnd, false);
            document.getElementById('gameOverSound').play(); // Game Over-Sound abspielen
        }

        function updateTimer() {
            if (timeLeft > 0) {
                timeLeft--;
                document.getElementById('timer').innerText = `Time left: ${timeLeft}s`;
            } else {
                clearTimeout(timer);
                showScoreboard();
            }
        }

        function toggleFullscreen() {
            const elem = document.documentElement;
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                } else if (elem.mozRequestFullScreen) { // Firefox
                    elem.mozRequestFullScreen();
                } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
                    elem.webkitRequestFullscreen();
                } else if (elem.msRequestFullscreen) { // IE/Edge
                    elem.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { // Firefox
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { // IE/Edge
                    document.msExitFullscreen();
                }
            }
        }

        document.addEventListener('DOMContentLoaded', (event) => {
            showMenu();
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="menu visible">
            <h1>Select Card Set</h1>
            <div class="menu-grid">
                <div class="menu-item" onclick="startGame('Videospiele')">
                    <img src="static/images/videogames.png" alt="Videospiele">
                    <p>Videospiele</p>
                </div>
                <div class="menu-item" onclick="startGame('Fußballer')">
                    <img src="static/images/footballers.png" alt="Fußballer">
                    <p>Fußballer</p>
                </div>
                <div class="menu-item" onclick="startGame('Tiere')">
                    <img src="static/images/animals.png" alt="Tiere">
                    <p>Tiere</p>
                </div>
                <div class="menu-item" onclick="startGame('Pflanzen')">
                    <img src="static/images/plants.png" alt="Pflanzen">
                    <p>Pflanzen</p>
                </div>
                <div class="menu-item" onclick="startGame('Filme')">
                    <img src="static/images/movies.png" alt="Filme">
                    <p>Filme</p>
                </div>
                <div class="menu-item" onclick="startGame('Länder')">
                    <img src="static/images/countries.png" alt="Länder">
                    <p>Länder</p>
                </div>
                <div class="menu-item" onclick="startGame('Städte')">
                    <img src="static/images/cities.png" alt="Städte">
                    <p>Städte</p>
                </div>
                <div class="menu-item" onclick="startGame('Musiker')">
                    <img src="static/images/musicians.png" alt="Musiker">
                    <p>Musiker</p>
                </div>
                <div class="menu-item" onclick="startGame('TV-Serien')">
                    <img src="static/images/tvshows.png" alt="TV-Serien">
                    <p>TV-Serien</p>
                </div>
                <div class="menu-item" onclick="startGame('Marken')">
                    <img src="static/images/brands.png" alt="Marken">
                    <p>Marken</p>
                </div>
                <div class="menu-item" onclick="startGame('Sportarten')">
                    <img src="static/images/sports.png" alt="Sportarten">
                    <p>Sportarten</p>
                </div>
            </div>
            <button class="fullscreen-button" onclick="toggleFullscreen()">Toggle Fullscreen</button>
        </div>
        <div class="countdown">
            <h1>Starting in <span id="countdown">3</span></h1>
        </div>
        <div class="game">
            <h1>Stirnraten</h1>
            <div id="card">Card 1</div>
            <div id="timer">Time left: 60s</div>
            <div id="score">Score: 0</div>
        </div>
        <div class="scoreboard">
            <h1>Time's up!</h1>
            <p id="finalScore">Your score: 0</p>
            <button class="button" onclick="showMenu()">Back to Menu</button>
            <button class="fullscreen-button" onclick="toggleFullscreen()">Toggle Fullscreen</button>
        </div>
        <audio id="correctSound" src="static/sui.mp3"></audio>
        <audio id="incorrectSound" src="static/Mama.mp3"></audio>
        <audio id="countdownSound" src="static/countdown.mp3"></audio>
        <audio id="gameOverSound" src="static/gameover.mp3"></audio>
    </div>
</body>
</html>

Fazit

Mit diesen Schritten hast du die Grundlagen und einige fortgeschrittene Techniken kennengelernt, um ein spannendes und interaktives Spiel zu entwickeln. Viel Erfolg und vor allem viel Spass beim spielen!

Written by

Andreas Büchler

View all posts
More from Online-Marketing und Datenanalyse | ATBN
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Online-Marketing und Datenanalyse | ATBN.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.