Skip to content

Commit 940e21e

Browse files
Afif13Afif13
committed
another game
1 parent aca7378 commit 940e21e

File tree

13 files changed

+448
-16
lines changed

13 files changed

+448
-16
lines changed

Diff for: ‎click-the-circles/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
<meta name="robots" content="index, follow">
1212
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
1313
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
14-
<link rel=canonical href="https://css-games.com/click-the-circles" >
14+
<link rel=canonical href="https://css-games.com/click-the-circles/" >
1515

1616
<meta property="og:locale" content="en_US" />
1717
<meta property="og:title" content="CSS Games: Click the Circles">
1818
<meta property="og:type" content="website">
19-
<meta property="og:url" content="https://css-games.com/click-the-circles">
19+
<meta property="og:url" content="https://css-games.com/click-the-circles/">
2020
<meta property="og:description" content="Play a CSS only music game. Sounds on and click the circles">
2121
<meta property="og:image" content="https://css-games.com/click-the-circles/click-the-circles.png">
2222
<link rel="stylesheet" href="style.css?v=0.2">

Diff for: ‎coin-collector/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
<meta name="robots" content="index, follow">
1212
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
1313
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
14-
<link rel=canonical href="https://css-games.com/coin-collector" >
14+
<link rel=canonical href="https://css-games.com/coin-collector/" >
1515

1616
<meta property="og:locale" content="en_US" />
1717
<meta property="og:title" content="CSS Games: Coin Collector">
1818
<meta property="og:type" content="website">
19-
<meta property="og:url" content="https://css-games.com/coin-collector">
19+
<meta property="og:url" content="https://css-games.com/coin-collector/">
2020
<meta property="og:description" content="Collect all the coins but don't touch the walls! Do it as fast as possible">
2121
<meta property="og:image" content="https://css-games.com//coin-collector/coin-collector.png">
2222
<meta property="og:image:width" content="1600" />

Diff for: ‎gem-catcher/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
<meta name="robots" content="index, follow">
1212
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
1313
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
14-
<link rel=canonical href="https://css-games.com/gem-catcher" >
14+
<link rel=canonical href="https://css-games.com/gem-catcher/" >
1515

1616
<meta property="og:locale" content="en_US" />
1717
<meta property="og:title" content="CSS Games: Gem Catcher">
1818
<meta property="og:type" content="website">
19-
<meta property="og:url" content="https://css-games.com/gem-catcher">
19+
<meta property="og:url" content="https://css-games.com/gem-catcher/">
2020
<meta property="og:description" content="Grab the gem without touching the walls! Do it as fast as possible">
2121
<meta property="og:image" content="https://css-games.com/gem-catcher/gem-catcher.png">
2222
<link rel="stylesheet" href="style.css?v=0.2">

Diff for: ‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ <h1><span>C</span><span>S</span><span>S</span> Games</h1>
4949
<article style="background-image:url(https://css-games.com/puzzle-v2/puzzle.png)"><a href="https://css-games.com/puzzle-v2/">Puzzle V2</a></article>
5050
<article class="chrome" style="background-image:url(https://css-games.com/super-css-mario/mario.png)"><a href="https://css-games.com/super-css-mario/">Super CSS Mario</a></article>
5151
<article class="chrome" style="background-image:url(https://css-games.com/super-css-mario-2/mario.png)"><a href="https://css-games.com/super-css-mario-2/">Super CSS Mario II</a></article>
52+
<article class="chrome" style="background-image:url(https://css-games.com/maze/maze.webp)"><a href="https://css-games.com/maze/">CSS-only Maze</a></article>
5253
</main>
5354
<footer>
5455
Created by <a href="https://twitter.com/ChallengesCss" target="_blank">Temani Afif</a> | <a href="https://support.temani-afif.com/" target="_blank">Support this project</a>

Diff for: ‎kill-internet-explorer/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
<meta name="robots" content="index, follow">
1212
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
1313
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
14-
<link rel=canonical href="https://css-games.com/kill-internet-explorer" >
14+
<link rel=canonical href="https://css-games.com/kill-internet-explorer/" >
1515

1616
<meta property="og:locale" content="en_US" />
1717
<meta property="og:title" content="CSS Games: Kill Internet Explorer">
1818
<meta property="og:type" content="website">
19-
<meta property="og:url" content="https://css-games.com/kill-internet-explorer">
19+
<meta property="og:url" content="https://css-games.com/kill-internet-explorer/">
2020
<meta property="og:description" content="The First CSS-only FPS to kill IE but keep Chrome alive.">
2121
<meta property="og:image" content="https://https://css-games.com/kill-internet-explorer/kill-IE.png">
2222
<link rel="stylesheet" href="style.css?v=0.2">

