Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📃: Checkbox Carnival game #2209 #2210

Merged
merged 3 commits into from
Nov 7, 2024
Merged

📃: Checkbox Carnival game #2209 #2210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9df8bcb
Create index.html
AE-Hertz Nov 7, 2024
80f3785
Create style.css
AE-Hertz Nov 7, 2024
8670454
Update index.html
AE-Hertz Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions Checkbox Carnival game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>

<body>
<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="https://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>

</body>

</html>
194 changes: 194 additions & 0 deletions Checkbox Carnival game/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
* {
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;
}
Loading