OPGAVER TIL HTML & CSS – JS – COLLISION
Opgave 6
Opgave 6 – Del 1
- Lav en ny pen i codepen.io
- Gå op i HTML boksen og skriv dette ind:
Opgave 6 – Del 2
Nu bygger vi den store store firkant i CSS’en.
.rectangle-1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #4CAF50;
width: 180px;
height: 150px;
border-radius: 5px;
transition: 0.3s all ease;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 25px;
}
.rectangle-1:after { /* dette er indholdet på firkanten */
content:”🙂”;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
Opgave 6 – Del 3
Nu skal vi lave en klasse for når den kolliderer, berøres af den anden firkant.
.rectangle-1.collide {
background: #EF5350;
}
.rectangle-1.collide:after {
content:”👍”;
}
Når den berøres skifter den baggrundsfarve og indholdet i content skiftes.
Opgave 6 – Del 4
Nu skal vi til at lave den lille orange firkant:
.rectangle-2 {
Opgave 6 – Del 5
Det sidste vi mangler i CSS’en er klassen for den orange firkant, som tilføjes når man trækker den rundt. Den får en skygge på og skubbes op ad:
.rectangle-2.onDrag {
box-shadow: 5px 5px 25px 0px rgba(0,0,0,0.5);
transform: translate(-3px, -3px);
}
Opgave 6 – Del 6
Vi kan nu gå i gang med at lave vores JS(JavaScript) kode. Som kommer til at være af flere funktioner., og gør det muligt at trække vores lille firkant rundt og for den store til at reagere når de rører ved hinanden.
Opgave 6 – Del 7
Nu starter vi så den store funktion initDrag, som kommer til at rumme flere funktioner i sig. og den første funktionen inden i, nemlig mouseMove(ev) funktionen
Opgave 6 – Del 8
Stil dig nu på linje 31 og gør klar til at tilføje næste funktion inde i initDrag funktionen.
Opgave 6 – Del 9
Dette er den sidste funktion inde i initDrag funktion. Når dette er skrevet ind skal du gerne have 51 linjer kode hvor den sidste linje er en slut } 😉
Opgave 6 – Del 10
Nu skal vi lave collisions funktionen, den kaldet vi hitDetection():
Opgave 6 – Del 11
Nu mangler vi bare de to sidste funktioner! 🥳 Nemlig skyggen det addes til når vi trække den lille firkant og fjernes når vi slipper den.
