CSS

We gaan nu de CSS file optuigen, zodat onze game een beetje leuk gaat uitzien.

1. Eerst maken we een kleine reset zodat we alle margin en padding properties op 0 zetten (regel 2 ev.)
2. Vervolgens lezen we het font in (regel 8 ev.).
3. Nu definieren we variabelen voor de kleuren en het font. Dat werkt wel zo netjes (regel 17 e.v)

reset, root & fonts

/* reset */
* {
    margin: 0;
    padding: 0;
}

/* Font */
@font-face {
    font-family: 'edinterlock';
    src: url('../fonts/ed-interlock.woff2') format('woff2'),
    url('../fonts/ed-interlock.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* root-vars */
:root {
    /* FONTS */
    --headings: "edinterlock";

    /* COLORS */
    --dark: #1e1e1e;
    --purple: #9e005d;
    --white: #FFF;
    --black: #000;
}

body & logo

Eerst even de "grote bijzaken" fixen: de body en het logo

1. De body zetten we op flex en we organiseren de boel in columns
2. Het logo zetten we fixed neer in de linkerbovenhoek, met een hoge z-index waardoor het logo altijd on top blijft.

/* body */
body {
    background-color: var(--dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: none;
}

/* Logo */
.logo {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 500px;
    height: 200px;
    z-index: 10000;
    background-image: url('../img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}

Het Scoreboard, tijd- en snelheidsindicatoren

Eerst stylen we de info-box zodat deze horizontaal weergegeven wordt:

/* Score, Speed & Timer boards */
.info {
    display: flex;
    gap: 20px;
    margin: 40px;
}

Boxen stylen

Nu kunnen we de afzonderlijke <div class='box'> stylen. We zetten de display op flex en centeren de onderliggende content verticaal. Ook zetten we het font om:

.box { 
    display: flex;
    height: 100px;
    width: 200px;
    align-items: center;
    justify-content: center;
    font-family: var(--headings);
}

Box content stylen

Nu gaan we de heading paars maken en de letters wat groter:

.box h2 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--purple);
    font-size: 2em;
}

.score {
    font-size: 4em;
    text-align: center;
}

.speed, .timer {
    font-size: 3em;
    text-align: center;    
}
.speed {
    text-transform: uppercase;
}

Gameboard

Het board waar de molshopen in zitten, gaan we met een grid van 3 bij 3 optuigen:

/*  Game Board */
.board {
    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}

De "molshopen"

De gaten/molshopen en mollen zelf zijn vrij recht-toe recht-aan. Maar we voegen wèl een animatie toe zodat de mol omhoog komt zodra het gat geactiveerd wordt.

.hole .mole {
    width: 70%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    animation: rise .3s ease-out;
}

/* Animation */
@keyframes rise {
    0% { transform: translateX(-50%) translateY(100%);}
    100% { transform: translateX(-50%) translateY(0);}
}

De hamer

Rest ons nog de hamer. Zodra we straks de hamer activeren (slaan) moet deze 45 graden gedraaid worden (de .active-class)

/* Hammer */
.hammer {
    height: 110px;
    width: 100px;
    position: absolute;
    bottom: 100px;
    right: 100px;
    background-image: url('../img/hammer.png');
    background-size: 100% 100%;
    transform: translate(-20%, -20%);
    transition: transform .1s;
    pointer-events: none;
}

.hammer.active{
    transform: translate(-20%, -20%) rotate(-45deg);
}

🐣

hacker level #2

Volledige CSS code

/* reset */
* {
    margin: 0;
    padding: 0;
}

/* Font */
@font-face {
    font-family: 'edinterlock';
    src: url('../fonts/ed-interlock.woff2') format('woff2'),
         url('../fonts/ed-interlock.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root {
    /* FONTS */
    --headings: "edinterlock";

    /* COLORS */
    --dark: #1e1e1e;
    --purple: #9e005d;
    --white: #FFF;
    --black: #000;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: none;
}

/* Logo */
.logo {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 500px;
    height: 200px;
    z-index: 10000;
    background-image: url('../img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}

/* Score, Speed & Timer boards */
.info {
    display: flex;
    gap: 20px;
    margin: 40px;
}

.box { 
    display: flex;
    height: 100px;
    width: 200px;
    align-items: center;
    justify-content: center;
    font-family: var(--headings);
}


.box h2 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--purple);
    font-size: 2em;
}

.score {
    font-size: 4em;
    text-align: center;
}

.speed, .timer {
    font-size: 3em;
    text-align: center;    
}
.speed {
    text-transform: uppercase;
}

.board {
    height: 400px;
    width: 400px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}


/* Holes & Moles */
.hole {
    background-color: var(--black);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.hole .mole {
    width: 70%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    animation: rise .3s ease-out;
}

/* Animation */
@keyframes rise {
    0% { transform: translateX(-50%) translateY(100%);}
    100% { transform: translateX(-50%) translateY(0);}
}


/* Hammer */
.hammer {
    height: 110px;
    width: 100px;
    position: absolute;
    bottom: 100px;
    right: 100px;
    background-image: url('../img/hammer.png');
    background-size: 100% 100%;
    transform: translate(-20%, -20%);
    transition: transform .1s;
    pointer-events: none;
}

.hammer.active{
    transform: translate(-20%, -20%) rotate(-45deg);
}