Hilman-Azfar.github.io/index.html at master · Hilman-Azfar-old/Hilman-Azfar.github.io · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
    <title>Under pressure</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>UNDER PRESSURE</h1>
    </header>
    <div class="how-to-overlay" id="how-to-1">
        <div class="how-to-info">
            <div class="box-ctn"></div>
            <p>Prevent boxes from reaching the end by typing in the text inside the box!</p>
            <p>Look out for special boxes that will trick you!</p>
            <button onclick="overlayTwo()">CLOSE</button>
        </div>
    </div>
    <div class="how-to-overlay" id="how-to-2" style="display: none;">
        <div class="how-to-info">
            <p>Trigger combos by deleting the boxes in the right sequence.</p>
            <p> These combos grant you special powers!</p>
            <button onclick="overlayThree()">CLOSE</button>
        </div>
    </div>
    <div class="how-to-overlay" id="how-to-3" style="display: none;">
        <div class="how-to-info">
            <p>To begin, press "Start"</p>
            <p>You can use spacebar or enter key to lock in your words</p>
            <p>Select theme/difficulty in this dropbar</p>
            <p>Good luck and gambatte!</p>
            <button onclick="overlayOver()">CLOSE</button>
        </div>
    </div>
    <div class="display-ctn">
        <div class="overlay" id="start-overlay">
            <h1>START</h1>
        </div>
        <div class="overlay" id="gameover-overlay">
            <h1>GAME OVER</h1>
        </div>
        <div class="overlay" id="gamewon-overlay">
            <h1>GAME WON</h1>
        </div>
        <div class="display-game"></div>
        <div class="display-side-bar">
            <div class="display-side-bar-item game-state">
                <h3>GAME STATE</h3>
                <p></p>
            </div>
            <div class="display-side-bar-item game-stage">
                <h3>GAME STAGE</h3>
                <p></p>
            </div>
            <div class="display-side-bar-item score">
                <h4>Score</h4>
                <p></p>
            </div>
            <div class="display-side-bar-item last-delete">
                <h4>Last deleted</h4>
                <p></p>
            </div>
            <div class="display-side-bar-item combo">
                <h4>Combo</h4>
                <p></p>
            </div>
        </div>
    </div>
    <div class="input-panel">
        <div class="options">
            <div class="option-1">
                <label for="data-set">Choose your theme: </label>
                <select name="data-set" id="data-set">
                    <option value="test">Test</option>
                    <option value="food">Food</option>
                    <option value="harry">Harry Potter</option>
                </select>
            </div>
            <div class="option-2">
                <label for="user-difficulty">Choose your difficulty: </label>
                <select name="user-difficulty" id="user-difficulty">
                    <option value="easy">Easy</option>
                    <option value="moderate">Moderate</option>
                    <option value="hard">Hard</option>
                    <option value="insane">Insane</option>
                </select>
            </div>
        </div>
        <input type="text" name="user-input" id="user-input" >
        <button id="start" onclick="gameStart()">START</button>
    </div>
    <div class="instructions">
        <div class="how-to">
            <h2>How to play the game</h2>
            <ol>
                <li>Press start to begin</li>
                <li>Type in the text in the boxes</li>
                <li>You can use space or enter to lock in the word</li>
                <li>Find combos for score multiplier</li>
                <li>Watch out for special boxes</li>
                <li>Survive the last stage</li>
                <li>Have fun!</li>
            </ol>
        </div>
        <div class="combo-list">
            <table>
                <tr>
                    <th>Perk</th>
                    <th>Combo List</th>
                </tr>
                <tr>
                    <td>Score multiplier</td>
                    <td id="table-combo">combo + combo + combo</td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>