FEND-project-3-arcade/index.html at master · IreneMarin/FEND-project-3-arcade · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Effective JavaScript Frogger</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- Start screen of the game -->
    <div id="opening" class="opening">
        <div class="story">
            After a month of coding non-stop, you finally finished project 3...
            <br><br>
            Now it is time to have some beers with your friend, who has waited patiently without bugging you, and
            celebrate it!
            <br><br>
            But wait... you forgot where she lives... darn. So let's go search for her house!
        </div>
        <div class="choices">
            Choose your hero:<br><br>
            <img id="boy" src="img/menu/char-boy.png" class="player">
            <img id="cat-girl" src="img/menu/char-cat-girl-off.png" class="player">
            <br>
            <img id="horn-girl" src="img/menu/char-horn-girl-off.png" class="player">
            <img id="princess-girl" src="img/menu/char-princess-girl-off.png" class="player">
        </div>
        <div class="choices">
            Choose the difficulty:<br><br>
            <div id="easy" class="easy">EASY</div>
            <div id="normal" class="normal active">NORMAL</div>
            <div id="hard" class="hard">HARD</div>
            <div id="nightmare" class="nightmare">NIGHTMARE</div>
        </div>
        <div class="instructions">
            To move your character,<br>use the keyboard arrows.
            <br>
            <img src="img/menu/arrows-blue.jpg">
            <br><br> To start the game,<br>press Enter.
            <br>
            <img src="img/menu/enter-blue.jpg">
        </div>
    </div>
    <div style="clear: both;"></div>

    <!-- Dialogs for each level when the player opens de door -->
    <div id="dialogs" class="dialogs">
        <div id="dialog1" class="dialog1">
            She is not here ...
        </div>
        <div id="dialog2" class="dialog2">
            Where is her house?
        </div>
        <div id="dialog3" class="dialog3">
            I'm getting tired
        </div>
        <div id="dialog4" class="dialog4">
            Hi, friend!!
        </div>
    </div>

    <!-- Menu during the game, for the stats -->
    <div id="menu" class="menu">
        <div class="items"><img src="img/menu/heart.png"><span id="numberLifes" class="numberLifes"></span></div>
        <div class="items"><img src="img/menu/key.png"><span id="numberKeys" class="numberKeys"></span></div>
        <div class="items"><span id="hasGems" class="hasGems"></span></div>
        <div class="level">LVL <span id="numberLevel" class="numberLevel"></span></div>
    </div>

    <script src="js/resources.js"></script>
    <script src="js/app.js"></script>
    <script src="js/engine.js"></script>
</body>

</html>