body {
margin: 0;
background-color: #222;
--size: 200px;
--color: #635D55;
perspective: 8000px;
font-family: sans-serif;
--skin: #E07E5E;
--skin2: #D17658;
--shirt: #333;
--shirt2: #943A44;
--jean: #2177AA;
--eyes: #4C1310;
--posX: 0;
--posY: 0;
}
* {
transform-style: preserve-3d;
}
input[type="checkbox"], input[type="radio"] {
display: none;
}
/* Input system */
input[name="eyes"][value="green"]:checked ~ div { --eyes: #cddc39; }
input[name="eyes"][value="blue"]:checked ~ div { --eyes: #00bcd4; }
input[name="eyes"][value="red"]:checked ~ div { --eyes: #F44351; }
input[name="skin"][value="violet"]:checked ~ div { --skin: #532caa; --skin2: #673ab7; }
input[name="skin"][value="green"]:checked ~ div { --skin: #4caf50; --skin2: #227926; }
input[name="skin"][value="blue"]:checked ~ div { --skin: #3f51b5; --skin2: #2a3885; }
input[name="skin"][value="red"]:checked ~ div { --skin: #e91e63; --skin2: #ad0b42; }
input[name="shirt"][value="green"]:checked ~ div { --shirt: #043919; }
input[name="shirt"][value="blue"]:checked ~ div { --shirt: #292e6e; }
input[name="shirt"][value="red"]:checked ~ div { --shirt: #831e1e; }
input[name="jean"][value="black"]:checked ~ div { --jean: #1c2023; }
input[name="jean"][value="white"]:checked ~ div { --jean: #babcbd; }
/* Label changer */
/* Player */
#eyes-violet:checked ~ div label[for="eyes-violet"] { background-color: #356b37; }
#eyes-green:checked ~ div label[for="eyes-green"] { background-color: #356b37; }
#eyes-blue:checked ~ div label[for="eyes-blue"] { background-color: #356b37; }
#eyes-red:checked ~ div label[for="eyes-red"] { background-color: #356b37; }
#skin-orange:checked ~ div label[for="skin-orange"] { background-color: #356b37; }
#skin-violet:checked ~ div label[for="skin-violet"] { background-color: #356b37; }
#skin-green:checked ~ div label[for="skin-green"] { background-color: #356b37; }
#skin-blue:checked ~ div label[for="skin-blue"] { background-color: #356b37; }
#skin-red:checked ~ div label[for="skin-red"] { background-color: #356b37; }
#shirt-black:checked ~ div label[for="shirt-black"] { background-color: #356b37; }
#shirt-blue:checked ~ div label[for="shirt-blue"] { background-color: #356b37; }
#shirt-green:checked ~ div label[for="shirt-green"] { background-color: #356b37; }
#shirt-red:checked ~ div label[for="shirt-red"] { background-color: #356b37; }
#jean-blue:checked ~ div label[for="jean-blue"] { background-color: #356b37; }
#jean-black:checked ~ div label[for="jean-black"] { background-color: #356b37; }
#jean-white:checked ~ div label[for="jean-white"] { background-color: #356b37; }
/* Movement */
#pos-x-2:checked ~ div { --posX: 200px; }
#pos-x-3:checked ~ div { --posX: 400px; }
#pos-x-4:checked ~ div { --posX: 600px; }
#pos-x-5:checked ~ div { --posX: 800px; }
#pos-x-2-right:checked ~ div { --posX: 200px; }
#pos-x-3-right:checked ~ div { --posX: 400px; }
#pos-x-4-right:checked ~ div { --posX: 600px; }
#pos-x-5-right:checked ~ div { --posX: 800px; }
#pos-y-2:checked ~ div { --posY: 200px; }
#pos-y-3:checked ~ div { --posY: 400px; }
#pos-y-4:checked ~ div { --posY: 600px; }
#pos-y-5:checked ~ div { --posY: 800px; }
#pos-y-2-down:checked ~ div { --posY: 200px; }
#pos-y-3-down:checked ~ div { --posY: 400px; }
#pos-y-4-down:checked ~ div { --posY: 600px; }
#pos-y-5-down:checked ~ div { --posY: 800px; }
#pos-x-1:checked ~ #pos-y-1:checked ~ .movement .right label[for="pos-x-2"] { display: block; }
#pos-x-1-right:checked ~ #pos-y-1:checked ~ .movement .right label[for="pos-x-2"] { display: block; }
#pos-x-1:checked ~ #pos-y-1-down:checked ~ .movement .right label[for="pos-x-2"] { display: block; }
#pos-x-1-right:checked ~ #pos-y-1-down:checked ~ .movement .right label[for="pos-x-2"] { display: block; }
#pos-x-2:checked ~ .movement .left label[for="pos-x-1-right"] { display: block; }
#pos-x-2:checked ~ #pos-y-1:checked ~ .movement .right label[for="pos-x-3"] { display: block; }
#pos-x-2:checked ~ #pos-y-1-down:checked ~ .movement .right label[for="pos-x-3"] { display: block; }
#pos-x-2-right:checked ~ .movement .left label[for="pos-x-1-right"] { display: block; }
#pos-x-2-right:checked ~ #pos-y-1:checked ~ .movement .right label[for="pos-x-3"] { display: block; }
#pos-x-2-right:checked ~ #pos-y-1-down:checked ~ .movement .right label[for="pos-x-3"] { display: block; }
#pos-x-3:checked ~ #pos-y-1:checked ~ .movement .left label[for="pos-x-2-right"] { display: block; }
#pos-x-3:checked ~ #pos-y-1-down:checked ~ .movement .left label[for="pos-x-2-right"] { display: block; }
:is(#pos-x-3, #pos-x-3-right):checked ~ :is(#pos-y-1, #pos-y-1-down, #pos-y-5):checked ~ .movement .right label[for="pos-x-4"] { display: block; }
#pos-x-3-right:checked ~ #pos-y-1:checked ~ .movement .left label[for="pos-x-2-right"] { display: block; }
#pos-x-3-right:checked ~ #pos-y-1-down:checked ~ .movement .left label[for="pos-x-2-right"] { display: block; }
#pos-x-4:checked ~ .movement .left label[for="pos-x-3-right"] { display: block; }
#pos-x-4:checked ~ #pos-y-2:not(:checked) ~ #pos-y-3:not(:checked) ~ #pos-y-4:not(:checked) ~ .movement .right label[for="pos-x-5"] { display: block; }
#pos-x-4-right:checked ~ .movement .left label[for="pos-x-3-right"] { display: block; }
#pos-x-4-right:checked ~ #pos-y-2:not(:checked) ~ #pos-y-3:not(:checked) ~ #pos-y-4:not(:checked) ~ .movement .right label[for="pos-x-5"] { display: block; }
#pos-x-5:checked ~ :is(#pos-y-1, #pos-y-1-down, #pos-y-5):checked ~ .movement .left label[for="pos-x-4-right"] { display: block; }
#pos-x-2:not(:checked) ~ #pos-x-2-right:not(:checked) ~ #pos-x-4:not(:checked) ~ #pos-x-4-right:not(:checked) ~ #pos-y-1:checked ~ .movement .down label[for="pos-y-2"] { display: block; }
#pos-x-2:not(:checked) ~ #pos-x-2-right:not(:checked) ~ #pos-x-4:not(:checked) ~ #pos-x-4-right:not(:checked) ~ #pos-y-1-down:checked ~ .movement .down label[for="pos-y-2"] { display: block; }
#pos-y-2:checked ~ .movement .up label[for="pos-y-1-down"] { display: block; }
#pos-x-3:not(:checked) ~ #pos-x-3-right:not(:checked) ~ #pos-y-2:checked ~ .movement .down label[for="pos-y-3"] { display: block; }
#npc:checked ~ :is(#pos-x-3, #pos-x-3-right):checked ~ #pos-y-2:checked ~ .movement .down label[for="pos-y-3"] { display: block; }
#pos-y-2-down:checked ~ .movement .up label[for="pos-y-1-down"] { display: block; }
#npc:checked ~ #pos-y-2-down:checked ~ .movement .down label[for="pos-y-3"] { display: block; }
#pos-y-3:checked ~ .movement .up label[for="pos-y-2-down"] { display: block; }
#pos-x-5:not(:checked) ~ #pos-y-3:checked ~ .movement .down label[for="pos-y-4"] { display: block; }
#pos-y-3-down:checked ~ .movement .up label[for="pos-y-2-down"] { display: block; }
#pos-x-5:not(:checked) ~ #pos-y-3-down:checked ~ .movement .down label[for="pos-y-4"] { display: block; }
#pos-y-4:checked ~ .movement .up label[for="pos-y-3-down"] { display: block; }
#pos-y-4:checked ~ .movement .down label[for="pos-y-5"] { display: block; }
#pos-y-4-down:checked ~ .movement .up label[for="pos-y-3-down"] { display: block; }
#pos-y-4-down:checked ~ .movement .down label[for="pos-y-5"] { display: block; }
#pos-x-4:not(:checked) ~ #pos-x-5:not(:checked) ~ #pos-y-5:checked ~ .movement .up label[for="pos-y-4-down"] { display: block; }
/* Player rotation */
:is(#pos-x-2, #pos-x-3, #pos-x-4,#pos-x-5):checked ~ div .player .shape { transform: rotateY(90deg); }
:is(#pos-x-1-right, #pos-x-2-right, #pos-x-3-right,#pos-x-4-right):checked ~ div .player .shape { transform: rotateY(-90deg); }
:is(#pos-y-2, #pos-y-3, #pos-y-4, #pos-y-5):checked ~ div .player .shape { transform: rotateY(0); }
:is(#pos-y-1-down, #pos-y-2-down, #pos-y-3-down, #pos-y-4-down):checked ~ div .player .shape { transform: rotateY(180deg); }
:is(#pos-x-4, #pos-x-5):checked ~ #pos-y-5:checked ~ div .player .shape { transform: rotateY(90deg); }
:is(#pos-x-3-right, #pos-x-4-right):checked ~ #pos-y-5:checked ~ div .player .shape { transform: rotateY(-90deg); }
:is(#pos-x-2, #pos-x-4):checked ~ #pos-y-1-down:checked ~ div .player .shape { transform: rotateY(90deg); }
:is(#pos-x-2-right, #pos-x-3-right, #pos-x-4-right):checked ~ #pos-y-1-down:checked ~ div .player .shape { transform: rotateY(-90deg); }
/* Player animation */
:is(#pos-x-1, #pos-x-3, #pos-x-5, #pos-x-1-right, #pos-x-3-right):checked ~ .#pos-y-1:checked ~
.player :is(.arm, .legs > div) { animation: arm 0.5s 1 linear; }
:is(#pos-x-2, #pos-x-2-right, #pos-x-4, #pos-x-4-right):checked ~ .view .player :is(.arm, .legs > div) { animation: arm2 0.5s 1 linear !important; }
:is(#pos-x-2, #pos-x-2-right, #pos-x-3, #pos-x-3-right):not(:checked) ~ :is(#pos-y-1, #pos-y-1-down, #pos-y-3, #pos-y-3-down, #pos-y-5):checked ~ .view .player :is(.arm, .legs > div) { animation: arm 0.5s 1 linear; }
:is(#pos-y-2, #pos-y-2-down, #pos-y-4, #pos-y-4-down):checked ~ .view .player :is(.arm, .legs > div) { animation: arm3 0.5s 1 linear; }
.view .player :is(.legs .leg-left, .arm.arm-right) { animation-direction: reverse !important; }
:is(#pos-x-2, #pos-x-2-right, #pos-x-4, #pos-x-4-right):checked ~ .view .player :is(.legs .leg-left, .arm.arm-right) { animation-direction: reverse !important; }
/* Key */
#key:not(:checked) ~ :is(#pos-x-1, #pos-x-1-right):checked ~ #pos-y-5:checked ~ .movement :is(.pick, .pick i[class*="fa-hand-paper"], label[for="key"]) { display: flex; visibility: visible; }
#apple:not(:checked) ~ #pos-x-5:checked ~ #pos-y-3:checked ~ .movement :is(.pick, .pick i[class*="fa-hand-paper"], label[for="apple"]) { display: flex; visibility: visible; }
#npc:not(:checked) ~ :is(#pos-x-3, #pos-x-3-right):checked ~ #pos-y-2:checked ~ .movement :is(.pick, .pick i[class*="fa-comment"], label[for="dialog"]) { display: flex; visibility: visible; }
#key:checked ~ #door:not(:checked) ~ :is(#pos-x-5):checked ~ #pos-y-5:checked ~ .movement :is(.pick, .pick i[class*="fa-key"], label[for="door"]) { display: flex; visibility: visible; }
#door:checked ~ #go:not(:checked) ~ :is(#pos-x-5):checked ~ #pos-y-5:checked ~ .movement :is(.pick, .pick i[class*="fa-door-open"], label[for="go"]) { display: flex; visibility: visible; }
#key:checked ~ div .key { display: none; }
.selector {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.selector .player {
transform: translateZ(100px) translateY(-40px) rotateY(-45deg);
}
.selector .player .arm {
-webkit-animation: arm 3s infinite linear;
}
.selector .player .legs > div {
-webkit-animation: arm 3s infinite linear;
}
.selector .player .legs .leg-left {
animation-direction: reverse;
}
#isPlaying:checked ~ .selector {
display: none;
}
.player-display {
height: 400px;
width: 250px;
background-color: #333;
border: 1px solid #4caf50;
margin-bottom: 20px;
}
.controls {
display: flex;
flex-wrap: wrap;
margin: 15px;
}
.controls p {
color: #fff;
text-align: center;
}
.controls > div {
margin: 0 10px;
}
.control-panel {
border-radius: 3px;
overflow: hidden;
border: 1px solid #4caf50;
display: flex;
}
.control-panel label {
background-color: #4caf50;
color: #fff;
display: block;
padding: 5px 10px;
cursor: pointer;
}
.control-panel label:not(:last-child) {
border-right: 1px solid #4caf50;
}
label[for="isPlaying"] {
background-color: #4caf50;
color: #fff;
padding: 10px 25px;
display: block;
cursor: pointer;
}
.view {
padding: 50px;
margin-bottom: 200px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
box-sizing: border-box;
z-index: -1;
transform: scale(0.4) rotateX(50deg) translateY(500px) translateZ(460px);
}
#isPlaying:not(:checked) ~ :is(.view,.btn, .movement, .dialog) {
display: none;
}
/* Player */
.chara .shape {
-webkit-transform-style: preserve-3d;
position: relative;
width: 160px;
font-size: 0;
margin: auto;
margin-top: 100px;
transform: none;
transition-duration: 0.2s;
}
.chara .square {
display: inline-block;
width: 10px;
height: 10px;
}
.chara .head {
width: 80px;
height: 160px;
margin: auto;
-webkit-transform-style: preserve-3d;
}
.chara .head .face {
height: 80px;
width: 80px;
position: absolute;
}
.chara .head .face.front {
-webkit-transform: translateZ(40px);
}
.chara .head .face.left {
-webkit-transform: rotateY(-90deg) translateZ(40px);
}
.chara .head .face.right {
-webkit-transform: rotateY(90deg) translateZ(40px);
}
.chara .head .face.top {
-webkit-transform: rotateX(-90deg) translateZ(40px);
}
.chara .head .face.bottom {
-webkit-transform: rotateX(-90deg) translateZ(-40px);
}
.chara .head .face.back {
-webkit-transform: translateZ(-40px);
}
.chara .middle {
position: absolute;
top: 80px;
-webkit-transform-style: preserve-3d;
}
.chara .middle .arm {
position: absolute;
width: 40px;
height: 240px;
top: -120px;
-webkit-transform-style: preserve-3d;
}
.chara .middle .arm.arm-right {
left: 120px;
animation-direction: reverse;
}
.chara .middle .arm>div {
position: absolute;
top: 120px;
}
.chara .middle .arm :is(.front, .left, .right, .back) {
height: 50%;
width: 100%;
background-color: var(--skin);
box-shadow: inset 0px 40px var(--shirt);
}
.chara .middle .arm .front {
-webkit-transform: translateZ(20px);
}
.chara .middle .arm .left {
-webkit-transform: rotateY(-90deg) translateZ(20px);
}
.chara .middle .arm .right {
-webkit-transform: rotateY(90deg) translateZ(20px);
}
.chara .middle .arm .back {
-webkit-transform: translateZ(-20px);
}
.chara .middle .arm .top {
-webkit-transform: rotateX(90deg) translateZ(20px);
width: 100%;
background-color: var(--shirt);
height: 40px;
}
.chara .middle .arm .bottom {
-webkit-transform: rotateX(90deg) translateZ(-100px);
width: 100%;
background-color: var(--skin);
height: 40px;
}
.chara .middle .body {
-webkit-transform-style: preserve-3d;
width: 80px;
left: 40px;
position: absolute;
}
.chara .middle .body>div {
position: absolute;
}
.chara .middle .body .front {
-webkit-transform: translateZ(-20px);
}
.chara .middle .body .left {
width: 40px;
-webkit-transform: rotateY(-90deg) translateZ(20px);
}
.chara .middle .body .right {
width: 40px;
-webkit-transform: rotateY(90deg) translateZ(60px);
}
.chara .middle .body .back {
-webkit-transform: translateZ(20px);
}
.chara .middle .body .top {
-webkit-transform: rotateX(90deg) translateZ(20px);
}
.chara .middle .body .bottom {
-webkit-transform: rotateX(90deg) translateZ(-100px);
}
.chara .legs {
position: absolute;
top: 190px;
left: 40px;
-webkit-transform-style: preserve-3d;
}
.chara .legs>div {
position: absolute;
-webkit-transform-style: preserve-3d;
}
.chara .legs .leg-right {
left: 40px;
}
.chara .legs>div>div {
width: 40px;
position: absolute;
}
.chara .legs :is(.front, .back, .left, .right) {
background-color: var(--jean);
height: 120px;
width: 40px;
box-shadow: inset 0 -20px var(--skin);
}
.chara .legs .front {
-webkit-transform: translateZ(20px);
}
.chara .legs .back {
-webkit-transform: translateZ(-20px);
}
.chara .legs .left {
-webkit-transform: rotateY(-90deg) translateZ(20px);
}
.chara .legs .right {
-webkit-transform: rotateY(90deg) translateZ(20px);
}
.chara .legs .bottom {
-webkit-transform: rotateX(90deg) translateZ(-100px);
background-color: var(--skin2);
width: 40px;
height: 40px;
}
.chara .skin {
background-color: var(--skin);
}
.chara .skin2 {
background-color: var(--skin2);
}
.chara .gray {
background-color: var(--shirt);
}
.chara .violet {
background-color: var(--shirt2);
}
.chara .jean {
background-color: var(--jean);
}
.chara .black {
background-color: var(--eyes);
}
@-webkit-keyframes arm {
0% { -webkit-transform: rotateX(0); }
25% { -webkit-transform: rotateX(-45deg); }
50% { -webkit-transform: rotateX(0deg); }
75% { -webkit-transform: rotateX(45deg); }
100% { -webkit-transform: rotateX(0); }
}
@-webkit-keyframes arm2 {
0% { -webkit-transform: rotateX(0); }
25% { -webkit-transform: rotateX(-45deg); }
50% { -webkit-transform: rotateX(0deg); }
75% { -webkit-transform: rotateX(45deg); }
100% { -webkit-transform: rotateX(0); }
}
@-webkit-keyframes arm3 {
0% { -webkit-transform: rotateX(0); }
25% { -webkit-transform: rotateX(-45deg); }
50% { -webkit-transform: rotateX(0deg); }
75% { -webkit-transform: rotateX(45deg); }
100% { -webkit-transform: rotateX(0); }
}
/* Controls */
.btn {
height: 30px;
width: 30px;
background-color: #eee;
border-radius: 2px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 17px;
cursor: pointer;
}
.rotate-btn {
bottom: 30px;
left: calc(50% - 20px - 80px);
}
.rotate-btn:active {
opacity: 0.8;
}
/* Position the game field */
.game {
position: absolute;
width: calc(var(--size) * 5);
height: calc(var(--size) * 5);
background-color: #3D3D3B;
margin: auto;
transform-origin: center;
--rotate: rotateX(60deg);
animation: rotate 5s linear infinite;
animation-play-state: paused;
background-image:
linear-gradient(335deg, #9B9B99 46px, transparent 46px),
linear-gradient(155deg, #888887 46px, transparent 46px),
linear-gradient(335deg, #9B9B99 46px, transparent 46px),
linear-gradient(155deg, #888887 46px, transparent 46px);
background-size: 116px 116px;
background-position: 10px 6px, 18px 71px, 69px 63px, 76px 12px;
}
.game .chara {
transform: rotateX(-90deg) translateY(-140px) scale3d(0.5, 0.5, 0.5);
position: absolute;
transition: 0.5s;
}
.game .npc {
left: 400px;
top: 400px;
transform: rotateX(-90deg) translateY(-140px) scale3d(0.5, 0.5, 0.5) rotateY(-180deg);
--skin: #E07E5E;
--skin2: #D17658;
--shirt: #333;
--shirt2: #943A44;
--jean: #2177AA;
--eyes: #4C1310;
}
#npc:checked ~ div .npc {
display: none;
}
.game .player {
left: var(--posX);
top: var(--posY);
}
.wall {
width: calc(var(--size) * 5);
height: var(--size);
position: absolute;
backface-visibility: hidden;
}
.wall.front {
transform: translateZ(calc(var(--size) / 2)) rotateX(-90deg);
top: calc(var(--size) / -2);
}
.wall.left {
transform: translateZ(calc(var(--size) / 2)) rotateY(-90deg) rotateZ(-90deg);
top: calc((var(--size) * 4) / 2);
left: calc((var(--size) * 2.5));
}
.wall.right {
transform: translateZ(calc(var(--size) / 2)) rotateY(90deg) rotateZ(-90deg);
top: calc((var(--size) * 4) / 2);
left: calc((var(--size) * -2.5));
}
.wall.back {
transform: translateZ(calc(var(--size) / 2)) rotateX(90deg);
top: calc((var(--size) * 4.5));
}
.wall-texture:not(.cube), .wall-texture > div, .wall-texture > div:before, .wall-texture > div:after {
background-color: #635D55;
background-image:
linear-gradient(335deg, #202120 23px, transparent 23px),
linear-gradient(155deg, #323538 23px, transparent 23px),
linear-gradient(335deg, #202120 23px, transparent 23px),
linear-gradient(155deg, #323538 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0 2px, 4px 35px, 29px 31px, 34px 6px;
}
/* Add obstacles */
.cube {
width: var(--size);
height: var(--size);
transform: translateZ(calc(var(--size) / 2));
position: absolute;
}
.cube > div, .cube > div:before, .cube > div:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: var(--color);
}
.cube .front {
transform: translateZ(calc(var(--size) / 2));
}
.cube .front:before {
transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)) translateX(calc(var(--size) / -2)) rotate(90deg);
}
.cube .front:after {
transform: rotateY(90deg) translateZ(calc(var(--size) / 2)) translateX(calc(var(--size) / 2)) rotate(90deg);
}
.cube .top {
transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));
}
.cube .top:before {
transform: translateZ(calc(var(--size) / -1));
}
.cube:nth-child(1) {
top: calc(var(--size) * 1);
left: calc(var(--size) * 1);
}
.cube:nth-child(2) {
top: calc(var(--size) * 2);
left: calc(var(--size) * 1);
}
.cube:nth-child(3) {
top: calc(var(--size) * 3);
left: calc(var(--size) * 1);
}
.cube:nth-child(4) {
top: calc(var(--size) * 4);
left: calc(var(--size) * 1);
}
.cube:nth-child(5) {
top: calc(var(--size) * 1);
left: calc(var(--size) * 3);
}
.cube:nth-child(6) {
top: calc(var(--size) * 2);
left: calc(var(--size) * 3);
}
.cube:nth-child(7) {
top: calc(var(--size) * 3);
left: calc(var(--size) * 3);
}
.cube:nth-child(8) {
top: calc(var(--size) * 3);
left: calc(var(--size) * 4);
}
.movement {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
position: absolute;
width: 110px;
height: 110px;
bottom: 30px;
left: calc(50% - 50px);
animation: rotate 5s linear infinite;
animation-play-state: paused;
}
.movement .btn {
position: relative;
cursor: not-allowed;
}
.movement .btn:active {
opacity: 0.8;
}
.movement .up { grid-area: 1 / 2 / 2 / 3; }
.movement .left { grid-area: 2 / 1 / 3 / 2; }
.movement .pick { grid-area: 2 / 2 / 3 / 3; visibility: hidden; }
.movement .right { grid-area: 2 / 3 / 3 / 4; }
.movement .down { grid-area: 3 / 2 / 4 / 3; }
.movement label {
position: absolute;
cursor: pointer;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 2;
display: none;
}
.movement .pick {
animation: rotate 5s linear infinite reverse;
animation-play-state: paused;
}
.movement .pick i {
display: none;
}
/* Dialog */
.dialog {
display: none;
position: absolute;
width: 500px;
height: 100px;
background-color: #000;
bottom: 100px;
left: calc(50% - 250px);
z-index: 9999;
transform: translateZ(999px);
border: 2px solid #4caf50;
padding: 20px;
box-sizing: border-box;
}
#dialog:checked ~ .dialog {
display: flex;
}
#npc:checked ~ .dialog {
display: none;
}
.dialog:before {
content: '';
height: 4px;
width: 4px;
background-color: #E07E5E;
box-shadow:
-15px -7px 0 4px #4c1310,
15px -7px 0 4px #4c1310,
0 0 0 30px #e07e5e;
margin: 25px 50px 25px 25px;
}
.dialog:after {
content: 'I\'m so hungry right now...';
color: #fff;
flex: 1;
}
#apple:checked ~ .dialog:after {
content: 'Oh thanks ! Yum yum 😋';
}
.dialog label {
display: none;
order: 1;
color: #fff;
align-self: flex-end;
cursor: pointer;
}
#apple:not(:checked) ~ .dialog label[for="dialog"] {
display: block;
}
#apple:checked ~ .dialog label[for="npc"] {
display: block;
}
/* Move the game view */
.rotate-btn:active ~ .view .game,
.rotate-btn:active ~ .movement,
.rotate-btn:active ~ .movement .pick {
animation-play-state: running;
}
/* Add item */
.key {
--color: #c5b418;
--size: 10px;
position: absolute;
height: 10px;
width: 10px;
top: 880px;
left: 80px;
animation: key 5s infinite linear;
}
.key .cube:nth-child(1) {
--size: 20px;
transform: translate3d(-25px, -25px, 47px);
}
.key .cube:nth-child(2) {
transform: translate3d(-10px, -20px, 20px) scaleZ(4);
}
.key .cube:nth-child(3) {
transform: translate3d(-10px, -20px, 5px);
}
.key .cube:nth-child(4) {
transform: translate3d(-10px, -33px, 16px) scale3d(1, 0.5, 0.5);
}
@keyframes key {
0% {
transform: rotateZ(0) translateZ(15px);
}
25% {
transform: rotateZ(90deg) translateZ(30px);
}
50% {
transform: rotateZ(180deg) translateZ(15px);
}
75% {
transform: rotateZ(270deg) translateZ(5px);
}
100% {
transform: rotateZ(360deg) translateZ(15px);
}
}
#apple:checked ~ .view .apple {
display: none;
}
.apple {
position: relative;
left: 800px;
top: 450px;
}
.apple .cube:first-child {
--color: #a81c12;
--size: 50px;
}
.apple .cube:last-child {
--color: green;
--size: 10px;
transform: translate3d(60px, 50px, 60px) rotateY(90deg) scaleX(1.5)
}
.door {
position: relative;
left: 990px;
top: 850px;
height: 0;
width: 0;
transition-duration: 0.3s;
transform-origin: bottom right;
}
.door .cube:first-child {
--color: #442e27;
--size: 150px;
transform: scale3d(0.1, 0.8, 1.2) translate3d(-2220px, -210px, 70px);
}
.door .cube:last-child {
--color: #999;
--size: 20px;
transform: translate3d(-35px, 55px, 80px);
}
#door:checked ~ .view .door {
transform: rotateZ(90deg);
}
.gameover {
display: none;
position: fixed;
height: 100vh;
width: 100vw;
background-color: #333;
color: #fff;
justify-content: center;
align-items: center;
top: 0;
left: 0;
z-index: 999;
transform: translateZ(500px);
}
#go:checked ~ .gameover {
display: flex;
transform: translateZ(1150px);
}
@keyframes rotate {
to {transform: rotateZ(360deg)}
}
!
