Breakout/index.html at gh-pages · Merfoo/Breakout · 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
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" manifest="manifest.appcache">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <title>Breakout!</title>
    <link rel="shortcut icon" href="images/logoThumbnail.png"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/howToPlay.css"/>
    <link rel="stylesheet" type="text/css" href="css/animations.css"/>
    <link rel="stylesheet" type="text/css" href="css/hud.css"/>
    <link rel="stylesheet" type="text/css" href="css/touchBox.css"/>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/levels.js"></script>
    <script type="text/javascript" src="js/vars.js"></script>
    <script type="text/javascript" src="js/ui.js"></script>
    <script type="text/javascript" src="js/powerUps.js"></script>
    <script type="text/javascript" src="js/eventHandlers.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body id="gameBody" oncontextmenu="return false;">
    <p id="paused" class="animateFadeOut">PAUSED</p>
    <div id="startMenu" class="animateUp">
        <p id="pressEnter">PRESS TO PLAY</p>
        <p id="instructions">INSTRUCTIONS</p>
        <p id="creativeMode">CREATIVE MODE</p>
    </div>
    <div id="howToPlay">
        <div id="classicMode">
            <h1>General</h1>
            Use keys a/d to flip through levels, esc to go to start menu, alt to
            take a screen shot.
            <h1>Classic Mode</h1>
            Use the arrow keys to move the paddle, space to release the ball,
            p to pause/unpause the game.
            <h1>Creative Mode</h1>
            Click on the screen to add/remove bricks depending on the brick mode
            press ctrl to add blank level, del to delete the level. Press q/w to
            change to add/del mode of bricks, and press 0/1/2/3 to change the
            clicked brick to a invincible/1 hit/2 hit/3 hitbrick.
        </div>
    </div>
    <div id="hud">
        <div id="bonusBox">
            <div id="lifeBox" class="bonusItem">
                <div id="lifeBackground"><p id="lives">3</p></div>
                <img id="life" src="images/curLife.png" draggable="false"/>
            </div>
            <img id="bonusLazers" src="images/lazer.png" class="bonusItem" draggable="false"/>
            <img id="bonusUberBall" src="images/uberBall.png" class="bonusItem" draggable="false"/>
            <img id="bonusDuoBall" src="images/duoBall.png" class="bonusItem" draggable="false"/>
            <img id="bonusTriBall" src="images/triBall.png" class="bonusItem" draggable="false"/>
            <img id="bonusLongPaddle" src="images/longPaddle.png" class="bonusItem" draggable="false"/>
        </div>
        <div id="creativeOptions">
            <div id="brickModeBox">
                <p id="brickMode">Brick Mode:</p>
                <p id="brickModeAdd" class="brickModeItem">Add</p>
                <p id="brickModeDel" class="brickModeItem">Del</p>
            </div>
            <div id="brickLifeBox">
                <p id="brickLife">Brick Life:</p>
                <select id="brickLifeOptions" class="brickDropDown">
                    <option value="0">Invincible</option>
                    <option value="1" selected="selected">1 Hit</option>
                    <option value="2">2 Hit</option>
                    <option value="3">3 Hit</option>
                </select>
            </div>
        </div>
    </div>
    <canvas id="myCanvas"></canvas>
    <p id="backToStartMenu">Back</p>
    <div id="touchBox">
        <p id="launch">LAUNCH</p>
        <p id="delLevel">DEL</p>
        <p id="newLevel">NEW</p>
    </div>
    <img id="prevLevel" src="images/arrowLeft.png" draggable="false"/>
    <img id="nextLevel" src="images/arrowRight.png" draggable="false"/>
</body>
</html>