js之真心話大冒險

真心話還是大冒險？相信大家基本上都做過這個遊戲，我們一般都是通過卡牌抽取當前是真心話還是大冒險，那麼向這種卡牌抽取的方式，使用簡單的js也能實現類似卡牌的效果~如下面效果圖：

翻轉卡牌就可以看到自己選擇的是真心話還是大冒險~那麼接下來我們一起來看一下如何實現的吧！
最初只有一張卡牌，通過點選開始，出現多張卡牌
首先，我們要來修飾好卡牌開始的樣子，結構和修飾如下程式碼：

<!-- 存放卡牌的容器 -->
<div class="wrap">
	<!-- 開始的卡牌 -->
     <div class="card">
         <p>開始</p>
         <!-- 開始卡牌下方疊加的陰影 -->
         <div class="bottom"></div>
         <div class="bottom"></div>
         <div class="bottom"></div>
     </div>
 </div>

*{margin: 0;padding: 0;}
body{ background: #ccc;padding-top: 30px;}
.wrap{margin: 0 auto;position:relative;}  /* 存放卡牌的容器 */

.card{width: 222px;height: 311px;background: url(img/project_front_bg.png) no-repeat;position:absolute;}
.card p{font-size: 50px;color: #000;text-align: center;line-height: 311px;}

.bottom{width:222px;height:66px;background: url(img/project_card_bot_bg.png) no-repeat;position: absolute;bottom: -3px;left: 0;z-index: -1;transition: all .2s;}
.bottom+.bottom{bottom: -6px;z-index: -2;}
.bottom+.bottom+.bottom{bottom: -9px;z-index: -3;}

.card:hover .bottom{bottom: -8px;}
.card:hover .bottom+.bottom{bottom: -13px;}
.card:hover .bottom+.bottom+.bottom{bottom: -18px;}

在這裡我們設想不同螢幕開啟的卡牌在每排擺放的數量不同，所以不給wrap設定寬度，通過js獲取當前螢幕的寬度在設定寬度

window.onload = function(){
	var html = document.querySelector("html");
    var oWrap = document.getElementsByClassName('wrap')[0];
    //在當前螢幕下一排可以放置幾張卡牌
    var num = Math.floor(html.offsetWidth * 0.95 / (222 + 20));
    //設定卡牌容器的寬度
    oWrap.style.width = num * (222 + 20) + 'px';
}

接下來，要通過給定真心話和大冒險的條數建立卡牌，並調整卡牌所在的位置。卡牌的樣式可以通過css修飾設定好：

/* 卡牌 */
.box{width: 222px;height: 311px;margin-right: 20px;margin-bottom: 20px;position: absolute;display:none;}
/* 卡牌正面 */
.white{width: 222px;height: 311px;background: url(img/project_card_bg.png) no-repeat;backface-visibility: hidden;transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);}
/* 卡牌反面 */
.black{width: 222px;height: 311px;background: url(img/project_back_bg.png) no-repeat;position: absolute;top: 0;left: 0;font-size: 30px;color: #fff;transform: rotateY(180deg);backface-visibility: hidden;transition: all 1s cubic-bezier(0.68,-.55,.265,1.55);}
/* 卡牌反面文字 */
.black p{font-size: 30px;color: #fff;margin-top: 80px;text-align: center;padding: 20px;}

/* 劃過卡牌翻轉 */
.box:hover .white{transform: rotateY(180deg);}
.box:hover .black{transform: rotateY(0deg);}

卡牌的數量需要根據真心話和大冒險的條數動態的建立，可以任意選擇真心話還是大冒險哦~

var str = ['抓著鐵門大喊,放我出去','做自己最性感、最嫵媚的表情或動作','繞著旗杆跳鋼管舞。','繞操場跑一圈，邊跑邊喊，我再也不尿床了。','做一個大家都滿意的鬼臉','跳草裙舞','大喊 燃燒吧，小宇宙～','站起來,大喊"我是超人,我要回家了！"','唱跳RAP混合表演'] ;
//創造卡牌
for(var i = 0;i < str.length;i ++){
    var oBox = document.createElement('div');
    var oWhite = document.createElement('div');
    var oBlack = document.createElement('div');
    var oP = document.createElement('p')
    
    oP.innerText = str[i];
    oBlack.classList.add('black')
    oWhite.classList.add('white')
    oBox.classList.add('box')

    oBox.appendChild(oWhite)
    oBlack.appendChild(oP)
    oBox.appendChild(oBlack)
    oWrap.appendChild(oBox)     
}

接下來，當點選開始卡牌的時候，讓帶有真心話和大冒險的卡牌擺到相應的位置就ok~

// count用來計數一排放幾張卡牌
var count = 1;
// rowCount用來計數總共卡牌有幾行
var rowCount = 0;
oCard.onclick = function(){
	var oBox = document.getElementsByClassName('box')
    for(var i = 0;i < oBox.length;i ++){
    	oBox[i].style.display = 'block';
        if(count % num == 0){  // 一行放滿卡牌後，下一行卡牌left的位置
            count = 0;
            oBox[i].style.left = '0px'
            rowCount ++
        }else{
            oBox[i].style.left = (222 + 20) * count + 'px'
        }
		
		//一行放滿卡牌後，下一行卡牌top的位置
        if(rowCount > 0){
            oBox[i].style.top = (311 + 20) * rowCount + 'px'
        }
        count ++
    }
    oCard.onclick = null;
}

好了，快動手寫一寫，拿去一起跟其他小夥伴一起玩耍吧~
再也不怕聚會的時候當低頭族了呢！