编程知识 cdmana.com

Using pure CSS to realize the secret room escape game

   Preface

   Hello everyone , Here is CSS Magic ——alphardex.

  “ room escape ” This word must be familiar to all , In the past flash Time , This is one of the classic puzzle games . Players are often trapped in a secret room , The purpose of passing the customs is to try to escape from this chamber . The following is the author's first room escape game —— Dark red room , It can also be said that it is the ancestor of the secret room escape game .

  

   Next , I want to use pure CSS To achieve a similar secret room escape game .

   Yes , You heard me , pure CSS, Which means there is no JS Participation . Some people wonder :WTF?CSS, A language for web page layout , I can write games ? It is a pity ,CSS I can write games . Next, let's go to this country where we don't think about it .

   strategy

   Every time the author plays the chamber of secrets to escape the game card , Always search for strategies , You can play the game after watching it . So when we do the chamber of Secrets escape game , The first thing to consider is strategy . The following is the author's strategy for the secret room escape game

  1. Turn left , Turn the globe

  2. Turn right , Found a hammer , Click pick up , Remember the numbers on the wall

  3. Turn left , Click on the cabinet , Break it with a hammer , Get a disc

  4. Click on the mural on the wall , The mural moves away , See a disc print , Insert the disc , To obtain a usb

  5. Turn right 2 Time , take usb Plug in the computer , Computer on , Enter the password on the wall , Get the key

  6. Turn right , Open the door with the key , Game over

   Copy code

   switch

   After making the strategy , It's time to start identifying the core of the game —— switch . When it comes to switches , Everyone feels HTML Which element is most suitable for switching ? The answer is a single check box .

   Speaking of single check boxes , I have to mention this 2 individual CP——label And brother selector .label Responsible for using the element and its corresponding check box with for To connect , The brother selector is responsible for the relationship with :checked Pseudo classes match well , When an element is checked , Its neighboring elements will be affected by it .

   First , Let's take a look at a simple switch example

  

  

   Copy 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 code

  

   You can see that we use label The elements wrap the corresponding picture , And connect the corresponding switch . When the user clicks on the globe globe when ,globe-trigger The switch will be triggered , This is it. label The relevance of

   After triggering the switch , The state of the corresponding element next to the switch changes :globe Become unable to be clicked on ;hammer Elements appear , That's what the brother selector does

   Empathy , Click on the hammer hammer when , Associated with hammer-trigger The switch is triggered , At the same time hammer Will disappear , On behalf of the user “ Pick up ” This move

   After understanding the principle of the switch , We can hide the switch

  input[type="checkbox"],

  input[type="radio"] {

  display: none;

  }

   Copy code

   Scene: the switch

   Suppose our game map is divided into 4 block , And you can use the navigation arrow to switch .

   The map of the game is actually a long map , As shown in the figure below

  

  " alt="" width="28" height="30" align="">

  ...

  ...

   Copy code

   First , Set the fixed perspective of the game , Cut off the excess

  .camera {

  --stage-width: 18rem;

  --scene-id: 0;

  position: relative;

  width: var(--stage-width);

  height: var(--stage-width);

  overflow: hidden;

  }

   Copy code

   then , Set navigation , Determine the translation distance of the long graph according to the selected navigation

  @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 code

   For example, in the scene 1, The user goes right , Navigation 2 Be triggered , The long graph will shift up one unit , As shown in the figure below

  

   This completes the scene switching effect

   Complete the project

   At the moment , We already have the knowledge necessary to complete the game of chamber of Secrets escape . According to the strategy above , Customize all the switches step by step , Put everything in place , And it can ensure that the scene can be freely switched , Such a pure CSS The secret room escape game was born

   Online play address :Escape Room Game

版权声明
本文为[osc_60387719]所创,转载请带上原文链接,感谢

Scroll to Top