VERSION 1.5: Finales Beenden, Spielanleitung hinzugefügt
This commit is contained in:
BIN
frontend/assets/Labels/Anleitung.png
Normal file
BIN
frontend/assets/Labels/Anleitung.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
87
frontend/introduction/index.html
Normal file
87
frontend/introduction/index.html
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Anleitung</title>
|
||||||
|
<link rel="stylesheet" href="../../style/generalStyle.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<link rel="icon" type="image/png" href="../../assets/Logo.png">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container menu">
|
||||||
|
<img class="logo" src="../assets/Labels/Anleitung.png" alt="Lobby Logo">
|
||||||
|
<main class="container buttonMenu">
|
||||||
|
<div class="container navButtons" id="mainDiv">
|
||||||
|
<div id="introWrapper">
|
||||||
|
<div class="anleitung-text-content">
|
||||||
|
<h1>Spielanleitung</h1>
|
||||||
|
|
||||||
|
<h2>Registrierung & Anmeldung:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Registriere dich für ein neues Konto oder melde dich mit deinen bestehenden Daten an, um loszulegen.</li>
|
||||||
|
<li>Um zu starten ist es nur wichtig einen Username und ein Passwort anzugeben</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Lobby erstellen oder beitreten:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Navigiere zum Dashboard und wähle "Lobby".</li>
|
||||||
|
<li>Du kannst eine neue Lobby erstellen. Ein einzigartiger Code wird generiert, den du mit einem Freund teilen kannst.</li>
|
||||||
|
<li>Alternativ kannst du einer bestehenden Lobby beitreten, indem du den Code deines Freundes eingibst.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Spielstart:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Sobald zwei Spieler erfolgreich der Lobby beigetreten sind, startet das Spiel automatisch nach einem 5 Sekunden Countdown.</li>
|
||||||
|
<li>Danach werdet ihr auf die Spielseite geleitet, wo ihr nochmal 5 Sekunden warten müsst, damit alle auf die Seite weitgeleitet wurden.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Spielablauf & Steuerung:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Jeder Spieler steuert eine Schlange. Welche Farbe man hat kann man an der rechten Infobox entnehmen.</li>
|
||||||
|
<li>Benutze die Tasten <strong>W</strong> (hoch), <strong>A</strong> (links), <strong>S</strong> (runter), <strong>D</strong> (rechts) oder die <strong>Pfeiltasten</strong>, um deine Schlange zu steuern.</li>
|
||||||
|
<li>Sammelt gemeinsam Früchte (Äpfel und Blaubeeren), um Punkte zu erzielen und eure Schlangen wachsen zu lassen. Jede gefressene Frucht erhöht den gemeinsamen Punktestand.</li>
|
||||||
|
<li>Welche Schlange welche Frucht dabei sammelt ist egal.</li>
|
||||||
|
<li>Ziel ist es, so viele Punkte wie möglich zu sammeln, ohne mit den Wänden, der eigenen Schlange oder der Schlange des Partners zu kollidieren.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Spielende:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Das Spiel endet, wenn eine der Schlangen kollidiert.</li>
|
||||||
|
<li>Euer erreichter Punktestand wird angezeigt und gegebenenfalls in der Bestenliste gespeichert.</li>
|
||||||
|
<li>Ihr habt nach Spielende 5 Sekunden Zeit, direkt eine neue Runde zu starten, sofern beide Spieler noch im Spiel sind.</li>
|
||||||
|
<li>Sollte nur einer der Spieler erneut starten, wird das neue Spiel nach 5 Sekunden beendet.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Tipps:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Kommunikation ist der Schlüssel! Sprecht euch ab, um Kollisionen zu vermeiden und effizient Früchte zu sammeln.</li>
|
||||||
|
<li>Versucht, euch nicht gegenseitig den Weg abzuschneiden.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<button id="homeBtn">
|
||||||
|
<div class="buttonIcon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="35px" viewBox="0 -960 960 960" width="35px"
|
||||||
|
fill="#FFFFFF">
|
||||||
|
<path
|
||||||
|
d="M200-120q-33 0-56.5-23.5T120-200v-160h80v160h560v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0
|
||||||
|
56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm220-160-56-58 102-102H120v-80h346L364-622l56-58 200 200-200
|
||||||
|
200Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="buttonText">
|
||||||
|
Verlassen
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script src="../scripts/ButtonManager.js"></script>
|
||||||
|
</html>
|
||||||
63
frontend/introduction/style.css
Normal file
63
frontend/introduction/style.css
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
.buttonMenu{
|
||||||
|
height: 65vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#introWrapper{
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.6);
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
background-color: rgb(63, 63, 63, 0.5);
|
||||||
|
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anleitung-text-content h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-size: 2.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anleitung-text-content h2 {
|
||||||
|
color: #487fc0;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 1.6em;
|
||||||
|
border-bottom: 1px solid #487fc0;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anleitung-text-content ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
margin-left: 25px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding-left: 0; /* Entferne Standard-Padding von ul */
|
||||||
|
}
|
||||||
|
|
||||||
|
.anleitung-text-content li {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anleitung-text-content strong {
|
||||||
|
color: #FFA500; /* Orange für hervorgehobene Tasten */
|
||||||
|
}
|
||||||
|
|
||||||
|
.anleitung-bild {
|
||||||
|
max-width: 100%; /* Stellt sicher, dass Bilder nicht über den Container hinausragen */
|
||||||
|
height: auto; /* Behält das Seitenverhältnis bei */
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: block; /* Macht das Bild zu einem Blockelement für einfacheres Zentrieren/Margin */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-bild {
|
||||||
|
max-width: 60%; /* Kleinere Bilder, z.B. für UI-Ausschnitte */
|
||||||
|
}
|
||||||
@@ -8,7 +8,7 @@ class ButtonManager {
|
|||||||
{ id: "lobbyBtn", route: "/dashboard/lobby" },
|
{ id: "lobbyBtn", route: "/dashboard/lobby" },
|
||||||
{ id: "accountBtn", route: "/dashboard/account" },
|
{ id: "accountBtn", route: "/dashboard/account" },
|
||||||
{ id: "logoutBtn", route: "/api/account/logout" },
|
{ id: "logoutBtn", route: "/api/account/logout" },
|
||||||
{ id: "tutorialBtn", route: "https://www.youtube.com/watch?v=1fkV5rB13jQ" },
|
{ id: "tutorialBtn", route: "/introduction" },
|
||||||
{ id: "highScoreBtn", route: "/highscores"}
|
{ id: "highScoreBtn", route: "/highscores"}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user