PBG2H23AKL/FEE_MathRunner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tutorial

Browse Source
This commit is contained in:
Jan Breitkreuz 2024-08-31 17:30:29 +02:00
parent 6b8e5eb9fc
commit 6cd16d5217
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/startScreenLayout.css
View File

@ -16,8 +16,10 @@ body {
text-align: center;
padding: 20px;
background-color: #ffffffcc;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
width: 1000px;
height: 700px;
margin: auto;
position: relative;
}

26
js/startjs.js
View File

@ -1,5 +1,27 @@
const startButton = document.querySelector("#startScreen button");
const weiterButton = document.querySelector("#startScreen button");
let storyAbschnitt = 0;
let story = ["Oh Nein, Das Müllmonster ist ausgebrochen!",
"Wir müssen es wieder einfangen!",
"Du bist ein Fuchs und bewegst dich mit A und D",
"Du hast einen Zahl über deinen Kopf",
"Und dein Ziel ist es, diese so groß wie möglich zu machen",
"Laufe also durch die richtigen Rechnungen um deine Zahl zu vergrößern",
"Wenn du am Ende die größere Zahl als das Müllmosnter hast, gewinnst du",
"Viel Glück"];
let text = document.getElementById("storyText");
let tomAnim = ["pics/tom_1.png", "pics/tom_2.png", "pics/tom_3.png"]
let tom = document.getElementById("tomBild");
startButton.addEventListener("click", ()=>{
weiterButton.addEventListener("click", ()=>{
if(storyAbschnitt <= 7)
{
text.innerText = story[storyAbschnitt];
}
else
{
window.location.href = 'index.html';
}
tom.src = tomAnim[storyAbschnitt%3];
console.log(tomAnim[storyAbschnitt%3]);
storyAbschnitt++;
});

10
startScreen.html
View File

@ -9,13 +9,13 @@
<body>
<div id="spielRaum">
<div id="startScreen">
<h1>Willkommen zu MathRunner</h1>
<button id="startButton">Start</button>
<h1 id = "storyText" >Willkommen zu MathRunner</h1>
<button id="startButton">Weiter</button>
</div>
<div id="tom">
<img id="tomBild" src="pics/tom_1.png" alt="tom">
</div>
</div>
<script src="js/rechnungen.js"></script>
<script src="js/funktionen.js"></script>
<script src="js/startjs.js"></script>
<script src="js/allg.js"></script>
</body>
</html>