密室逃脱游戏的纯CSS实现

“密室逃脱”是大家耳熟能详的词。在以前的flash时代，这是一款经典的益智游戏。玩家经常被困在一个密室中，而通关的目的就是想方设法逃离这个密室。下面是我玩的最早的密室逃脱游戏——CrimsonRoom，也可以说是密室逃脱游戏的鼻祖。接下来笔者将用纯CSS实现一个类似密室逃脱的游戏。是的，你没有听错，纯CSS意味着完全不涉及JS。有些人想知道：WTF？CSS这种网页布局语言，居然可以写游戏？可惜CSS真的可以写游戏。接下来，就和作者一起走进这个不可思议的国度吧。攻略笔者每次在密室逃脱游戏中遇到卡点的时候，总会去搜攻略，看完之后就可以通关了。所以我们在制作密室逃脱游戏的时候，首先要考虑的就是策略。以下是笔者针对本文密室逃脱游戏制定的攻略。左转，地球仪右转，找到锤子，点击捡起，记住墙上的数字左转，点击柜子，用锤子砸开，得到一个圆圈点击壁画在有磁盘的墙上，取下壁画，看到一个磁盘打印，插入磁盘，得到一个usb，向右转两次，将usb插入电脑，电脑打开，输入墙上的密码，拿到钥匙然后右转，用钥匙开门，游戏结束开关。制定好策略后，就要开始确定游戏的核心——开关。说到开关，你觉得HTML中哪个元素最适合制作开关呢？答案是一个复选框。说到单选框，就不得不提这两个CP——标签选择器和兄弟选择器。标签负责用for将元素与其对应的复选框关联起来，兄弟选择器负责配合:checked伪类。当一个元素被选中时，它的相邻元素将受到它的影响。首先，让我们看一个简单的开关示例。hammer{display:none;}.globe-trigger:checked{&~{.globe{pointer-events:none;}.hammer{display:inline-block;}}}.hammer-trigger:checked{&~{.hammer{transform:scale(0);opacity:0;}}}可以看到我们用label元素包裹了对应的图片，关联了对应的switch。当用户点击地球时，会触发globe-triggerswitch，这就是标签的关联。触发开关后，开关旁边对应元素的状态发生变化：地球变成不可点击；锤子元素出现，这和兄弟选择器的作用是一样的。当点击锤子锤子时，与其关联的锤子触发开关被触发，同时旁边的锤子会消失，这意味着被用户“捡起”的动作在理解了原理后开关，我们可以隐藏开关input[type="checkbox"],input[type="radio"]{display:none;}场景切换假设我们的游戏地图分为4块，导航箭头可以用于切换。游戏的地图其实是一张长图，如下图......