diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..a87ca0a77a52ca7e78f422d60070549cc9bf0caf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <!-- Deklariere den Typ des Dokuments und die verwendete Zeichenkodierung -->
+    <meta charset="UTF-8">
+    <!-- Legt den Standardmodus für die Darstellung der Webseite im Internet Explorer fest -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- Legt die Breite des Viewports fest, um die Website auf verschiedenen Geräten korrekt darzustellen -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Fügt ein FavIcon zur Webseite hinzu -->
+    <link rel="icon" type="image/png" href="images/favicon.ico">
+    <!-- Titel der Webseite -->
+    <title>Flappy Bird Game</title>
+    <!-- Verknüpfung mit dem externen Stylesheet -->
+    <link rel="stylesheet" href="style.css">
+    <!-- Einbinden des externen JavaScript-Codes, der verzögert geladen wird -->
+    <script src="script.js" defer></script>
+    
+</head>
+<body>
+    <!-- Obere Leiste -->
+    <div class="topBar">
+        <div class="gameTitle">Flappy Birds</div>
+        <div class="menuOptions">
+            <div class="menuItem">Game</div>
+            <div class="menuItem" id="scoresButton">Scores</div>
+        </div>
+    </div>
+    
+    <!-- Hintergrundbild des Spiels -->
+    <div class="background" id="background"></div>
+
+    
+    <!-- Bild des Vogels -->
+    <img src="images/Bird.png" alt="bird-img" class="bird" id="bird-1">
+    <!-- Bild des Mascots -->
+    <div class="mascot" id="mascot">
+        <img src="images/Tiger-Laecheln.png" alt="Tiger" id="Tiger-Laecheln" class="mascot">
+    </div>
+    
+    <div class="GameOverMessage">
+        <p id="gameOverText"></p>
+    </div>
+        
+    <!-- Anzeige des aktuellen Punktestands -->
+    <div class="score">
+        <span class="score_title"></span>
+        <span class="score_val"></span>
+    </div>
+    <!-- Schwierigkeitsgrad-Auswahl im difficultyContainer -->
+    <div id="difficultyContainer" class="difficultyContainer">
+        <label for="difficulty">Wähle den Schwierigkeitsgrad:</label>    
+        <select id="difficulty">
+            <option value="langsam">Langsam</option>
+            <option value="normal">Normal</option>
+            <option value="schnell">Schnell</option>
+        </select>
+    </div>  
+    <div class="start-container">
+        <button class="start-button" id="start-button">Start</button>
+        <!-- Eingabefeld für den Spielernamen -->
+        <input type="text" id="playerNameInput" placeholder="Enter your name" class="inputField">
+    </div>    
+
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..252c112cbc7cd31a13107896210d066ad7c2b11f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,229 @@
+// Wähle das Vogel-Element und das Bild aus
+let bird = document.querySelector('.bird');
+let img = document.getElementById('bird-1');
+
+// Hole die Eigenschaften des Vogel-Elements und des Hintergrund-Elements
+let bird_props = bird.getBoundingClientRect();
+let background = document.querySelector('.background').getBoundingClientRect();
+
+// Wähle die Elemente für den Punktestand, Nachricht und Titel aus
+let score_val = document.querySelector('.score_val');
+let message = document.querySelector('.GameOverMessage');
+let score_title = document.querySelector('.score_title');
+
+// Setze den Spielzustand auf "Start" und verstecke das Vogelbild
+let game_state = 'Start';
+img.style.display = 'none';
+message.classList.add('messageStyle');
+
+// Führe den folgenden Code aus, sobald das DOM geladen ist
+document.addEventListener('DOMContentLoaded', () => {
+    const mascot = document.getElementById('mascot');
+    const mascotImage = document.getElementById('Tiger-Laecheln');
+
+    const messages = [
+       "Willkommen zum Flappy Birds Spiel! Drücke Enter, um zu starten.",
+       "Weiche den Hindernissen aus, um Punkte zu sammeln.",
+       "Viel Glück und hab Spaß!"
+    ];
+
+    const images = [
+        "images/Tiger-Laecheln.png",
+        "images/Mund-Geschlossen.png",
+        "images/Mund-Offen.png"
+    ];
+
+    let messageIndex = 0;
+    let imageIndex = 0;
+
+    // Funktion, um eine Nachricht auszusprechen
+    function speakMessage(message) {
+        const utterance = new SpeechSynthesisUtterance(message);
+        utterance.lang = 'de-DE';
+        window.speechSynthesis.speak(utterance);
+    }
+
+    // Funktion, um die Nachricht zu aktualisieren
+    function updateMessage() {
+        const messageText = messages[messageIndex];
+        speakMessage(messageText);
+        messageIndex = (messageIndex + 1) % messages.length;
+    }
+
+    // Funktion, um das Bild zu aktualisieren
+    function updateImage() {
+        mascotImage.src = images[imageIndex];
+        imageIndex = (imageIndex + 1) % images.length;
+    }
+
+    // Zeige die nächste Nachricht alle 3 Sekunden an
+    const messageInterval = setInterval(updateMessage, 3000);
+    // Wechsle das Bild alle 0.5 Sekunden, um die Mundbewegung zu simulieren
+    const imageInterval = setInterval(updateImage, 500);
+    const playerNameInput = document.getElementById('playerNameInput');
+    const scoresButton = document.getElementById('scoresButton');
+    const scoreBoard = document.getElementById('scoreBoard');
+    const scoreList = document.getElementById('scoreList');
+    let scores = JSON.parse(localStorage.getItem('scores')) || [];
+
+    // Event-Listener für den Mausklick auf den Start-Button
+    
+    const startButton = document.getElementById('start-button');
+    startButton.addEventListener('click', () => {
+        if (game_state !== 'Play') {
+                // Entferne alle Rohre, zeige das Vogelbild, setze die Startposition des Vogels und starte das Spiel
+                document.querySelectorAll('.pipe_sprite').forEach((e) => {
+                    e.remove();
+                });
+                // Stoppe die Nachrichten- und Bildaktualisierungsintervalle
+                clearInterval(messageInterval);
+                clearInterval(imageInterval);
+                window.speechSynthesis.cancel();
+                img.style.display = 'block';
+                bird.style.top = '40vh';
+                game_state = 'Play';
+                message.innerHTML = '';
+                score_title.innerHTML = 'Score : ';
+                score_val.innerHTML = '0';
+                message.classList.remove('messageStyle');
+                startButton.style.display = 'none';
+                mascot.style.display ='none';
+                difficultyContainer.style.display ='none';
+                play(); // Starte das Spiel
+            } 
+        }
+)});
+
+
+// Hauptspiellogik
+function play() {
+    // Funktion für die Bewegung des Vogels
+    function move() {
+        if (game_state != 'Play') return;
+
+        // Überprüfe Kollisionen mit den Rohren und Spielende
+        let pipe_sprite = document.querySelectorAll('.pipe_sprite');
+        pipe_sprite.forEach((element) => {
+            let pipe_sprite_props = element.getBoundingClientRect();
+            bird_props = bird.getBoundingClientRect();
+
+            // Kollisionserkennung
+            if (pipe_sprite_props.right <= 0) {
+                element.remove();
+            } else {
+                if (bird_props.left < pipe_sprite_props.left + pipe_sprite_props.width &&
+                    bird_props.left + bird_props.width > pipe_sprite_props.left &&
+                    bird_props.top < pipe_sprite_props.top + pipe_sprite_props.height &&
+                    bird_props.top + bird_props.height > pipe_sprite_props.top) {
+                    game_state = 'End';
+                    document.querySelector('.GameOverMessage').innerHTML = 'Game Over'.fontcolor('red');
+                    message.classList.add('GameOverMessageStyle');
+                    img.style.display = 'none';
+                    return;
+                } else {
+                    if (pipe_sprite_props.right < bird_props.left &&
+                        pipe_sprite_props.right + move_speed >= bird_props.left &&
+                        element.increase_score == '1') {
+                        score_val.innerHTML = +score_val.innerHTML + 1;
+                    }
+                    element.style.left = pipe_sprite_props.left - move_speed + 'px';
+                }
+            }
+        });
+        requestAnimationFrame(move);
+    }
+    requestAnimationFrame(move);
+
+    // Funktion für die Anwendung der Gravitation auf den Vogel
+    let bird_dy = 0;
+    function apply_gravity() {
+        if (game_state != 'Play') return;
+        bird_dy += gravity;
+
+        // Steuere den Vogelsprung durch Tastendruck
+        document.addEventListener('keydown', (e) => {
+            if (e.key == 'ArrowUp' || e.key == ' ') {
+                img.src = 'images/Bird-2.png';
+                bird_dy = -10.6;
+            }
+        });
+
+        document.addEventListener('keyup', (e) => {
+            if (e.key == 'ArrowUp' || e.key == ' ') {
+                img.src = 'images/Bird.png';
+            }
+        });
+
+        // Überprüfe, ob der Vogel den Bildschirmrand berührt und das Spiel beendet
+        if (bird_props.top <= 0 || bird_props.bottom >= background.bottom) {
+            game_state = 'End';
+            message.style.left = '28vw';
+            window.location.reload();
+            message.classList.remove('GameOverMessageStyle');
+            return;
+        }
+        // Aktualisiere die Vogelposition basierend auf der Gravitation
+        bird.style.top = `${parseFloat(bird.style.top) + bird_dy}px`;
+        bird_props = bird.getBoundingClientRect();
+        requestAnimationFrame(apply_gravity);
+    }
+    requestAnimationFrame(apply_gravity);
+
+    // Funktion zum Erstellen und Bewegen der Rohre
+    let pipe_separation = 0;
+    let pipe_gap = 35;
+    let difficulty = 'normal';
+
+    function create_pipe() {  
+        // Überprüfe, ob das Spiel läuft
+        if (game_state != 'Play') return;
+
+        // Erzeuge neue Rohre, wenn der Abstand groß genug ist
+        if (pipe_separation > 115) {
+            pipe_separation = 0;
+            // Zufällige Position für das obere Rohr berechnen
+            let pipe_posi = Math.floor(Math.random() * 43) + 8;
+            //Erzeuge das obere Rohr
+            let pipe_sprite_inv = document.createElement('div');
+            pipe_sprite_inv.className = 'pipe_sprite';
+            pipe_sprite_inv.style.top = pipe_posi - 70 + 'vh';//Position des oberen Rohrs
+            pipe_sprite_inv.style.left = '100vw';// Beginne außerhalb des sichtabaren Bereichs
+
+            //Füge das obere Rohr dem Dokumet hinzu
+            document.body.appendChild(pipe_sprite_inv);
+
+            //Erzeuge das untere Rohr
+            let pipe_sprite = document.createElement('div');
+            pipe_sprite.className = 'pipe_sprite';
+            pipe_sprite.style.top = pipe_posi + pipe_gap + 'vh'; // Position des unteren Rohrs
+            pipe_sprite.style.left = '100vw'; // Beginne außerhalb des Sichtbaren Bereichs
+            pipe_sprite.increase_score = '1'; // Markiere das Rohr zur Punktzählung
+
+            // Füge das untere Rohr dem Dokument hinzu
+            document.body.appendChild(pipe_sprite);
+        }
+        // Inkrementiere den Abstandzähler
+        pipe_separation++;
+
+        //Wiederhole die Funktion, um kontinuierlich neue Rohre zu erstellen
+        requestAnimationFrame(create_pipe);
+    }
+
+    //Starte die Rohrerstellung basierend auf dem Schwierigkeitsgrad
+    if (difficulty === 'langsam' || difficulty === 'normal' || difficulty === 'schnell') {
+        requestAnimationFrame(create_pipe);
+        //Passe die Bewegungsgeschwindigkeit basierend auf dem Schwierigkeitsgrad an
+        if (difficulty === 'langsam') {
+            move_speed = 2;
+            gravity = 0.2;
+        } 
+        else if (difficulty === 'normal') {
+            move_speed = 3;
+            gravity = 0.3;
+        }
+        else if (difficulty === 'schnell') {
+            move_speed = 5;
+            gravity = 0.6;
+        }
+    }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..cdc496f87b1280701e49fbcee4a5241ebbf14b57
--- /dev/null
+++ b/style.css
@@ -0,0 +1,205 @@
+/* Setze den Standard-Margin und Padding auf 0, nutze das border-box Box-Modell, und wähle eine Standardschriftart */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+/* Stil für das Eingabefeld */
+.inputField {
+    position: fixed;
+    top: 20vh;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.start-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* Höhe des Containers auf die volle Höhe des Viewports setzen */
+}
+
+.start-button {
+    background-color: #3498db;
+    color: #fff;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    z-index: 1000;
+    margin-top: 10px;
+}
+
+.start-button:hover {
+    background-color: #2980b9;
+}
+/* Stil für die obere Leiste */
+.topBar {
+    background-color: #02917b; /* Hintergrundfarbe */
+    color: white; /* Textfarbe */
+    padding: 10px; /* Innenabstand */
+    display: flex; /* Flexbox-Layout verwenden */
+    justify-content: space-between; /* Elemente gleichmäßig verteilen */
+    align-items: center; /* Elemente zentrieren */
+}
+
+/* Stil für den Spieltitel */
+.gameTitle {
+    font-size: 24px;
+    font-weight: bold;
+    
+}
+
+/* Stil für die Menüoptionen */
+.menuOptions {
+    display: flex; /* Flexbox-Layout verwenden */
+}
+
+.menuItem {
+    margin-left: 10px; /* Abstand zwischen den Menüoptionen */
+    cursor: pointer; /* Zeiger-Cursor */
+}
+
+/* Stil für hover über Menüoptionen */
+.menuItem:hover {
+    text-decoration: underline; /* Unterstrich bei Hover */
+}
+
+
+
+/* Stil für den Hintergrund */
+.background {
+	height: 100vh;
+	width: 100vw;
+	background: url('images/background.png') no-repeat center center fixed;
+    background-size: cover;
+    position: fixed;
+   
+}
+
+/* Stil für den Difficulty Container */
+.difficultyContainer {
+    position: fixed;
+    top:10;
+    left: 0;
+    padding: 10px;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+
+/* Stil für den Vogel */
+.bird {
+    height: 70px;
+    width: 100px;
+    position: fixed;
+    top: 40vh;
+    left: 30vw;
+    z-index: 100;
+}
+
+/* Stil für das Maskottchen */
+.mascot {
+    width: 450px;
+    height: 500px;
+    cursor: pointer;
+    position: fixed;
+    top: 40vh;
+    left: -5vw;
+    z-index: 100;
+    background-image: url('Tiger-Laecheln.png'); /* Standard-Hintergrundbild */
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.Mund-Offen {
+    background-image: url('Mund-Offen.png'); /* Hintergrundbild für offenen Mund */
+}
+
+.Mund-Geschlossen {
+    background-image: url('Mund-Geschlossen.png'); /* Hintergrundbild für geschlossenen Mund */
+}
+
+.mascot-text {
+    visibility: hidden;
+}
+
+
+/* Stil für die Rohre */
+.pipe_sprite {
+    position: fixed;
+    top: 40vh;
+    left: 100vw;
+    height: 70vh;
+    width: 6vw;
+    background: radial-gradient(rgb(96, 98, 2) 50%, rgb(138, 118, 1));
+    border: 5px solid black;
+}
+
+/* Stil für Nachrichten */
+.GameOverMessage {
+    position: absolute;
+    z-index: 10;
+    color: black;
+    top: 30%;
+    left: 50%;
+    font-size: 4em;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+/* Zusätzlicher Stil für Nachrichten im Spielstil */
+.GameOverMessageStyle {
+    background: rgb(156, 130, 3);
+    padding: 30px;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    border-radius: 5%;
+}
+
+
+
+/* Stil für den Punktestand */
+.score {
+    position: fixed;
+    z-index: 10;
+    height: 10vh;
+    font-size: 10vh;
+    font-weight: 100;
+    color: white;
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: black;
+    top: 10;
+    left: 0;
+    margin: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Stil für den Punktestand-Wert */
+.score_val {
+    color: gold;
+    font-weight: bold;
+}
+
+/* Media Query für kleinere Bildschirme */
+@media only screen and (max-width: 1080px) {
+    .message {
+        font-size: 50px;
+        top: 50%;
+        white-space: nowrap;
+    }
+    .score {
+        font-size: 8vh;
+    }
+    .bird {
+        width: 120px;
+        height: 90px;
+    }
+    .pipe_sprite {
+        width: 14vw;
+    }
+}