日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

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

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

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

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

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

攻略

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

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

開關

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

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

首先，讓我們來看一看一個簡單的開關例子   

 
 
 
 
    
  
  
  
  
  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元素包裹了對應的圖片，并關聯(lián)好了對應的開關。當用戶點擊地球儀globe時，globe-trigger開關就會被觸發(fā)，這就是label的關聯(lián)性

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

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

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

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

場景切換

假設我們游戲地圖分為4塊，且可以用導航箭頭來切換。

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

   

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

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

     
 
 
 
      
  
  
  
  
    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.

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

     
 
 
 
      
  
  
  
  
    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，用戶向右走，導航2被觸發(fā)，長圖將上平移一個單位，如下圖所示

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

    完成項目

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

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


    當前題目：純CSS實現(xiàn)密室逃脫游戲
    網(wǎng)站地址：http://m.5511xx.com/article/dhddcdj.html