本文實例為大家分享了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}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。