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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。