-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
190 lines (172 loc) · 6.75 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!--TODO: Generalise version number as constant
title | fb metatag | twitter metatag | Opengraph metatag | infoBox | gameMenu Screen-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BreakOut! v5.2</title>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="description" content="Play the world's famous block breaker game with tons of features like different brick types, random level generator and many more.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://ashishjii.github.io/Breakout/">
<meta property="og:type" content="website">
<meta property="og:title" content="BreakOut v5.2">
<meta property="og:description" content="Play the world's famous block breaker game with tons of features like different brick types, random level generator and many more.">
<meta property="og:image" content="https://raw.githubusercontent.com/AshishJii/Breakout/main/assets/images/squareIco_1200.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="ashishjii.github.io">
<meta property="twitter:url" content="https://ashishjii.github.io/Breakout/">
<meta name="twitter:title" content="BreakOut v5.2">
<meta name="twitter:description" content="Play the world's famous block breaker game with tons of features like different brick types, random level generator and many more.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/AshishJii/Breakout/main/assets/images/squareIco_1200.png">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta property="og:title" content="BreakOut v5.2" />
<meta property="og:url" content="https://ashishjii.github.io/Breakout/" />
<meta property="og:image" content="assets/images/squaredIco.png" />
<link rel = "icon" href = "https://raw.githubusercontent.com/AshishJii/Breakout/main/assets/images/circleIco_200.png" type = "image/x-icon">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<img id="img_ball" src="assets/images/ball.png">
<img id="img_brick1" src="assets/images/brick1.png">
<img id="img_brick2" src="assets/images/brick2.png">
<img id="bg" src="assets/images/bg_mountains1.png">
<img id="img_paddle" src="assets/images/paddle.png">
<div id="containerBox">
<canvas id="mainCanvas" width="475" height="300"></canvas>
<canvas id="bgCanvas" width="475" height="300"></canvas>
</div>
<div id="keysAndInfoContainer">
<div id="controlBox">
<button id="escBut" style="background: #aaa; width: 122px;border-radius: 50%;">ESC</button>
<button id="spaceBut" style="background: #aaa; width: 122px;border-radius: 40%;">SPACE</button>
<button id="enterBut" style="background: #aaa; width: 122px;border-radius: 50%;">ENTER</button>
<br><br>
<button id="leftBut" style="background: #aaa; width: 185px;height: 150px;border-radius: 20%;">LEFT</button>
<button id="rightBut" style="background: #aaa; width: 185px;height: 150px;border-radius: 20%;">RIGHT</button>
</div>
<div id="infoBox">
WHAT'S NEW: <br>
Version 5.2/5.0
<br>
<li>An intro dialog box</li>
<li>Added Anonymous Authentication.</li>
<li>Ball bounces according to where it hits the paddle.</li>
<li>ADDED Bonus points for multi-hits</li>
<li>Scaled for mobiles</li>
UPCOMING GOALS: <br>
(1) The ball checks for collision from its center. It should check it from its edges. (2) A setting screen to change different Parameters. (3) Multi ball powerup. (4) Sounds?<br>
<hr>
Link to the code:<br>
<a href="https://github.com/AshishJii/Breakout/tree/main" style="background: #2ed936;color: #152fd6;">
https://github.com/AshishJii/Breakout/tree/main
</a>
</div>
</div>
<style>
/* Loading bar styling */
/*some day in future, remove keyframe if it takesmemory when not visible"*/
.dot-pulse {
position: relative;
left: -9999px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9880ff;
color: #9880ff;
box-shadow: 9999px 0 0 -5px #9880ff;
animation: dotPulse 1.5s infinite linear;
animation-delay: .25s;
}
.dot-pulse::before, .dot-pulse::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9880ff;
color: #9880ff;
}
.dot-pulse::before {
box-shadow: 9984px 0 0 -5px #9880ff;
animation: dotPulseBefore 1.5s infinite linear;
animation-delay: 0s;
}
.dot-pulse::after {
box-shadow: 10014px 0 0 -5px #9880ff;
animation: dotPulseAfter 1.5s infinite linear;
animation-delay: .5s;
}
@keyframes dotPulseBefore {
0% {
box-shadow: 9984px 0 0 -5px #9880ff;
}
30% {
box-shadow: 9984px 0 0 2px #9880ff;
}
60%,
100% {
box-shadow: 9984px 0 0 -5px #9880ff;
}
}
@keyframes dotPulse {
0% {
box-shadow: 9999px 0 0 -5px #9880ff;
}
30% {
box-shadow: 9999px 0 0 2px #9880ff;
}
60%,
100% {
box-shadow: 9999px 0 0 -5px #9880ff;
}
}
@keyframes dotPulseAfter {
0% {
box-shadow: 10014px 0 0 -5px #9880ff;
}
30% {
box-shadow: 10014px 0 0 2px #9880ff;
}
60%,
100% {
box-shadow: 10014px 0 0 -5px #9880ff;
}
}
</style>
<dialog id="userDialog" open>
<!--Primary dialog screen-->
<span id="userSelectionPage" style="padding:0px">
<span id="gameIntro" style="display:block;font-size:15px;font-family: sans-serif;">
<b><u>Welcome to BreakOut v5.2</u></b><br>
•Made with HTML, CSS, and vanilla JS with Firebase integration<br>
•Players can break blocks and compete for High Scores, thanks to Firebase's real-time database.<br>
<hr>
<b>Controls:</b> <br>
•Press left and right arrow key to control paddle.<br>
•Press Esc to play/pause.<br>
<hr>
</span>
<span id="savedUsers" style="padding: 0px">
<span style="font-size: 14px;font-weight: bold;">Fetching past players from this PC...</span>
<div class="stage"><div class="dot-pulse"></div></div>
</span>
<span id="playAsNewPlayer" style="background: #aaa; display:block">
New player<span style="float:right; background: inherit;">></span>
</span>
</span>
<!--New User dialog screen-->
<span id="userNamePage" style="display:none;padding:0px">
<fieldset>
<legend>Name</legend>
<input type="text" name="name" id="nameBox" placeholder="Enter your Name" style="border: none;outline: none;width: 70%;font-size: 20px;">
<button id="playButton" style="width:20%; background: #aaa;height: 30px;">Play!</button>
</fieldset>
</span>
</dialog>
<script type="module" src="index.js"></script>
</body>
</html>