js實現(xiàn)翻牌小游戲

更新時間：2020年07月31日 12:03:07 作者：evail_

這篇文章主要為大家詳細介紹了js實現(xiàn)翻牌小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)翻牌小游戲的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

需求分析

1、生成兩組順序隨機的1-8數(shù)據(jù)
2、卡片需要有翻轉(zhuǎn)效果
3、兩次翻轉(zhuǎn)數(shù)據(jù)不相等，回復原狀
4、兩次翻轉(zhuǎn)數(shù)據(jù)相等，卡片相等，不能再被點擊
5、當所有卡片不能被點擊游戲結束
6、限制最大點擊次數(shù)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布局

實現(xiàn)卡片翻轉(zhuǎn)效果需要3個關鍵屬性

1.perspective: 1000px; 透視深度，形成3d視角
2.transform: rotateY(180deg);旋轉(zhuǎn)
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;//定義可以被點擊的次數(shù)
  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 = `剩余步數(shù)：${this.step}`
  }
  ele.children[0].classList.add('active1');//卡片翻轉(zhuǎn)
  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){//如果有兩張并且數(shù)值不相等，恢復原狀 
   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){//如果數(shù)值相等則配對成功
   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) {//產(chǎn)生[min,max]范圍內(nèi)的整數(shù)
 return Math.round(Math.random() * (max - min)) + min
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: