Tetris/index.html at main · GriffinHackley/Tetris · 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
<!DOCTYPE html>
<html lang = "en-US">
<head>
    <meta charset = "UTF-8">
    <title>Tetris</title>

    <link rel="stylesheet" href="styles/game.css">
</head>
<body onload = "MyGame.game.initialize();">
    <div id = "game">
        <div id = "main-menu" class = "screen">
            <ul class = "menu">
                <li><button id = "id-new-game">New Game</button></li>
                <li><button id = "id-high-scores">High Scores</button></li>
                <li><button id = "id-controls">Controls</button></li>
                <li><button id = "id-about">About</button></li>
            </ul>
        </div>
        <div id = "game-play" class = "screen">
            <canvas id = "id-canvas"></canvas>
        </div>
        <div id = "high-scores" class = "screen">
            <h1>High Scores</h1>
            <ol id="scores"></ol>
            <ul class = "menu">
                <li><button id = "id-high-scores-back">Back</button></li>
            </ul>
        </div>
        <div id = "controls" class = "screen">
            <h1>Controls</h1>
            <p>To change the controls, click on the control you wish to change and then press the button you would like it mapped to</p>

            <div class="flex-container">
                <div class= "flex-child">
                    <ul class = "menu">
                        <li><button id = "hard-control">Hard Down</button></li>
                        <li><button id = "down-control">Soft Down</button></li>
                        <li><button id = "right-control">Right</button></li>
                        <li><button id = "left-control">Left</button></li>
                        <li><button id = "clock-control">Clockwise</button></li>
                        <li><button id = "counter-control">Counter Clockwise</button></li>
                        <li><button id = "esc-control">Escape</button></li>
                        <li><button id = "id-controls-back">Back</button></li>
                    </ul>
                </div>
                <div class = "flex-child">
                    <ul id = "controls" class="control-display">
                        <li id = "hardControl"></li>
                        <li id = "downControl"></li>
                        <li id = "rightControl"></li>
                        <li id = "leftControl"></li>
                        <li id = "clockControl"></li>
                        <li id = "counterControl"></li>
                        <li id = "escapeControl"></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id = "about" class = "screen">
            <h1>About</h1>
            <p>Developed by</p>
            <p>Griffin Hackley</p>
            <ul class = "menu">
                <li><button id = "id-about-back">Back</button></li>
            </ul>
        </div>
    </div>

    <script>
        let MyGame = {
            screens : {},
            input: {},
            objects: {},
            systems:{},
            render: [],
        };
    </script>
    <script src = "scripts/random.js"></script>
    <script src = "scripts/systems/particle-system.js"></script>
    <script src = "scripts/render/core.js"></script>
    <script src = "scripts/render/particle-system.js"></script>

    <script src = "scripts/render/core.js"></script>
    <script src = "scripts/input-keyboard.js"></script>
    <script src = "scripts/input-mouse.js"></script>
    <script src = "scripts/game.js"></script>
    <script src = "scripts/mainmenu.js"></script>
    <script src = "scripts/gameplay.js"></script>
    <script src = "scripts/highscores.js"></script>
    <script src = "scripts/controls.js"></script>
    <script src = "scripts/about.js"></script>
</body>

</html>