js实现翻牌小游戏
作者:evail_
这篇文章主要为大家详细介绍了js实现翻牌小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现翻牌小游戏的具体代码,供大家参考,具体内容如下
效果图
需求分析
1、生成两组顺序随机的1-8数据
2、卡片需要有翻转效果
3、两次翻转数据不相等,回复原状
4、两次翻转数据相等,卡片相等,不能再被点击
5、当所有卡片不能被点击游戏结束
6、限制最大点击次数50次
HTML结构
<div class="wrap"> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> <div> <p class="top"></p> <p class="bottom"></p> </div> </div>
css布局
实现卡片翻转效果需要3个关键属性
1.perspective: 1000px; 透视深度,形成3d视角
2.transform: rotateY(180deg);旋转
3.backface-visibility: hidden; 元素背面不可见
* { margin: 0; padding: 0; } body, html { height: 100%; } .wrap { perspective: 1000px; width: 320px; height: 320px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: flex; justify-content: center; text-align: center; flex-wrap: wrap; } .wrap div { /* box-shadow: 5px 5px 10px #000; */ transition: 1s; position: relative; text-align: center; line-height: 60px; height: 60px; width: 60px; border-radius: 10px; margin: 10px 10px; } .wrap div .active1 { transform: rotateY(180deg); } .wrap div .active2 { transform: rotateY(360deg); } .wrap p { border-radius: 10px; background-color: blueviolet; transition: 1s; backface-visibility: hidden; display: block; height: 60px; width: 60px; position: absolute; /* transform: rotateY(180deg); */ } .wrap .bottom { transform: rotateY(180deg); } h3{ text-align: center; width: 200px; height: 30px; margin: 150px auto; }
js
class Game { constructor(selector) { this.init(selector); } init(selector) { let arr = this.randomArr(); this.nodes = [...document.querySelectorAll(selector)];//获取每一个卡片 this.step = 50;//定义可以被点击的次数 this.tit = document.querySelector("h3"); this.nodes.forEach((item,index) => {//初始化卡片的值,并保存在num属性中 item.children[1].innerHTML = arr[index]; item.num = arr[index]; var that = this item.onclick = function () {//给每一个卡片绑定事件 that.handle(this); } }) } handle(ele) { if(this.step === 0){ alert('游戏结束') return } if(ele.active !== true){ this.step--; this.tit.innerText = `剩余步数:${this.step}` } ele.children[0].classList.add('active1');//卡片翻转 ele.children[1].classList.add('active2'); let res = this.nodes.filter(item => item.children[0].classList.contains('active1')&& item.active !== true); //获取翻过来的且没有配对成功的卡片 if(res.length === 2 && res[0].num !== res[1].num){//如果有两张并且数值不相等,恢复原状 setTimeout(()=>{ res[0].children[0].classList.remove('active1'); res[0].children[1].classList.remove('active2'); res[1].children[0].classList.remove('active1'); res[1].children[1].classList.remove('active2'); },1000)//延迟一秒形成动画 }else if(res.length === 2 && res[0].num === res[1].num){//如果数值相等则配对成功 res[0].active = true;//锁定卡片 res[1].active = true; } } randomArr() { let arr = []; for (let i = 0, n = 8; i < n; i++) { do { var item = randomInt(1, 8); } while (arr.indexOf(item) !== -1) arr.push(item); } arr.push(...arr); return arr; } } new Game('.wrap div') function randomInt(min, max) {//产生[min,max]范围内的整数 return Math.round(Math.random() * (max - min)) + min }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。