Skip to content

Instantly share code, notes, and snippets.

@una
Created April 2, 2017 03:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save una/422422e7b7f6541d901949e7c9ba2e0a to your computer and use it in GitHub Desktop.
Save una/422422e7b7f6541d901949e7c9ba2e0a to your computer and use it in GitHub Desktop.
Pure CSS (Sass) Carnival Game
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<h1>CSS Only Carnival: Target Practice</h1>
<h2>This game uses no JS at all (isn't CSS awesome?). You have 8 seconds to hit as many targets as you can!</h2>
<div class="game-over">
<h1>Game Over!</h1>
<a class="play-again" target="_parent" href="http://codepen.io/una/full/NxZaNr">Play Again</a>
</div>
<ul class="game-area">
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
<li><input type="checkbox"><div class="shield"></div></li>
</ul>
<h3 class="total-count">Targets Hit: &nbsp;</h3>
<small><a href="http://twitter.com/<una</una>">Made with love by @una &hearts;</a></small>
// Look ma, NO JS! Or images... or even SVGs either :P
* {
box-sizing: border-box;
}
h1 {
font-size: 1.4em;
}
body {
counter-reset: game;
text-align: center;
background: #e9b58b;
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
color: #333;
}
input:checked {
counter-increment: game;
}
.total-count::after {
content: counter(game);
}
h2 {
font-size: 1em;
margin: -.5em auto 3em;
font-weight: 400;
}
.total-count {
font-size: 1.75em;
position: absolute;
top: 1.75em;
width: 100%;
left: 0;
text-align: center;
z-index: 300;
}
.game-area {
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: space-between;
max-width: 600px;
min-height: 550px;
max-height: 700px;
margin: 0 auto;
padding-left: 0; //list reset
}
li {
width: calc(33% - .5em);
margin-bottom: 1em;
height: 10em;
list-style: none;
position: relative;
outline: 4px solid white;
background: #64ddf3;
@for $i from 1 through 9 {
$speed: random()*5 + 's';
$color-hue: random()*360 + 'deg';
$brightness: random() + 1;
&:nth-child(#{$i}) {
input {
filter: hue-rotate(#{$color-hue}) brightness(#{$brightness});
animation-duration: #{$speed};
}
}
}
}
input[type="checkbox"] {
width: 50px;
height: 50px;
position: absolute;
cursor: crosshair;
background: radial-gradient(red 10%, white 10%, white 30%, red 30%, red 50%, white 50%, white 80%, red 80%, red 100%);
border-radius: 50%;
display: block;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
appearance: none;
border: 6px solid red;
animation: hide-target infinite alternate ease-in-out;
z-index: 1;
&:before {
content: '';
display: block;
background-color: black;
height: 50%;
width: 6px;
position: absolute;
left: 0; right: 0;
top: calc(100% + 6px);
margin: 0 auto;
z-index: -1;
}
&:focus {
outline: none;
appearance: none;
}
&:checked {
pointer-events: none;
filter: grayscale(1) opacity(.75);
animation: none;
&:after {
content: '+1!';
padding: .5em;
margin: 1em 0 0 1.5em;
font-size: 2.5em;
font-weight: 600;
}
}
}
.shield {
background: #724c20;
width: 100%;
height: 60%;
margin: 0 auto;
bottom: 0;
left: 0; right: 0;
position: absolute;
pointer-events: all;
z-index: 100;
}
@keyframes hide-target {
0% {
top: 0
}
25% {
top: 50%
}
100% {
top: 0
}
}
.game-over {
height: 100%;
width: 100%;
display: block;
background: white;
pointer-events: all;
position: absolute;
top: -100%;
left: 0;
z-index: 200;
animation: appear .25s forwards;
animation-delay: 8s;
background: repeating-linear-gradient(-45deg, #c9ff00 0, #c9ff00 5em, #20c0ff 5em, #20c0ff 10em);
h1 {
padding: 1em 0 3.5em;
background: white;
}
}
@keyframes appear {
from {
top: -100vh;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.play-again {
background: white;
color: #20c0ff;
padding: .5em 1em;
font-size: 2.5em;
font-weight: 700;
}
small a {
margin-bottom: 2em;
display: block;
color: #222;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment