极乐门资源网 Design By www.ioogu.com
本文实例为大家分享了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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,翻牌
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无js实现翻牌小游戏的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]