CSS Slider Puzzle Game
How do I make an css slider puzzle game?
Classic slider puzzle game, built with 51 radio buttons and no JS :). What is a css slider puzzle game? How do you make a css slider puzzle game? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.
CSS Slider Puzzle Game Previews
CSS Slider Puzzle Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Slider Puzzle Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="radio" id="cage" name="image" checked>
<input type="radio" id="cageAnim" name="image">
<input type="radio" id="cageKitten" name="image">
<label class="selectBG" for="cage">Cage</label>
<label class="selectBG" for="cageAnim">Cage Dance</label>
<label class="selectBG" for="cageKitten">Cage Kitten</label>
<input type="radio" id="a-up" name="a-vertical">
<input type="radio" id="a-middle" name="a-vertical" checked>
<input type="radio" id="a-down" name="a-vertical">
<input type="radio" id="a-left" name="a-horazontal" checked>
<input type="radio" id="a-center" name="a-horazontal">
<input type="radio" id="a-right" name="a-horazontal">
<input type="radio" id="b-up" name="b-vertical" checked>
<input type="radio" id="b-middle" name="b-vertical">
<input type="radio" id="b-down" name="b-vertical">
<input type="radio" id="b-left" name="b-horazontal" checked>
<input type="radio" id="b-center" name="b-horazontal">
<input type="radio" id="b-right" name="b-horazontal">
<input type="radio" id="c-up" name="c-vertical">
<input type="radio" id="c-middle" name="c-vertical" checked>
<input type="radio" id="c-down" name="c-vertical">
<input type="radio" id="c-left" name="c-horazontal">
<input type="radio" id="c-center" name="c-horazontal">
<input type="radio" id="c-right" name="c-horazontal" checked>
<input type="radio" id="d-up" name="d-vertical" checked>
<input type="radio" id="d-middle" name="d-vertical">
<input type="radio" id="d-down" name="d-vertical">
<input type="radio" id="d-left" name="d-horazontal">
<input type="radio" id="d-center" name="d-horazontal" checked>
<input type="radio" id="d-right" name="d-horazontal">
<input type="radio" id="e-up" name="e-vertical">
<input type="radio" id="e-middle" name="e-vertical">
<input type="radio" id="e-down" name="e-vertical" checked>
<input type="radio" id="e-left" name="e-horazontal">
<input type="radio" id="e-center" name="e-horazontal" checked>
<input type="radio" id="e-right" name="e-horazontal">
<input type="radio" id="f-up" name="f-vertical">
<input type="radio" id="f-middle" name="f-vertical" checked>
<input type="radio" id="f-down" name="f-vertical">
<input type="radio" id="f-left" name="f-horazontal">
<input type="radio" id="f-center" name="f-horazontal" checked>
<input type="radio" id="f-right" name="f-horazontal">
<input type="radio" id="g-up" name="g-vertical" checked>
<input type="radio" id="g-middle" name="g-vertical">
<input type="radio" id="g-down" name="g-vertical">
<input type="radio" id="g-left" name="g-horazontal">
<input type="radio" id="g-center" name="g-horazontal">
<input type="radio" id="g-right" name="g-horazontal" checked>
<input type="radio" id="h-up" name="h-vertical">
<input type="radio" id="h-middle" name="h-vertical">
<input type="radio" id="h-down" name="h-vertical" checked>
<input type="radio" id="h-left" name="h-horazontal" checked>
<input type="radio" id="h-center" name="h-horazontal">
<input type="radio" id="h-right" name="h-horazontal">
<div class="board"> <div class="peice-a"> <label for="a-up"></label> <label for="a-middle"></label> <label for="a-down"></label> <label for="a-left"></label> <label for="a-center"></label> <label for="a-right"></label> </div> <div class="peice-b"> <label for="b-up"></label> <label for="b-middle"></label> <label for="b-down"></label> <label for="b-left"></label> <label for="b-center"></label> <label for="b-right"></label> </div> <div class="peice-c"> <label for="c-up"></label> <label for="c-middle"></label> <label for="c-down"></label> <label for="c-left"></label> <label for="c-center"></label> <label for="c-right"></label> </div> <div class="peice-d"> <label for="d-up"></label> <label for="d-middle"></label> <label for="d-down"></label> <label for="d-left"></label> <label for="d-center"></label> <label for="d-right"></label> </div> <div class="peice-e"> <label for="e-up"></label> <label for="e-middle"></label> <label for="e-down"></label> <label for="e-left"></label> <label for="e-center"></label> <label for="e-right"></label> </div> <div class="peice-f"> <label for="f-up"></label> <label for="f-middle"></label> <label for="f-down"></label> <label for="f-left"></label> <label for="f-center"></label> <label for="f-right"></label> </div> <div class="peice-g"> <label for="g-up"></label> <label for="g-middle"></label> <label for="g-down"></label> <label for="g-left"></label> <label for="g-center"></label> <label for="g-right"></label> </div> <div class="peice-h"> <label for="h-up"></label> <label for="h-middle"></label> <label for="h-down"></label> <label for="h-left"></label> <label for="h-center"></label> <label for="h-right"></label> </div>
</div>
<div class="winner">WINNER!</div> <script src="js/index.js"></script>
</body>
</html>
CSS Slider Puzzle Game - Script Codes CSS Codes
input[type="radio"]{ display:none;
}
body{ margin:0; background:#222; text-align:center;
}
.board{ font-size:1vmin; outline:2em solid #333; width:60em; height:60em; position:absolute; left:calc(50% - 30em); top:calc(50% - 30em); overflow:hidden;
}
[class^=peice]{ position:absolute; width:20em; height:20em; -webkit-transition:top .5s, left .5s; transition:top .5s, left .5s;
}
[class^=peice]::after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; z-index:10; background-size:60em 60em; border-radius:2em; border:.5em groove #999; box-sizing:box-border;
}
.peice-a::after{ background-position:top left;
}
.peice-b::after{ background-position:top center;
}
.peice-c::after{ background-position:top right;
}
.peice-d::after{ background-position:center left;
}
.peice-e::after{ background-position:center center;
}
.peice-f::after{ background-position:center right;
}
.peice-g::after{ background-position:bottom left;
}
.peice-h::after{ background-position:bottom center;
}
[class^=peice] label{ display:block; width: 13em; height: 13em; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); background:#444;
}
[class^=peice] label:hover{ background:#666; outline:.5em solid #111;
}
[class^=peice] label[for$="up"]{ top: -6em; left:3.5em;
}
[class^=peice] label[for$="middle"]{ display:none; z-index:5; left:3.5em;
}
[class^=peice] label[for$="down"]{ bottom: -6em; left:3.5em;
}
[class^=peice] label[for$="left"]{ left: -6em; top:3.5em;
}
[class^=peice] label[for$="center"]{ display:none; z-index:5; top:3.5em;
}
[class^=peice] label[for$="right"]{ right: -6em; top:3.5em;
}
#a-up:checked ~* [for="a-middle"],
#b-up:checked ~* [for="b-middle"],
#c-up:checked ~* [for="c-middle"],
#d-up:checked ~* [for="d-middle"],
#e-up:checked ~* [for="e-middle"],
#f-up:checked ~* [for="f-middle"],
#g-up:checked ~* [for="g-middle"],
#h-up:checked ~* [for="h-middle"]{ display:block; -webkit-transform:translate(0,13em) rotate(45deg); transform:translate(0,13em) rotate(45deg);
}
#a-down:checked ~* [for="a-middle"],
#b-down:checked ~* [for="b-middle"],
#c-down:checked ~* [for="c-middle"],
#d-down:checked ~* [for="d-middle"],
#e-down:checked ~* [for="e-middle"],
#f-down:checked ~* [for="f-middle"],
#g-down:checked ~* [for="g-middle"],
#h-down:checked ~* [for="h-middle"]{ display:block; -webkit-transform:translate(0,-6em) rotate(45deg); transform:translate(0,-6em) rotate(45deg);
}
#a-left:checked ~* [for="a-center"],
#b-left:checked ~* [for="b-center"],
#c-left:checked ~* [for="c-center"],
#d-left:checked ~* [for="d-center"],
#e-left:checked ~* [for="e-center"],
#f-left:checked ~* [for="f-center"],
#g-left:checked ~* [for="g-center"],
#h-left:checked ~* [for="h-center"]{ display:block; -webkit-transform:translate(13em,0) rotate(45deg); transform:translate(13em,0) rotate(45deg);
}
#a-right:checked ~* [for="a-center"],
#b-right:checked ~* [for="b-center"],
#c-right:checked ~* [for="c-center"],
#d-right:checked ~* [for="d-center"],
#e-right:checked ~* [for="e-center"],
#f-right:checked ~* [for="f-center"],
#g-right:checked ~* [for="g-center"],
#h-right:checked ~* [for="h-center"]{ display:block; -webkit-transform:translate(-6em,0) rotate(45deg); transform:translate(-6em,0) rotate(45deg);
}
#a-up:checked ~ * .peice-a,
#b-up:checked ~ * .peice-b,
#c-up:checked ~ * .peice-c,
#d-up:checked ~ * .peice-d,
#e-up:checked ~ * .peice-e,
#f-up:checked ~ * .peice-f,
#g-up:checked ~ * .peice-g,
#h-up:checked ~ * .peice-h{ top:0;
}
#a-middle:checked ~ * .peice-a,
#b-middle:checked ~ * .peice-b,
#c-middle:checked ~ * .peice-c,
#d-middle:checked ~ * .peice-d,
#e-middle:checked ~ * .peice-e,
#f-middle:checked ~ * .peice-f,
#g-middle:checked ~ * .peice-g,
#h-middle:checked ~ * .peice-h{ top:20em;
}
#a-down:checked ~ * .peice-a,
#b-down:checked ~ * .peice-b,
#c-down:checked ~ * .peice-c,
#d-down:checked ~ * .peice-d,
#e-down:checked ~ * .peice-e,
#f-down:checked ~ * .peice-f,
#g-down:checked ~ * .peice-g,
#h-down:checked ~ * .peice-h{ top:40em;
}
#a-left:checked ~ * .peice-a,
#b-left:checked ~ * .peice-b,
#c-left:checked ~ * .peice-c,
#d-left:checked ~ * .peice-d,
#e-left:checked ~ * .peice-e,
#f-left:checked ~ * .peice-f,
#g-left:checked ~ * .peice-g,
#h-left:checked ~ * .peice-h{ left:0;
}
#a-center:checked ~ * .peice-a,
#b-center:checked ~ * .peice-b,
#c-center:checked ~ * .peice-c,
#d-center:checked ~ * .peice-d,
#e-center:checked ~ * .peice-e,
#f-center:checked ~ * .peice-f,
#g-center:checked ~ * .peice-g,
#h-center:checked ~ * .peice-h{ left:20em;
}
#a-right:checked ~ * .peice-a,
#b-right:checked ~ * .peice-b,
#c-right:checked ~ * .peice-c,
#d-right:checked ~ * .peice-d,
#e-right:checked ~ * .peice-e,
#f-right:checked ~ * .peice-f,
#g-right:checked ~ * .peice-g,
#h-right:checked ~ * .peice-h{ left:40em;
}
.winner{ font-family:arial; color: #fff; text-align: center; font-size: 4vw; z-index: 100; width:100%; height:2em; position:absolute; top:calc(50% - 1em); line-height: 2em; background: red; -webkit-transform:scale(0); transform:scale(0);
}
#a-up:checked ~ #a-left:checked ~ #b-up:checked ~ #b-center:checked ~ #c-up:checked ~ #c-right:checked ~ #d-middle:checked ~ #d-left:checked ~ #e-middle:checked ~ #e-center:checked ~ #f-middle:checked ~ #f-right:checked ~ #g-down:checked ~ #g-left:checked ~ #h-down:checked ~ #h-center:checked ~ .winner{ -webkit-animation:winner 3s 1 1s; animation:winner 3s 1 1s;
}
@-webkit-keyframes winner{ 0%,100%{-webkit-transform:scale(0);transform:scale(0);} 10%,90%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes winner{ 0%,100%{-webkit-transform:scale(0);transform:scale(0);} 10%,90%{-webkit-transform:scale(1);transform:scale(1);}
}
.selectBG{ display:inline-block; font-family:arial; font-size:2vmin; width:8em; text-align:center; padding:1em 0; background:#000; color:#fff; border:.25em solid #333; margin:2em .25em;
}
#cage:checked ~ *[for="cage"],
#cageAnim:checked ~ *[for="cageAnim"],
#cageKitten:checked ~ *[for="cageKitten"]{ border-bottom-color:teal;
}
#cage:checked ~ * [class^=peice]::after{ background-image:url(https://www.placecage.com/2000/2000);
}
#cageAnim:checked ~ * [class^=peice]::after{ background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/cagedance.gif);
}
#cageKitten:checked ~ * [class^=peice]::after{ background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/kittencage.jpg);
}CSS Slider Puzzle Game - Script Codes JS Codes
// JS is for web, I build email.
// Follow on twitter for more CSS and email hacks @M_J_Robbins
// font-size:1vmin; messes with applemail's poor little brain and slows everything down so put a fixed size in here for email - 8px works well.
| Developer | Mark Robbins |
| Username | M_J_Robbins |
| Uploaded | September 06, 2022 |
| Rating | 4.5 |
| Size | 3,641 Kb |
| Views | 30,360 |
Do you need developer help for CSS Slider Puzzle Game?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mark Robbins (M_J_Robbins) Script Codes
| Name | Size |
| CSS fly test | 2,539 Kb |
| A Pen by Mark Robbins | 2,505 Kb |
| 3D iPhone CSS controls no JS | 4,125 Kb |
| CSS sliders | 2,992 Kb |
| TEDC15 building interactive email | 7,094 Kb |
| Xmas email test | 5,920 Kb |
| X-wing | 10,065 Kb |
| CSS Day slides - Mark Robbins | 7,787 Kb |
| CSS triangles for email | 1,954 Kb |
| Smashingconf SF 2017 slides | 8,477 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Review test | Otro_user_gil | 4,054 Kb |
| Base-Style | Daniel_gooss | 2,614 Kb |
| Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
| Flexbox slider | Rendro | 3,459 Kb |
| Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
| Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Exploding Text | Jjmartucci | 4,749 Kb |
| Ball bouncing loading animation | Adam2326 | 3,144 Kb |
| A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!