-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (95 loc) · 3.98 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Top Down RPG Game</title>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="topspace" class="col-12 topspace">
<p class="title">Legend of tiny pixelated 1980s man!</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row game-row">
<div id="left-side" class="col-2 left-side" height="352">
<div class="left-border-box">
<p>Game level:</p>
<p id="game-num">0</p>
</div>
<div class="left-border-box">
<p>Kill score:</p>
<p id="score-num">0</p>
</div>
<div>
<p>High score:</p>
<p id="high-score">0</p>
</div>
</div>
<div class="col-8 canvas-div" width="512" height="352">
<canvas id="background-map" class="canvas-blur"></canvas>
<canvas id="enemy-map" class="canvas-blur"></canvas>
<canvas id="death-canvas"></canvas>
<canvas id="explosion-canvas"></canvas>
<canvas id="sprite-map"></canvas>
<canvas id="win-canvas"></canvas>
</div>
<div class="col-2 hearts-col" height="352">
<img class="heart" id="heart-one" src="images/heart.gif"><br>
<img class="heart" id="heart-two" src="images/heart.gif"><br>
<img class="heart" id="heart-three" src="images/heart.gif"><br>
<img class="heart" id="heart-four" src="images/heart.gif"><br>
<label>Invincible
<input class="checkboxes" type="checkbox" id="invincible"><br>
</label>
<label>Sound effects
<input class="checkboxes" type="checkbox" id="soundFx"><br>
</label>
<label>Continuous play
<input class="checkboxes" type="checkbox" id="continuous-play"><br>
</label>
<button type="button" class="grow-button" id="start-game">Start game</button>
</div>
</div>
</div>
<div class="d-pad mobile">
<div class="d-pad-arrow mobile" id="up"></div>
<div class="d-pad-arrow mobile" id="left"></div>
<div class="d-pad-arrow mobile" id="down"></div>
<div class="d-pad-arrow mobile" id="right"></div>
</div>
<div class="mobile" id="attack-box">
<div class="mobile" id="attack"></div>
</div>
<div id="audio-box">
<audio controls autoplay loop>
<source src="background-song.wav" type="audio/wav">
</audio>
</div>
<div id="about-box">
<div id="made-by-box">
<p> game and music by scott rosehart</p>
</div>
<div id="links-box">
<p>
<a class="logo-links" href="http://github.com/ScoRoc" target="_blank"><img id="github-logo" src="images/GitHub-Mark-Light-32px.png"></a>
<a class="logo-links" href="http://www.linkedin.com/in/scottrosehart" target="_blank"><img id="linkedin-logo" src="images/In-White-28px-R.png"></a>
<a class="logo-links" href="http://twitter.com/ScoRoc" target="_blank"><img id="twitter-logo" src="images/Twitter_Social_Icon_Rounded_Square_White.png"></a>
<a class="logo-links" target="_blank">
<iframe id="soundcloud-logo" allowtransparency="true" scrolling="no" frameborder="no" src="https://w.soundcloud.com/icon/?url=http%3A%2F%2Fsoundcloud.com%2Fanimalwarfare&color=white_transparent&size=24" style="width: 22px; height: 15.5px;"></iframe>
</a>
</p>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>