Diff for: ‎maze/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>CSS Games: Grab the Dino (a Maze game)</title>
7+
<link rel="icon" href="/fav.png" sizes="any">
8+
<meta name="monetization" content="$ilp.uphold.com/BKQpnDKX3xwQ">
9+
<meta name="description" content="A CSS-only retro maze game playable with keyboard">
10+
<meta name="author" content="Temani Afif">
11+
<meta name="robots" content="index, follow">
12+
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
13+
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
14+
<link rel=canonical href="https://css-games.com/maze/" >
15+
<meta property="og:locale" content="en_US" />
16+
<meta property="og:title" content="CSS Games: Grab the Dino (a Maze game)">
17+
<meta property="og:type" content="website">
18+
<meta property="og:url" content="https://css-games.com/super-css-mario">
19+
<meta property="og:description" content="A CSS-only retro maze game playable with keyboard">
20+
<meta property="og:image" content="maze.webp">
21+
<link rel="stylesheet" href="style.css?v=0.2">
22+
<!-- Global site tag (gtag.js) - Google Analytics -->
23+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KPVWCCS077"></script>
24+
<script>
25+
window.dataLayer = window.dataLayer || [];
26+
function gtag(){dataLayer.push(arguments);}
27+
gtag('js', new Date());
28+
29+
gtag('config', 'G-KPVWCCS077');
30+
</script>
31+
</head>
32+
<body>
33+
<g tabindex=0><b><m></m></b></g>
34+
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
35+
<div class="light" data-ea-publisher="css-challengescom" id="css-games" data-ea-type="text" data-ea-style="fixedfooter"></div>
36+
</body>
37+
</html>

Diff for: ‎maze/maze.webp

116 KB
Binary file not shown.

