這篇文章主要介紹“怎么用CSS實現(xiàn)密室逃脫游戲”,在日常操作中,相信很多人在怎么用CSS實現(xiàn)密室逃脫游戲問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”怎么用CSS實現(xiàn)密室逃脫游戲”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司,專注成都做網(wǎng)站、成都網(wǎng)站設(shè)計、網(wǎng)站營銷推廣,申請域名,雅安服務(wù)器托管,綿陽服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題,請聯(lián)系創(chuàng)新互聯(lián)。
“密室逃脫”這個詞想必大家并不陌生,在以前的flash時代,這是一類很經(jīng)典的益智游戲之一。玩家常常會被困在一間密室中,而過關(guān)的目的就是想法設(shè)法逃出這件密室。以下是筆者玩的最早的一個密室逃脫游戲;深紅房間,它也可以說是密室逃脫類游戲的先祖。
接下來,筆者要用純CSS實現(xiàn)一款類似的密室逃脫類游戲。
是的,你沒聽錯,純CSS,也就意味著完全沒有JS的參與。有人就納悶了:WTF?CSS,一個網(wǎng)頁布局的語言,居然還能寫游戲?可惜的是,CSS還真能寫游戲。接下來隨筆者一起進入這個不思議的國度吧。
攻略
每次筆者玩密室逃脫游戲卡關(guān)時,總會去搜搜攻略,看完后就能把游戲玩通。因此當我們做密室逃脫類游戲時,首先要考慮的事情就是攻略。以下是筆者為本文密室逃脫游戲所制定的攻略
左轉(zhuǎn),轉(zhuǎn)動地球儀
右轉(zhuǎn),發(fā)現(xiàn)一根錘子,點擊撿起,記住墻上的數(shù)字
左轉(zhuǎn),點擊柜子,用錘子砸開它,獲得一個圓盤
點擊墻上的壁畫,壁畫移開,看到一圓盤印,嵌入圓盤,獲得一個usb
右轉(zhuǎn)2次,將usb插入電腦,電腦開啟,輸入墻上的密碼,獲得鑰匙
右轉(zhuǎn),用鑰匙打開大門,游戲結(jié)束
開關(guān)
制定完攻略后,就要開始確定該游戲的核心所在——開關(guān)。說到開關(guān),大家覺得HTML里的哪個元素最適合用來做開關(guān)?答案是單復(fù)選框。
說起單復(fù)選框,就不得不提這2個CP——label和兄弟選擇符。label負責將該元素與其對應(yīng)的復(fù)選框用for來關(guān)聯(lián)起來,而兄弟選擇符則負責與:checked偽類配合好,當某元素被勾選時,其相鄰的元素就會受到它的影響。
首先,讓我們來看一看一個簡單的開關(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元素包裹了對應(yīng)的圖片,并關(guān)聯(lián)好了對應(yīng)的開關(guān)。當用戶點擊地球儀globe時,globe-trigger開關(guān)就會被觸發(fā),這就是label的關(guān)聯(lián)性
觸發(fā)開關(guān)后,開關(guān)旁邊對應(yīng)的元素狀態(tài)就發(fā)生了變化:globe變得無法被點擊;hammer元素出現(xiàn),這就是兄弟選擇符的作用
同理,點擊錘子hammer時,與其關(guān)聯(lián)的hammer-trigger開關(guān)被觸發(fā),與此同時旁邊的hammer就會消失,代表被用戶“撿起”這一動作
理解開關(guān)的原理后,我們就可以把開關(guān)給隱藏起來啦
input[type="checkbox"], input[type="radio"] { display: none; }
場景切換
假設(shè)我們游戲地圖分為4塊,且可以用導(dǎo)航箭頭來切換。
游戲的地圖其實是一張長圖,如下圖所示
<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" /> <!-- 長圖 --> <form class="stage"> <!-- 開關(guān) --> <input type="checkbox" id="globe" class="globe-trigger" />... <!-- 場景 --> <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)航來確定長圖的平移距離
@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); }
比如在場景1,用戶向右走,導(dǎo)航2被觸發(fā),長圖將上平移一個單位,如下圖所示
這樣就完成了場景切換這一效果
完成項目
此刻,我們已經(jīng)具備完成密室逃脫游戲所必須的知識了。根據(jù)上面的攻略,一步步定制好所有開關(guān),擺放好所有物件,且能確保場景能自由切換,這樣一個純CSS密室逃脫游戲就成功誕生啦
在線游玩地址:https://codepen.io/alphardex/full/GRqWRyB
到此,關(guān)于“怎么用CSS實現(xiàn)密室逃脫游戲”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
分享名稱:怎么用CSS實現(xiàn)密室逃脫游戲
標題URL:http://muchs.cn/article46/joggeg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、定制網(wǎng)站、云服務(wù)器、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)