-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (130 loc) · 4.25 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
<!doctype html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P73F0EQLS4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-P73F0EQLS4');
</script>
<title>CSS Brickout Demo - Play the Game Online</title>
<meta property="og:title" content="CSS Brickout Demo - Play the Game Demo Online" />
<meta
name="description"
content="Play the CSS Brickout Demo game online. Mobile-friendly. Move the paddle with mouse or touch, start/pause/resume the game with spacebar or 'P' key, and enable debug mode with 'D' key."
/>
<meta
property="og:description"
content="Play the CSS Brickout Demo game online. Mobile-friendly. Move the paddle with mouse or touch, start/pause/resume the game with spacebar or 'P' key, and enable debug mode with 'D' key."
/>
<meta
property="og:image"
content="https://github.com/MaximeIJ/css-brickout/assets/5600516/997e7a09-2852-4170-bdf1-8f2fcab09cd9"
/>
<meta name="keywords" content="CSS Brickout, game, game engine, paddle, demo, CSS game, online game, HTML5 game" />
<meta name="author" content="Maxime IJ" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html {
color-scheme: dark light;
font-size: 16px;
}
body {
margin: 0;
height: 100vh;
width: 100vw;
overflow-x: hidden;
position: relative;
}
main {
padding: 0 1rem;
}
article {
overflow: hidden;
}
footer {
padding: 0.5rem 0;
}
#instructions,
#instructions > fieldset {
display: flex;
}
#instructions > div {
flex-grow: 1;
padding: 0 min(1rem, 5%);
}
#instructions > div > label {
display: block;
}
label {
margin: 0.5rem 0;
}
#demo-screen {
width: min(1960px, 100%);
height: min(1650px, 75vh);
margin: 0 auto;
@media screen and (max-width: 600px) {
height: 63vh;
}
@media screen and (max-height: 450px) {
height: 82vh;
width: 75%;
}
}
</style>
</head>
<body>
<main>
<article>
<h1>CSS Brickout Demo</h1>
<section id="demo-screen" class="windowed classic"><div id="game"></div></section>
<section id="instructions">
<div>
<ul>
<li>Mouse or Touch - Move Paddle</li>
<li>Spacebar or P - Start/Pause/Resume Game</li>
<li>D - Debug mode (with auto-play, FPS tracking)</li>
</ul>
</div>
<div>
<label for="updates-frame"
>Updates / Frame <input id="updates-frame" type="range" step="1" min="1" value="100" max="1000" />
<span id="updates-frame-label">100</span>
</label>
<label for="game-speed"
>Game Speed <input id="game-speed" type="range" step="0.05" min="0.05" value="1" max="20" />
<span id="game-speed-label">1.00X</span>
</label>
<label for="layout-type"
>Brick layout
<select id="layout-type">
<option value="hello">Welcome</option>
<option value="even">Even Steven</option>
<option value="stress">Stress Test</option>
<option value="random">Random Crap</option>
<option value="mixed">Kitchen Sink</option>
</select>
</label>
<label for="theme"
>Theme
<select id="theme">
<option value="classic">Classic (never played it)</option>
<option value="lava">(the floor is) Lava</option>
</select>
</label>
</div>
</section>
</article>
<footer>
<p>
<a href="https://github.com/maximeij/css-brickout" target="_blank">Repository (Github)</a>
</p>
</footer>
</main>
<script src="src/demo/demo.ts" type="module"></script>
</body>
</html>