From 05add330a1877ca6b5815e2f7cff8b8e172c010b Mon Sep 17 00:00:00 2001
From: Evangelia-Magdalini Zotou
<evangelia-magdalini.zotou@student.reutlingen-university.de>
Date: Thu, 11 Jul 2024 18:42:11 +0200
Subject: [PATCH] Kommentiert
---
index.html | 22 ++++++++++++----------
script.js | 43 +++++++++++++++++++++++++++++++++----------
style.css | 47 ++++++++++++++++++++++++++---------------------
3 files changed, 71 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
index eeefd36..a4ce81f 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,9 @@
<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 -->
+ <!-- Obere Leiste mit dem Spieltitel und einem Info-Button -->
<div class="topBar">
<div class="gameTitle">Flappy Birds</div>
<div class="menuOptions">
@@ -28,16 +27,18 @@
<!-- Hintergrundbild des Spiels -->
<div class="background" id="background"></div>
- <div class="mascot" id="mascot"></div> <!-- Mascot hinzugefügt -->
+ <!-- Maskottchen des Spiels -->
+ <div class="mascot" id="mascot"></div>
+ <!-- Sprechblase des Maskottchens -->
<div class="speech-bubble" id="speechBubble"></div>
<!-- Bild des Vogels -->
<img src="images/Bird.png" alt="bird-img" class="bird" id="bird-1">
- <!-- Bild des Mascots -->
- <!-- Bild eines Cursors -->
- <img id="cursor" src= "images/file.png"
- width="15" height="20" class="cursor">
- <p>
+
+ <!-- Bild eines benutzerdefinierten Cursors -->
+ <img id="cursor" src="images/file.png" width="15" height="20" class="cursor">
+
+ <!-- Game Over Nachricht -->
<div class="GameOverMessage" id="gameover">
<p id="gameOverText"></p>
</div>
@@ -48,12 +49,15 @@
<span class="score_val"></span>
</div>
+ <!-- Start-Button zum Beginnen des Spiels -->
<div class="start-container">
<button class="start-button" id="start-button">Start</button>
</div>
+ <!-- Info-Box mit Spielinformationen -->
<div id="infoBox" class="infoBox">
<div class="infoContent">
+ <!-- Schließen-Button für die Info-Box -->
<span class="closeButton" id="closeInfoBox">×</span>
<h2>Spiel-Info</h2>
<p>
@@ -64,7 +68,5 @@
</p>
</div>
</div>
-
-
</body>
</html>
diff --git a/script.js b/script.js
index 7518c5a..8e65f32 100644
--- a/script.js
+++ b/script.js
@@ -1,27 +1,33 @@
// Der Hauptkonzept dieses Codes basiert auf dem Flappy Bird Spiel von:
// https://github.com/kaizhelam/Flappy-Bird-Games
+// Selektiere die HTML-Elemente für den Vogel und das Bild
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();
+// Selektiere die Elemente für den Punktestand, die Nachricht und den Titel
let score_val = document.querySelector('.score_val');
let message = document.querySelector('.GameOverMessage');
let score_title = document.querySelector('.score_title');
+// Initialisiere Variablen für die Bewegung und Physik des Vogels
let bird_dy = 0;
let gravity = 0.05;
let move_speed = 3.5;
let iPipeseperation = 130;
let jumpheight = -5.6;
+// Initialisiere Variablen für die Cursorposition und andere Zustände
let realX = 1;
let realY = 1;
let oldY = 0;
let birdflag = false;
+// Initialisiere Variablen für die Sprachsynthese
const mascot = document.getElementById("mascot");
const speechBubble = document.getElementById("speechBubble");
let speaking = false;
@@ -30,21 +36,24 @@ let textIndex = 0;
let currentText = '';
let showNextLetterTimeout;
+// Erstelle eine WebSocket-Verbindung zum Server
const ws = new WebSocket("ws://localhost:453/ws");
+// Initialisiere den Cursor und andere Zustandsvariablen
let cursor = document.getElementById("cursor");
let flag = false;
let click = null;
+// WebSocket-Nachrichtenevent: Aktualisiere Cursorposition und simuliere Klicks
ws.onmessage = function (event){
const data = JSON.parse(event.data);
- realY= window.innerHeight * data.y;
- realX= window.innerWidth * data.x;
+ realY = window.innerHeight * data.y;
+ realX = window.innerWidth * data.x;
click = data.click;
cursor.style.left = (realX) + "px";
cursor.style.top = (realY) + "px";
- if(click && !flag){
+ if (click && !flag){
const Element = document.elementFromPoint(realX, realY);
if (Element) {
simulateClick(Element);
@@ -52,10 +61,12 @@ ws.onmessage = function (event){
}
};
+// Setze den Spielzustand auf 'Start' und verstecke das Vogelbild
let game_state = 'Start';
img.style.display = 'none';
message.classList.add('messageStyle');
+// Funktion zum Abrufen von Sprachsynthese-Stimmen
function setSpeech() {
return new Promise(
function (resolve, reject) {
@@ -72,6 +83,7 @@ function setSpeech() {
)
}
+// Funktion zum Sprechen eines Textes
function speak(text) {
speaking = true;
currentText = text;
@@ -83,6 +95,7 @@ function speak(text) {
showNextLetterTimeout = setTimeout(showNextLetter, 50);
}
+// Funktion zum Anzeigen des nächsten Buchstabens in der Sprechblase
function showNextLetter() {
const speechBubble = document.getElementById("speechBubble");
if (textIndex < currentText.length) {
@@ -96,16 +109,19 @@ function showNextLetter() {
}
}
+// Funktion zum Umschalten des Mundzustands des Maskottchens
function toggleMouth() {
mascot.classList.toggle('mouth-open');
mascot.classList.toggle('mouth-closed');
}
+// Funktion zum Zurücksetzen des Mundzustands des Maskottchens
function resetMouth() {
mascot.classList.remove('mouth-open');
mascot.classList.remove('mouth-closed');
}
+// Event-Listener für Klicks auf das Maskottchen
document.getElementById("mascot").addEventListener("click", function() {
if (!speaking) {
speechSynthesis.cancel();
@@ -127,11 +143,12 @@ document.getElementById("mascot").addEventListener("click", function() {
speaking = false;
clearInterval(mouthInterval);
resetMouth();
- speechBubble.style.display = "none";
+ speechBubble.style.display = 'none';
clearTimeout(showNextLetterTimeout);
}
});
+// DOMContentLoaded-Event: Initialisiere Event-Listener und Funktionen
document.addEventListener('DOMContentLoaded', () => {
const startButton = document.getElementById('start-button');
startButton.addEventListener('click', () => {
@@ -164,12 +181,14 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
+// Funktion zur Simulation eines Klicks auf ein Element
function simulateClick(element) {
if (element) {
element.click();
}
}
+// Funktion zum Hinzufügen des Neustart-Buttons
function setRestartButton(){
var container = document.getElementById("gameover");
const restartButton = document.createElement('button');
@@ -180,6 +199,7 @@ function setRestartButton(){
container.appendChild(restartButton);
}
+// Hauptspiellogik
function play() {
game_state = 'Play';
document.querySelectorAll('.pipe_sprite').forEach((e) => {
@@ -188,18 +208,19 @@ function play() {
img.style.display = 'block';
bird.style.top = '40vh';
- // Set up an interval to increase the bird's speed over time
+ // Setze ein Intervall, um die Geschwindigkeit des Vogels im Laufe der Zeit zu erhöhen
let speedIncreaseInterval = setInterval(() => {
if (game_state === 'Play') {
- move_speed += 0.1; // Increase the speed by 0.1
- gravity += 0.001; // Increase the gravity slightly
+ move_speed += 0.1; // Erhöhe die Geschwindigkeit um 0.1
+ gravity += 0.001; // Erhöhe die Gravitation leicht
} else {
- clearInterval(speedIncreaseInterval); // Clear the interval if the game is not in Play state
+ clearInterval(speedIncreaseInterval); // Lösche das Intervall, wenn das Spiel nicht im Zustand 'Play' ist
}
- }, 5000); // Increase the speed every 5 seconds
+ }, 5000); // Erhöhe die Geschwindigkeit alle 5 Sekunden
requestAnimationFrame(create_pipe);
+ // Funktion zur Bewegung der Rohre und Kollisionserkennung
function move() {
if (game_state !== 'Play') {
return;
@@ -235,6 +256,7 @@ function play() {
}
requestAnimationFrame(move);
+ // Funktion zur Anwendung der Gravitation
function apply_gravity() {
if (game_state != 'Play') return;
bird_dy += gravity;
@@ -246,7 +268,7 @@ function play() {
img.src = 'images/Bird.png';
}, "300");
img.src = 'images/Bird-2.png';
- setTimeout(()=> {
+ setTimeout(() => {
birdflag = false;
}, "400");
}
@@ -267,6 +289,7 @@ function play() {
}
requestAnimationFrame(apply_gravity);
+ // Funktion zur Erstellung der Rohre
let pipe_separation = 0;
let pipe_gap = 35;
diff --git a/style.css b/style.css
index b6b683a..c122295 100644
--- a/style.css
+++ b/style.css
@@ -4,16 +4,16 @@
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
-
}
+
+/* Stil für den benutzerdefinierten Cursor */
.cursor {
- pointer-events: none;
- /* doing this makes sure .elementFromPoint
- do not acquires the image cursor object */
+ pointer-events: none; /* Verhindert, dass der Cursor Elemente beeinflusst */
position: absolute;
- z-index: 100000;
+ z-index: 100000; /* Stellt sicher, dass der Cursor über allem anderen liegt */
}
+/* Container für den Startbildschirm */
.start-container {
display: flex;
justify-content: center;
@@ -21,6 +21,7 @@
height: 100vh; /* Höhe des Containers auf die volle Höhe des Viewports setzen */
}
+/* Stil für den Start-Button */
.start-button {
background-color: #3498db;
color: #fff;
@@ -32,9 +33,11 @@
font-size: xx-large;
}
+/* Hover-Effekt für den Start-Button */
.start-button:hover {
background-color: #2980b9;
}
+
/* Stil für die obere Leiste */
.topBar {
background-color: #02917b; /* Hintergrundfarbe */
@@ -49,7 +52,6 @@
.gameTitle {
font-size: 24px;
font-weight: bold;
-
}
/* Stil für die Menüoptionen */
@@ -57,30 +59,26 @@
display: flex; /* Flexbox-Layout verwenden */
}
+/* Stil für einzelne Menüoptionen */
.menuItem {
margin-left: 10px; /* Abstand zwischen den Menüoptionen */
cursor: pointer; /* Zeiger-Cursor */
}
-/* Stil für hover über Menüoptionen */
+/* 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;
+ height: 100vh;
+ width: 100vw;
+ background: url('images/background.png') no-repeat center center fixed;
background-size: cover;
position: fixed;
-
}
-
-
/* Stil für den Vogel */
.bird {
height: 70px;
@@ -91,7 +89,6 @@
z-index: 100;
}
-
/* Stil für die Rohre */
.pipe_sprite {
position: fixed;
@@ -103,7 +100,7 @@
border: 5px solid black;
}
-/* Stil für Nachrichten */
+/* Stil für die Game Over Nachricht */
.GameOverMessage {
position: absolute;
z-index: 10;
@@ -125,8 +122,6 @@
flex-direction: column;
}
-
-
/* Stil für den Punktestand */
.score {
position: fixed;
@@ -168,6 +163,7 @@
}
}
+/* Container für den Neustartbildschirm */
.restart-container {
display: flex;
justify-content: center;
@@ -175,24 +171,28 @@
height: 100vh; /* Höhe des Containers auf die volle Höhe des Viewports setzen */
}
+/* Stil für das Maskottchen */
.mascot {
width: 300px;
height: 300px;
position: absolute;
top: calc(40% + 90px); /* Etwas weiter unten als im Hangman-Spiel */
- left: 0; /* Position wie im Hangman-Spiel */
+ left: 0;
background-image: url('images/Tiger-Laecheln.png');
background-size: cover;
}
+/* Stil für das Maskottchen mit geöffnetem Mund */
.mouth-open {
background-image: url('images/Mund-Offen.png') !important;
}
+/* Stil für das Maskottchen mit geschlossenem Mund */
.mouth-closed {
background-image: url('images/Mund-Geschlossen.png') !important;
}
+/* Stil für die Sprechblase */
.speech-bubble {
position: absolute;
width: 250px;
@@ -203,10 +203,12 @@
display: none;
z-index: 2;
top: calc(40% - 120px); /* Etwas weiter unten als im Hangman-Spiel */
- left: 35px; /* Position wie im Hangman-Spiel */
+ left: 35px;
font-family: Arial, sans-serif;
text-align: center; /* Text horizontal zentriert */
}
+
+/* Stil für den Neustart-Button */
.restart-button {
background-color: darkred;
color: black;
@@ -218,6 +220,7 @@
margin-top: 10px;
}
+/* Stil für die Info-Box */
.infoBox {
display: none;
position: fixed;
@@ -233,10 +236,12 @@
border-radius: 10px;
}
+/* Stil für den Inhalt der Info-Box */
.infoContent {
position: relative;
}
+/* Stil für den Schließen-Button in der Info-Box */
.closeButton {
position: absolute;
top: 10px;
--
GitLab