diff --git a/css/startScreenLayout.css b/css/startScreenLayout.css index 5652c35..ccce079 100644 --- a/css/startScreenLayout.css +++ b/css/startScreenLayout.css @@ -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; } diff --git a/js/startjs.js b/js/startjs.js index 944fb86..b5678c2 100644 --- a/js/startjs.js +++ b/js/startjs.js @@ -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", ()=>{ - window.location.href = 'index.html'; +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++; }); \ No newline at end of file diff --git a/startScreen.html b/startScreen.html index 7a05a6b..a4a8ae0 100644 --- a/startScreen.html +++ b/startScreen.html @@ -9,13 +9,13 @@
-
Willkommen zu MathRunner

- +
Willkommen zu MathRunner

+ +
+
+
- - -