日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
純CSS實(shí)現(xiàn)密室逃脫游戲

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

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為寶山等服務(wù)建站，寶山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寶山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

攻略

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

  •  左轉(zhuǎn)，轉(zhuǎn)動地球儀
  •  右轉(zhuǎn)，發(fā)現(xiàn)一根錘子，點(diǎn)擊撿起，記住墻上的數(shù)字
  •  左轉(zhuǎn)，點(diǎn)擊柜子，用錘子砸開它，獲得一個圓盤
  •  點(diǎn)擊墻上的壁畫，壁畫移開，看到一圓盤印，嵌入圓盤，獲得一個usb
  •  右轉(zhuǎn)2次，將usb插入電腦，電腦開啟，輸入墻上的密碼，獲得鑰匙
  •  右轉(zhuǎn)，用鑰匙打開大門，游戲結(jié)束

開關(guān)

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

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

首先，讓我們來看一看一個簡單的開關(guān)例子   

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.        
    5. 
  
  
  
  
  5.     
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.        
    8. 
  
  
  
  
  8.       
    9. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. .hammer {  
    2. 
  
  
  
  
  2.       display: none;  
    3. 
  
  
  
  
  3.     }  
    4. 
  
  
  
  
  4.     .globe-trigger:checked { 
    5. 
  
  
  
  
  5.       & ~ {  
    6. 
  
  
  
  
  6.         .globe {  
    7. 
  
  
  
  
  7.           pointer-events: none;  
    8. 
  
  
  
  
  8.         }  
    9. 
  
  
  
  
  9.         .hammer {  
    10. 
  
  
  
  
  10.           display: inline-block;  
    11. 
  
  
  
  
  11.         }  
    12. 
  
  
  
  
  12.       }  
    13. 
  
  
  
  
  13.     }  
    14. 
  
  
  
  
  14.     .hammer-trigger:checked {  
    15. 
  
  
  
  
  15.       & ~ {  
    16. 
  
  
  
  
  16.         .hammer {  
    17. 
  
  
  
  
  17.           transform: scale(0);  
    18. 
  
  
  
  
  18.           opacity: 0;  
    19. 
  
  
  
  
  19.         }  
    20. 
  
  
  
  
  20.       }  
    21. 
  
  
  
  
  21.     } 
    22.

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. input[type="checkbox"],  
    2. 
  
  
  
  
  2.   input[type="radio"] {  
    3. 
  
  
  
  
  3.     display: none;  
    4. 
  
  
  
  
  4.   } 
    5.

場景切換

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

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

   

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.       
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.        
    5. 
  
  
  
  
  5.        
    6. 
  
  
  
  
  6.        
    7. 
  
  
  
  
  7.        
    8. 
  
  
  
  
  8.        
    9. 
  
  
  
  
  9.          
    10. 
  
  
  
  
  10.        ...  
    11. 
  
  
  
  
  11.          
    12. 
  
  
  
  
  12.          
    13. 
  
  
  
  
  13.          ...  
    14. 
  
  
  
  
  14.            
    15. 
  
  
  
  
  15.              
    16. 
  
  
  
  
  16.             
    17. 
  
  
  
  
  17.             
    18. 
  
  
  
  
  18.        
  
  •        
  •    
    •  

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

     
 
 
 
      
  
  
  
  
    1. .camera {  
      2. 
  
  
  
  
    2.      --stage-width: 18rem;  
      3. 
  
  
  
  
    3.      --scene-id: 0;  
      4. 
  
  
  
  
    4.      position: relative;  
      5. 
  
  
  
  
    5.      width: var(--stage-width);  
      6. 
  
  
  
  
    6.      height: var(--stage-width); 
      7. 
  
  
  
  
    7.       overflow: hidden;  
      8. 
  
  
  
  
    8.    } 
      9.

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

     
 
 
 
      
  
  
  
  
    1. @for $i from 1 through 4 {  
      2. 
  
  
  
  
    2.      .nav-trigger-#{$i}:checked {  
      3. 
  
  
  
  
    3.        & ~ .stage {  
      4. 
  
  
  
  
    4.          --scene-id: #{$i - 1};  
      5. 
  
  
  
  
    5.        }  
      6. 
  
  
  
  
    6.      }  
      7. 
  
  
  
  
    7.    }  
      8. 
  
  
  
  
    8.    .stage {  
      9. 
  
  
  
  
    9.      transform: translateY(calc(var(--stage-width) * var(--scene-id) * -1));  
      10. 
  
  
  
  
    10.    }  
      11. 
  
  
  
  
    11.    .scene {  
      12. 
  
  
  
  
    12.      position: relative;  
      13. 
  
  
  
  
    13.      width: var(--stage-width);  
      14. 
  
  
  
  
    14.      height: var(--stage-width);  
      15. 
  
  
  
  
    15.    } 
      16.

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

    這樣就完成了場景切換這一效果

    完成項(xiàng)目

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

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


    標(biāo)題名稱：純CSS實(shí)現(xiàn)密室逃脫游戲
    URL標(biāo)題：http://www.dlmjj.cn/article/dhddcdj.html