Javascript

 OPGAVER TIL HTML & CSS – JS – JULETRÆS SPIL

Opgave 1 - SPIL

OBS: demo virker ikke optimalt på sitet

Find så mange 🎄 pyntede Juletræer du kan UDEN at ramme forkert, inden for 1 minut.
Se hvor mange points du fik før tiden randte ud
Du missede en
1:00
🎄 Points

Opgave 1 – Del 1

Først skal vi igennem disse trin
  • Lav en ny pen i codepen.io
  • Vi starter med at bygge startskærmen i HTML delen.
Således her:

< div class=”start1″ id=”start1″ >
   < div class=”startText” >Find så mange 🎄 du kan UDEN at ramme forkert.< /div >
   < button class=”startButton” id=”startButton” onclick=”start()” >START< /button >
< /div >

Opgave 3 – Del 2

Tilføj så nu klasserne i CSS’en:

#start1 {
  position: absolute;
  height: 520px;
  width: 100%;
  background-color: lightblue;
  display: flex;
  font-family: verdana;
}

.startText {
  position: absolute;
  height: 500px;
  width: 100%;
  font-size: 40px;
  margin-top: 150px;
  text-align: center;
  line-height: 50px;
}

.startButton {
  position: absolute;
  font-size: 40px;
  margin-top: 300px;
  margin-left: 45%;
}

Opgave 3 – Del 3

Nu skal vi have tilføjet vinder siden i HTML’en

Det gør vi ved at tilføje denne den af kode:

< div class=”winner1″ id=”winner1″ >
  < div class=”winnerText” >Du missede en! < /div >
  < button class=”refreshButton” id=”refreshButton” onclick=”reset()” >SPIL IGEN< /button >
< /div >

Sæt herefter tilhørende klasser ind i CSS’en.

#winner1 {
  position: absolute;
  height: 520px;
  width: 100%;
  margin: auto;
  background-color: lightblue;
  font-family: verdana;
  visibility: hidden;
}

#refresh1 {
  position: absolute;
  height: 520px;
  width: 100%;
  margin: auto;
  background-color: lightblue;
  font-family: verdana;
  visibility: hidden;
}

.winnerText {
  position: absolute;
  height: 500px;
  width: 100%;
  font-size: 40px;
  text-align: center;
  margin-top: 150px;
}

.refreshButton {
  position: absolute;
  font-size: 40px;
  margin-top: 300px;
  margin-left: 40%;
  cursor: pointer;
}

Opgave 3 – Del 4

Så langt så godt! Nu skal tilbage til HTML’en
For at tilføje vores refresh side 

< div class=”refresh1″ id=”refresh1″ >
  < div class=”winnerText” >Du missede en < /div >
  < button class=”refreshButton” id=”refreshButton” onclick=”reset()” >SPIL IGEN< /button >
< /div >

Klasserne genbruger vi, så vi fra vinder siden, så der skal ikke laves noget i CSS for nu.

Opgave 3 – Del 5

Vi hopper igen op i vores HTML og laver nu boksen med alle knapperne i til selve spillet.
< div class=”christmasGame1″>
  < button id=”e1″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e2″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e3″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e4″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e5″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e6″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e7″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e8″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e9″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e10″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e11″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e12″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e13″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e14″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e15″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e16″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e17″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e18″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e19″ class=”emoji” onclick=”randomNumber()” >< /button >
  < button id=”e20″ class=”emoji” onclick=”randomNumber()” >< /button >
< /div >

Opgave 3 – Del 6

Nu skal vi så ned i CSS delen.
For at designe boksen med knapperne og selve knapperne.

.christmasGame1 {
  margin: auto;
  width: 700px;
  height: 400px;
}

.emoji {
  float: left;
  margin-left: 30px;
  margin-bottom: 30px;
  height: 100px;
  width: 100px;
  font-size: 50px;
  cursor: pointer;
  content: ”;
}

Opgave 3 – Del 7

Nu kan vi gå videre til JS delen.
Vi starte med at lave functionen start()

Opgave 3 – Del 8

Tilføj nu på linje 9, at Tal er sat til 0, således:
Tal = 0;
Nu går vi så i gang med at skabe vores function for selve spillet. Vi kalder den function for randomNumber().
Heri er der variabel som svarer til en array med emojis.
Se bort fra: randomE 
Vi har en heldig-knap som er btnLuck, den peger på ALLE knapper med emoji klassen
Til sidst har vi en randNum som tilfældigt tager 20 emojis og placere inde i alle knapper med emoji klassen.

Nu siger vi så at de samlede 20 heldige knapper (btnLuck, dem med klassen emoji), hvis “i” er det samme som randNum SÅ skal der en tilfældig emoji fra array på knappen.

MEN!! en tilfældig knap skal tildeles et pyntet juletræ.

Når man så klikker på det rette træ(pyntet juletræ) så skal point tælleren plusse med 1 OG functionen skal starte forfra.

HVIS IKKE man rammer rigtigt, også kendt som “ellers”/else, så skal tiden stoppes og refresh siden skal vises

HUSK at kalde på functionen efter alt dette!!! Der skal på en linje efter dette stå

randomNumber(); 

Opgave 3 – Del 9

Vi hopper nu tilbage til HTML og laver vores timer:
< div id=”js-timeout” class=”js-timeout” >1:00< /div >
 
Den sætter vi selvfølgelig også op i CSS’en:

.js-timeout {
  margin-top: 125px;
  margin-left: ;
  float: right;
  height: 15px;
  width: 100px;
  font-size: 25px;
  font-family: verdana;
}

Opgave 3 – Del 10

Så blev det tid til at lave funktionen, der tæller tiden på 1 minut: 

Opgave 3 – Del 11

Nu skal vi tilbage til HTML og lave det allersidste element, nemlig point delen:
< div class=”points”> Point < br >< input id=”visresultatet” type=”text” class=”visresultat” readonly/ > < /div >
Og selvfølgelig CSS’en der til:

.points {
  height: 15px;
  width: 100px;
  margin: auto;
  font-size: 20px;
  font-family: verdana;
}

.visresultat {
  position: absolute;
  height: 15px;
  width: 100px;
  font-size: 20px;
  text-align: center;
}

Opgave 3 – Del 12

Nu mangler at lave reset og point funktionen! 

Ekstra opgave

1. Design med dine egne emojis

Her under kan du se hvordan det nogenlunde ser ud uden JS koden.