Skip to main content

HTML

Wat gaan we maken?​

Het scherm gaat er als volgt uitzien:

Het Scoreboard, tijd- en snelheidsindicatoren​

Op het voorbeeld zien we dat de score en de indicatoren netjes naast elkaar staan. Dat regelen we straks in CSS. Eerst maar even op het scherm krijgen.

We maken daartoe een <div> met de class info en we nemen hierin 3x een <div class='box'> tag op. Deze voorzien we op hun beurt weer met een <h2> voor de tekst en een <div class='...'> voor de uiteindelijke waardes: 

    <div class="info">
        <div class="box">
            <div>
                <h2>speed</h2>
                <div class="speed">SLOW</div>
            </div>
        </div>
        <div class="box">
            <div>
                <h2>score</h2>
                <div class="score">0</div>
            </div>
        </div>
        <div class="box">
            <div>
                <h2>time left</h2>
                <div class="timer">60s</div>
            </div>
        </div>
    </div>

Als je dit ververst, lijkt dit zonder stylesheet nergens op:

Next stop: de "molshopen" en de hamer​

We vangen de "molshopen" en de hamer in een <div> met de class content. Dit doen we om straks als de countdown op 0 staat in ÊÊn keer het speelveld te verbergen.

We nemen 9 <div>s met de class hole op: hier zal straks random onze mol in verschijnen.

Neem onderstaande code over in je document: 

   <div class="content">
        <div class="board">
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
        </div>
        <div class="hammer"></div>
    </div>

De <div> met de class hammer gaan we straks "misbruiken" om de muis-cursor aan te passen.

Logo en game-script​

Uiteindelijk voegen we het logo en een "include" van het game-script toe en is het HTML stukje klaar: 

    <!-- Logo overlay -->
    <div class="logo"></div>

    <!-- game script inlezen -->
    <script src="./js/main.js"></script>
đŸĨš
hacker level #1

Volledige HTML code​

Je volledige HTML file moet er nu zo uitzien: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheet inladen -->
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Whack-a-Mole</title>
</head>
<body>

    <div class="info">
        
        <div class="box">
            <div>
                <h2>speed</h2>
                <div class="speed">SLOW</div>
            </div>
        </div>
        
        <div class="box">
            <div>
                <h2>score</h2>
                <div class="score">0</div>
            </div>
        </div>
        
        <div class="box">
            <div>
                <h2>time left</h2>
                <div class="timer">60s</div>
            </div>
        </div>
        
    </div>
    
    <div class="content">
        <div class="board">
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
            <div class="hole"></div>
        </div>
        <div class="hammer"></div>
    </div>
    
    <!-- Logo overlay -->
    <div class="logo"></div>

    <!-- game script inlezen -->
    <script src="./js/main.js"></script>

</body>
</html>