Diff for: ‎maze/style.css

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
@charset "UTF-8";
2+
/* control the size */
3+
/* If the movement is off you have to update the below variable
4+
go here and follow the steps: https://codepen.io/t_afif/pen/ZENaPPG/bdd15282dc854a3e77d6e40232ee5787
5+
You need to perform a scroll with one keypress
6+
to get the amount of pixel you need to move by
7+
*/
8+
/* don't touch this. The game is static not dynamic */
9+
@property --s1 {
10+
syntax: "<integer>";
11+
inherits: true;
12+
initial-value: 0;
13+
}
14+
@property --x {
15+
syntax: "<integer>";
16+
inherits: true;
17+
initial-value: 0;
18+
}
19+
@property --y {
20+
syntax: "<integer>";
21+
inherits: true;
22+
initial-value: 0;
23+
}
24+
b {
25+
display: block;
26+
width: 600px;
27+
height: 300px;
28+
position: sticky;
29+
left: 0;
30+
top: 0;
31+
--g:conic-gradient(var(--b) 0 0) no-repeat;
32+
background: conic-gradient(from 90deg at 1px 1px, #0000 25%, var(--c1) 0) -1px -1px/calc((100% + 1px)/10) calc((100% + 1px)/5), url(https://assets.codepen.io/1480814/dii.png) no-repeat calc(100% - 6px) calc(100% - 6px)/auto 48px, var(--g) 0 0/120px 60px, var(--g) 60px 180px/180px 60px, var(--g) 180px 120px/180px 60px, var(--g) 300px 60px/180px 60px, var(--g) 300px 240px/180px 60px, var(--g) 420px 180px/180px 60px, var(--g) 60px 0/60px 240px, var(--g) 300px 60px/60px 240px, var(--g) 540px 0/60px 300px, var(--g) 420px 0/60px 300px, var(--g) 420px 0/180px 60px, url(https://assets.codepen.io/1480814/w.jpg) 0 0/60px 60px;
33+
animation: x linear, y linear;
34+
animation-timeline: scroll(nearest inline), scroll(nearest block);
35+
container-name: b;
36+
}
37+
38+
@keyframes x {
39+
to {
40+
--x: 9;
41+
}
42+
}
43+
@keyframes y {
44+
to {
45+
--y: 4;
46+
}
47+
}
48+
m {
49+
content: "";
50+
position: absolute;
51+
translate: calc(var(--x)*100%) calc(var(--y)*100%);
52+
width: 60px;
53+
aspect-ratio: 1;
54+
opacity: 0;
55+
background: url(https://assets.codepen.io/1480814/ad.png) center/cover;
56+
}
57+
58+
b:after {
59+
content: "TIME - " counter(s1, decimal-leading-zero) "s";
60+
white-space: pre-wrap;
61+
color: #fefeff;
62+
font-size: 35px;
63+
visibility: hidden;
64+
font-variant-numeric: tabular-nums;
65+
counter-reset: s1 var(--s1);
66+
position: absolute;
67+
left: 0;
68+
right: 0;
69+
bottom: -60px;
70+
text-align: center;
71+
padding: 8px;
72+
z-index: 99989;
73+
animation: f 0.1s linear forwards paused, s1 60s linear forwards paused;
74+
}
75+
@container style(--x: 9) and style(--y: 4) {
76+
b:after {
77+
animation-play-state: running, paused !important;
78+
--_c: "\a Congratulations!\a \aYou did it in " counter(s1,decimal-leading-zero) "s";
79+
}
80+
}
81+
@container (style(--x: 0) and (style(--y: 1) or style(--y: 2) or style(--y: 3) or style(--y: 4)))
82+
or (style(--x: 1) and (style(--y: 4)))
83+
or (style(--x: 2) and (style(--y: 0) or style(--y: 1) or style(--y: 2) or style(--y: 4)))
84+
or (style(--x: 3) and (style(--y: 0) or style(--y: 1) or style(--y: 4)))
85+
or (style(--x: 4) and (style(--y: 0) or style(--y: 1) or style(--y: 3) or style(--y: 4)))
86+
or (style(--x: 5) and (style(--y: 0)))
87+
or (style(--x: 6) and (style(--y: 0) or style(--y: 2) or style(--y: 3)))
88+
or (style(--x: 8) and (style(--y: 1) or style(--y: 2) or style(--y: 4))) {
89+
b:after {
90+
animation-play-state: running, paused !important;
91+
}
92+
}
93+
94+
@keyframes f {
95+
1%, to {
96+
content: var(--_c, "\aGame Over\a\aRefresh the page\a and try again ");
97+
font-size: 50px;
98+
background: var(--b);
99+
inset: 0 0 -60px;
100+
}
101+
}
102+
@keyframes s1 {
103+
to {
104+
--s1:60;
105+
}
106+
}
107+
g {
108+
display: block;
109+
width: 960px;
110+
height: 520px;
111+
}
112+
113+
body {
114+
position: relative;
115+
margin: auto auto 70px;
116+
overflow: auto;
117+
scrollbar-width: none;
118+
width: 600px;
119+
height: 360px;
120+
border: 5px solid var(--c1);
121+
background: var(--c1);
122+
cursor: pointer;
123+
}
124+
125+
b:before {
126+
content: "Grab the dino without\atouching the wall\a\aUse your keyboard to move\a\a\a🖱️Click to start";
127+
font-size: 30px;
128+
white-space: pre;
129+
text-align: center;
130+
position: absolute;
131+
inset: 0 0 -60px;
132+
padding-top: 20px;
133+
pointer-events: none;
134+
z-index: 5896;
135+
color: #fefeff;
136+
background: url(https://assets.codepen.io/1480814/ad.png) bottom/90px auto no-repeat, url(https://assets.codepen.io/1480814/k.png) 50% 55%/90px auto no-repeat var(--b);
137+
}
138+
139+
body:focus-within {
140+
cursor: none;
141+
}
142+
143+
body:focus-within b:before {
144+
opacity: 0;
145+
}
146+
147+
body:focus-within m {
148+
opacity: 1;
149+
}
150+
151+
body:focus-within b:after {
152+
visibility: visible;
153+
animation-play-state: paused, running;
154+
}
155+
156+
html {
157+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
158+
font-weight: 900;
159+
min-height: 100vh;
160+
overflow: hidden;
161+
display: grid;
162+
--c1: #252521;
163+
--b: #4c6ef5;
164+
background: #ced4da;
165+
}
166+
167+
@media (width < 660px), (height < 360px) {
168+
html:after {
169+
content: "Sorry but your screen is too small for this game\a\a Buy a bigger one and try again!";
170+
white-space: pre-wrap;
171+
background: var(--b);
172+
position: absolute;
173+
inset: 0;
174+
z-index: calc(infinity);
175+
display: grid;
176+
place-content: center;
177+
text-align: center;
178+
font-size: 40px;
179+
padding: 40px;
180+
color: #fff;
181+
}
182+
}
183+
@supports not (animation-timeline: scroll()) {
184+
html:after {
185+
content: "Firefox and Safari users aren't allowed\a✋ \aThis is a chromium experimentation\a(Use Chrome or Edge)";
186+
white-space: pre-wrap;
187+
background: var(--b);
188+
position: absolute;
189+
inset: 0;
190+
z-index: calc(infinity);
191+
display: grid;
192+
place-content: center;
193+
text-align: center;
194+
font-size: 40px;
195+
padding: 40px;
196+
color: #fff;
197+
}
198+
}

0 commit comments

Comments
 (0)