深红房间攻略（CSS奇思妙想——纯CSS实现密室逃脱游戏）

纯CSS实现密室逃脱游戏

前言

“密室逃脱”这个词大家都不陌生。在之前的flash时代，它是经典的益智游戏之一。玩家经常被困在一个密室里，通关的目的就是试图逃离这个密室。以下是笔者玩过的最早的密室逃脱游戏3354绯红室，也可以说是密室逃脱游戏的鼻祖。

接下来，作者将用纯CSS实现一个类似的逃生游戏。

是的，你没听错，纯CSS，也就是说完全没有JS的参与。有人疑惑：WTF？CSS这种网页布局语言居然能写游戏？可惜CSS真的可以写游戏。接下来，和我一起来到这个不可思议的国家。

攻略

每次玩密室逃脱游戏卡，总会搜一下攻略，看完就能玩游戏了。所以我们在玩密室逃脱游戏的时候，首先要考虑的就是策略。以下是作者对这款密室逃脱游戏的攻略。

左转，转地球仪右转，找到锤子，点击捡起来，记住墙上的数字，左转，点击柜子，用锤子砸开，得到一个圆盘，点击墙上的壁画，移走壁画，看到一个圆盘印，嵌入圆盘，得到一个usb然后右转两次，把usb插入电脑，打开电脑，输入墙上的密码，得到钥匙然后右转，用钥匙开门，游戏结束了，开关.

制定好策略后，就要确定——开关是游戏的核心。说到切换，你觉得HTML中哪个元素最适合切换？答案是一个复选框。

说到单复选框，就不得不提这两个CP——label和sibling选择器。Label负责将元素及其对应的复选框与for关联，而同级选择器负责与：checked伪类匹配。选中一个元素时，它的相邻元素将受到它的影响。

首先，让我们看一个简单的开关例子。

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/ybnoq 2 jvtstmfke . png ' alt class=' w-8 '/label label for=' hammer ' class=' hammer ' img src=' https://I . loli。锤子{ display: none} .全球触发器：已检查{ ~ {。globe { pointer-events:无；} .hammer { display : inline-block；} } } .锤子扳机：检查完毕。锤子{ transform:刻度(0)；opa 3 3360 0；} } }

您可以看到，我们用标签元素包装了相应的图片，并关联了相应的开关。当用户点击globe globe时，globe-trigger开关就会被触发，这就是标签的关联性。

开关触发后，开关旁边对应元素的状态发生变化：地球仪无法点击；锤子元素出现，这是同级选择器的功能。

同样，当锤子锤子被点击时，与之关联的锤子触发开关会被触发，同时旁边的锤子会消失，代表被用户“捡起”的动作。

了解了开关的原理之后，我们就可以隐藏开关了。

输入[type='checkbox']，输入[type=' radio ']{ display : none；}场景切换

假设我们游戏地图被分成四块，可以通过导航箭头来切换。

游戏的地图其实很长，如下图所示。

div class='相机！-导航-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 '！-长图- form class='stage '！-开关-input type=' checkbox ' id=' globe ' class=' globe-trigger '/.-场景=' . '的- div class='scene scene-1 '标签./label nav class=' nav ' label for=' nav-4 ' class=' nav-left '/label label for=' nav-2 ' class=' nav-right '/label/nav/div/form/div首先，设定游戏的固定视角，将多余的部分裁掉。相机{ -舞台宽度： 18雷姆；-场景-id : 0；位置：相对；宽度： var(-阶段-宽度);高度： var(-阶段宽度);飞越：隐藏；}然后，设定导航，根据所选的导航来确定长图的平移距离

@为了$i从一到4 {。导航触发器-# { $ I } :已检查{~。stage {-scene-id : # { $ I-1 }；} } } .stage { transform : translate y(calc(var(-阶段宽度)* var(-场景id)*-1))；} .场景{位置：相对；宽度： var(-阶段-宽度);高度： var(-阶段宽度);}比如在场景1,用户向右走，导航2被触发，长图将上平移一个单位，如下图所示

这样就完成了场景切换这一效果

完成项目

此刻，我们已经具备完成密室逃脱游戏所必须的知识了。根据上面的攻略，一步步定制好所有开关，摆放好所有物件，且能确保场景能自由切换，这样一个纯半铸钢钢性铸铁(铸造半钢)密室逃脱游戏就成功诞生啦

在线游玩地址：密室逃脱游戏

最后