Javascript

OPGAVER TIL HTML & CSS – JS – SPIL – ENDLESS RUNNER

Opgave 6 - SPIL

Opgave 6 – 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 id=”stage” >
< div class=”startScreen” >
< div class=”bg1″ >
< div class=”TxtBg1″ >
< h3 class=”h3-1″ >ENDLESS RUNNER!< /h3 >
< h4 class=”h4-1″ >Dodge the bees!< /h4 >
< p class=”p1″ >Press “I” to move up.< br >Press “K” to move down.< /p >
< a href=”” class=”btn1″ onclick=”Game1()” >Start Game< /a >
< /div >
< /div >
< /div >
< /div >

Opgave 6 – Del 2

Tilføj så skal vi tilsætte klasserne i CSS’en:

Linket til background: url(” “) kommer her:

https://mom2day.dk/wp-content/uploads/2020/12/EndlessRunnerBG1.gif

#stage

#stage {
margin:0 auto;
position:relative;
top:0;
left: 0;
overflow:hidden;
width:100%;
height:375px;
background: white;
font-family:helvetica, sans-serif;
}

.startScreen

.startScreen {
position: absolute;
width: 100%;
height: 300px;
background-image: linear-gradient(to right, darkblue, purple, orange, yellow);
}

.bg1

.bg1 {
position: absolute;
width: 100%;
height: 275px;
background: url(” “);
}

.TxtBg1 & .TxtBg2

.TxtBg1 {
height:275px;
width: 65%;
margin-left: 15%;
margin-top: 5%;
background-color: white;
display: grid;
}
.TxtBg2 {
height:275px;
width: 65%;
margin-left: 15%;
margin-top: 5%;
background-color: white;
display: grid;
}

.h3-1 & .h3-2

.h3-1 {
font-size: 3em;
text-align: center;
color: purple;
text-shadow:3px 3px 0 #000;
}
.h3-2 {
font-size:3em;
text-align: center;
color: purple;
text-shadow:3px 3px 0 #000;
}

.h4-1 & .p1

.h4-1 {
font-size: 20px;
margin: 0;
text-align: center;
}
.p1 {
text-align: center;
}

.btn1

.btn1 {
border: 1px solid #000;
padding: 0.5em 1em;
color: #fff;
width: 150px;
height: 30px;
font-weight: bold;
text-decoration: none;
background: #09c;
justify-self: center;
justify-content: center;
align-items: center;
text-align: center;
}
.btn1:hover {
background: black;
}

ENDLESS RUNNER!

Dodge the bees!

Press "I" to move up.
Press "K" to move down.

Start Game

Opgave 6 – Del 3

Nu skal vi have bygget elementerne for spillet, som scoreboard, layoutet, bier og ballon i CSS’en.

#scoreboard

#scoreboard {
background:#000;
font-weight:bold;
position:absolute;
top:5px;
right:5px;
color:#fff;
width:100px;
text-align:right;
z-index:500;
}

.ramme1

.ramme1{
position:absolute;
width:100%;
height:250px;
background-image:linear-gradient(to right, darkblue, purple, orange, yellow);
overflow-x:hidden;
overflow-y:hidden;
}

.background

.background{
background: url(” “);
background-repeat: repeat;
bottom:0px;
width:100%;
height:275px;
position: absolute;
top: 0;
left: 0;
animation-duration: 10s;
animation: loop 10s infinite linear;
}
@keyframes loop{
0%{
background-position: 0px 0px
}
100%{
background-position: -1200px 0px
}
}

HUSK at sætte dette link ind i url(” “):
https://mom2day.dk/wp-content/uploads/2020/12/EndlessRunnerBG1.gif

.platform

.platform{
position:absolute;
background-image:linear-gradient(green, black);
margin-top: 250px;
width:100%;
height:25px;
z-index:1;
}

#ballon1

#ballon1 {
width: 50px;
height: 80px;
padding: 0px;
text-align: center;
outline: none;
color: #fff;
background-color: none;
border: none;
position: absolute;
z-index:200;
background-image: url(‘https://cdn.pixabay.com/photo/2014/04/02/10/13/balloon-303142_960_720.png’);
background-size: 50px;
background-repeat:none;
}

.bee1

.bee1 {
width:50px;
height:50px;
z-index:200;
position:absolute;
right:-50px;
animation: float 4.5s linear;
background-image: url(‘https://cdn.pixabay.com/photo/2012/04/02/14/24/bee-24633_960_720.png’);
background-size: 50px;
background-repeat:none;
div {
width:50px;
height:50px;
}
}
@keyframes float {
0%{ transform: translate3d(0, 0, 0); }
100%{ transform: translate3d(-2000px, 0, 0);}
}
@keyframes spin {
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}

Opgave 6 – Del 4

Så langt så godt! Nu skal der koncentreres om JS koden

Først skal vi lave funktionen for spillet, herinde i skal alt koden ligge mellem { og } når du er færdig, vil du have kodet 127 linjer

function Game1() {

}

Skriv herefter koden ind i din JS blok, som vises på billederne mellem { og }. start på linje 2 og slut på linje 126 med billederne.

Opgave 6 – Del 5

Vi starter lige med at lave vores var(variabler til spillet), som skal implementere/tilføje vores id’er ind i spillet(inde i #stage), med div bokse.

Opgave 6 – Del 6

Nu skal vi så lave første funktion inde i funktionen. Nemlig startGame(), som skal hente vores variabler ind med append kald og definere vores intervaller og timer.

Læg mærke til at vi faktisk benytter klasser her i stedet for id’er.

Opgave 6 – Del 7

Nu kan vi gå videre til næste funktion inde i funktionen Game1(). Vi skal nemlig til at kode vores endGame() funktion.

Når spillet slutter, skal vores tilføjelser til #stage stoppe, det gør vi ved remove. Samt flytter ballonen på tværs af scenen hen til højre.

Når spillet slutter skal der også tilføjes(append) info om at spille igen. Dette gør vi ved at tilføje en div boks til stage med informationen og en knap i, til at starte spillet igen.

Opgave 6 – Del 8

Nu kan vi gå videre til næste funktion inde i Game1() funktionen. Vi skal nemlig lave vores vores taster, som skal få ballonen til at stige op (når man trykker på “I”) og dale (når man trykker på “K”)

Opgave 6 – Del 9

Vi skal lige sørge for at når vi ikke trykker på tasterne(altså har keyup) så stopper ballonen med at bevæge sig.

Vi sætter samtidig også funktionen med scoreboardet ind

Opgave 6 – Del 10

Så blev det tid til at lave funktionen, der placerer bierne med max antal, men random på scenen:

Her referer vi til vores variabler som vi lavede i starten. Hvis active_bees er mindre end max_bees(som er 6) så skal der indsættes bier i div bokse på scenen med tilfældig placering(random) inden for scenens højde. Vi gør herefter brug af setTimeout funktionen, der fjerner de aktive bier fra scenen efter 4500 ms/4.5 sekunder.

Opgave 6 – Del 11

Nu skal vi have kigget på at linke til JavaScript filen der styrer scriptet så det virker

Gå ind på tandhjulet på JS boksen og skriv linket her ind:

https:// ajax. googleapis. com/ajax/libs/jquery/3.5.1/jquery.min. js

OBS! der er mellemrum i linket, så husk at fjerne mellemrum

Opgave 6 – Del 12

Nu mangler at lave colissions funktionen!

Vi skal her definere ballonen og biens ydre positioner/omkreds. Når disse to har samme positioner, rører ved hinandens ydre positioner, så slutter spillet ved af køre funktionen endGame();