怎么用CSS實(shí)現(xiàn)密室逃脫游戲

這篇文章主要介紹“怎么用CSS實(shí)現(xiàn)密室逃脫游戲”，在日常操作中，相信很多人在怎么用CSS實(shí)現(xiàn)密室逃脫游戲問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用CSS實(shí)現(xiàn)密室逃脫游戲”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

“密室逃脫”這個(gè)詞想必大家并不陌生，在以前的flash時(shí)代，這是一類很經(jīng)典的益智游戲之一。玩家常常會(huì)被困在一間密室中，而過(guò)關(guān)的目的就是想法設(shè)法逃出這件密室。以下是筆者玩的最早的一個(gè)密室逃脫游戲;深紅房間，它也可以說(shuō)是密室逃脫類游戲的先祖。

接下來(lái)，筆者要用純CSS實(shí)現(xiàn)一款類似的密室逃脫類游戲。

是的，你沒(méi)聽(tīng)錯(cuò)，純CSS，也就意味著完全沒(méi)有JS的參與。有人就納悶了：WTF?CSS，一個(gè)網(wǎng)頁(yè)布局的語(yǔ)言，居然還能寫游戲？可惜的是，CSS還真能寫游戲。接下來(lái)隨筆者一起進(jìn)入這個(gè)不思議的國(guó)度吧。

攻略

每次筆者玩密室逃脫游戲卡關(guān)時(shí)，總會(huì)去搜搜攻略，看完后就能把游戲玩通。因此當(dāng)我們做密室逃脫類游戲時(shí)，首先要考慮的事情就是攻略。以下是筆者為本文密室逃脫游戲所制定的攻略

•  左轉(zhuǎn)，轉(zhuǎn)動(dòng)地球儀

•  右轉(zhuǎn)，發(fā)現(xiàn)一根錘子，點(diǎn)擊撿起，記住墻上的數(shù)字

•  左轉(zhuǎn)，點(diǎn)擊柜子，用錘子砸開(kāi)它，獲得一個(gè)圓盤

•  點(diǎn)擊墻上的壁畫，壁畫移開(kāi)，看到一圓盤印，嵌入圓盤，獲得一個(gè)usb

•  右轉(zhuǎn)2次，將usb插入電腦，電腦開(kāi)啟，輸入墻上的密碼，獲得鑰匙

•  右轉(zhuǎn)，用鑰匙打開(kāi)大門，游戲結(jié)束

開(kāi)關(guān)

制定完攻略后，就要開(kāi)始確定該游戲的核心所在——開(kāi)關(guān)。說(shuō)到開(kāi)關(guān)，大家覺(jué)得HTML里的哪個(gè)元素最適合用來(lái)做開(kāi)關(guān)？答案是單復(fù)選框。

說(shuō)起單復(fù)選框，就不得不提這2個(gè)CP——label和兄弟選擇符。label負(fù)責(zé)將該元素與其對(duì)應(yīng)的復(fù)選框用for來(lái)關(guān)聯(lián)起來(lái)，而兄弟選擇符則負(fù)責(zé)與:checked偽類配合好，當(dāng)某元素被勾選時(shí)，其相鄰的元素就會(huì)受到它的影響。

首先，讓我們來(lái)看一看一個(gè)簡(jiǎn)單的開(kāi)關(guān)例子 

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

.hammer {        display: none;      }      .globe-trigger:checked {       & ~ {          .globe {            pointer-events: none;          }          .hammer {            display: inline-block;          }        }      }      .hammer-trigger:checked {        & ~ {          .hammer {            transform: scale(0);            opacity: 0;          }        }      }

可以看到我們用label元素包裹了對(duì)應(yīng)的圖片，并關(guān)聯(lián)好了對(duì)應(yīng)的開(kāi)關(guān)。當(dāng)用戶點(diǎn)擊地球儀globe時(shí)，globe-trigger開(kāi)關(guān)就會(huì)被觸發(fā)，這就是label的關(guān)聯(lián)性

觸發(fā)開(kāi)關(guān)后，開(kāi)關(guān)旁邊對(duì)應(yīng)的元素狀態(tài)就發(fā)生了變化：globe變得無(wú)法被點(diǎn)擊；hammer元素出現(xiàn)，這就是兄弟選擇符的作用

同理，點(diǎn)擊錘子hammer時(shí)，與其關(guān)聯(lián)的hammer-trigger開(kāi)關(guān)被觸發(fā)，與此同時(shí)旁邊的hammer就會(huì)消失，代表被用戶“撿起”這一動(dòng)作

理解開(kāi)關(guān)的原理后，我們就可以把開(kāi)關(guān)給隱藏起來(lái)啦

input[type="checkbox"],    input[type="radio"] {      display: none;    }

場(chǎng)景切換

假設(shè)我們游戲地圖分為4塊，且可以用導(dǎo)航箭頭來(lái)切換。

游戲的地圖其實(shí)是一張長(zhǎng)圖，如下圖所示

<div class="camera">       <!-- 導(dǎo)航 -->       <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" />       <!-- 長(zhǎng)圖 -->       <form class="stage">         <!-- 開(kāi)關(guān) -->         <input type="checkbox" id="globe" class="globe-trigger" />...         <!-- 場(chǎng)景 -->         <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>

首先，設(shè)定游戲的固定視角，將多余的部分裁掉 

.camera {       --stage-width: 18rem;       --scene-id: 0;       position: relative;       width: var(--stage-width);       height: var(--stage-width);       overflow: hidden;     }

然后，設(shè)定導(dǎo)航，根據(jù)所選的導(dǎo)航來(lái)確定長(zhǎng)圖的平移距離 

@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);     }

比如在場(chǎng)景1，用戶向右走，導(dǎo)航2被觸發(fā)，長(zhǎng)圖將上平移一個(gè)單位，如下圖所示

這樣就完成了場(chǎng)景切換這一效果

完成項(xiàng)目

此刻，我們已經(jīng)具備完成密室逃脫游戲所必須的知識(shí)了。根據(jù)上面的攻略，一步步定制好所有開(kāi)關(guān)，擺放好所有物件，且能確保場(chǎng)景能自由切換，這樣一個(gè)純CSS密室逃脫游戲就成功誕生啦

在線游玩地址：https://codepen.io/alphardex/full/GRqWRyB

到此，關(guān)于“怎么用CSS實(shí)現(xiàn)密室逃脫游戲”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！