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

好了，快动手写一写，拿去一起跟其他小伙伴一起玩耍吧~
再也不怕聚会的时候当低头族了呢！

标签：真心话,bottom,卡牌,js,var,oBox,card,大冒险
来源： https://blog.csdn.net/angel_Wang123/article/details/111033071