preface
Hello, this is CSS magic – Alphardex.
The word “escape chamber” must be familiar to everyone, in the previous Flash era, this is one of the classic puzzle games. The player is often trapped in a chamber of secrets, and the goal is to try to escape from the chamber. The following is one of the earliest escape room games I played – the Crimson Room, which can also be said to be the ancestor of escape room games.
Next, I’m going to use pure CSS to achieve a similar escape room game.
Yes, you heard that right, pure CSS, which means no JS at all. One wonders: WTF? CSS, a web layout language, can write games? Unfortunately, CSS can actually write games. Join me in this incredible country.
strategy
Every time I play escape room game card, always go to search the guide, after reading the game can play through. So when we do escape rooms, the first thing to think about is the walkthrough. The following is the author of this article to escape from the game to develop a guide
1. Turn left and turn the globe 2. Turn right, find a hammer, click to pick it up and remember the numbers on the wall 3. Turn left, click on the cabinet, smash it with a hammer and get a disc 4. Click on the mural on the wall, remove the mural, see a disc print, embed the disc, get a USB 5. Turn right twice, insert THE USB into the computer, the computer is on, enter the password on the wall, get the key 6. Turn right, open the door with the key, game overCopy the code
switch
Once you’ve developed the walkthrough, start identifying the core of the game — the switch. Speaking of switches, what element of HTML do you think is best for switching on and off? The answer is a single check box.
Speaking of single check boxes, we have to mention the two CP – label and sibling selectors. The label is responsible for associating the element with its corresponding check box with for, and the sibling selector is responsible for the: Checked pseudo-class, which affects neighboring elements when an element is checked.
First, let’s take a look at a simple switch example
<input type="radio" id="globe" class="globe-trigger" />
<input type="radio" id="hammer" class="hammer-trigger" />
<label for="globe" class="globe">
<img src="https://i.loli.net/2020/10/25/YBnOQ2jVtSTmFkE.png" alt class="w-8" />
</label>
<label for="hammer" class="hammer">
<img src="https://i.loli.net/2020/10/25/KhVp4EaMoYrjlIC.png" alt class="w-6" />
</label>
Copy the code
.hammer {
display: none;
}
.globe-trigger:checked{& ~ {.globe {
pointer-events: none;
}
.hammer {
display: inline-block; }}}.hammer-trigger:checked{& ~ {.hammer {
transform: scale(0);
opacity: 0; }}}Copy the code
You can see that we have wrapped the corresponding image with the label element and associated the corresponding switch. When the user clicks on a globe, the globe-trigger switch is triggered, which is the association of labels
When the switch is triggered, the state of the corresponding element next to the switch changes: The Globe becomes unclickable; Hammer elements appear, and this is what the sibling selector does
Similarly, when a hammer is clicked, the hammer-trigger switch associated with it will be triggered, and the hammer next to it will disappear at the same time, representing the action of being “picked up” by the user
Once we understand how the switch works, we can hide the switch
input[type="checkbox"].input[type="radio"] {
display: none;
}
Copy the code
Scene: the switch
Let’s say our game map is divided into four pieces and can be switched with navigation arrows.
The map of the game is actually a long map, as shown below
<div class="camera">
<! Navigation -- - >
<input type="radio" id="nav-1" name="nav" class="nav-trigger-1" />
<input type="radio" id="nav-2" name="nav" class="nav-trigger-2" />
<input type="radio" id="nav-3" name="nav" class="nav-trigger-3" />
<input type="radio" id="nav-4" name="nav" class="nav-trigger-4" />
<! - long figure -- -- >
<form class="stage">
<! - switch -- -- >
<input type="checkbox" id="globe" class="globe-trigger" />.<! - the scene -- -- >
<div class="scene scene-1">
<label for="...">.</label>
<nav class="navs">
<label for="nav-4" class="nav-left"></label>
<label for="nav-2" class="nav-right"></label>
</nav>
</div>
</form>
</div>
Copy the code
First, have a fixed view of the game and cut out the rest
.camera {
--stage-width: 18rem;
--scene-id: 0;
position: relative;
width: var(--stage-width);
height: var(--stage-width);
overflow: hidden;
}
Copy the code
Then, set the navigation, according to the selected navigation to determine the translation distance of the long graph
@for $i from 1 through 4 {
.nav-trigger-# {$i}:checked{& ~.stage {
--scene-id: #{$i - 1}; }}}.stage {
transform: translateY(calc(var(--stage-width) * var(--scene-id) * -1));
}
.scene {
position: relative;
width: var(--stage-width);
height: var(--stage-width);
}
Copy the code
For example, in scenario 1, the user goes right, navigation 2 is triggered, and the long graph shifts up by one unit, as shown below
This completes the scene switch effect
To complete the project
At this point, we have all the knowledge necessary to complete the Escape room game. Step by step, customize all the switches, place all the objects, and ensure that the scene can switch freely, and a pure CSS escape room game is born
Escape Room Game