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