翻牌小游戏

下面展示一些 内联代码片。

// html
<div id="wangmeng"></div>
css
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
  }
  ul {
   position: relative;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
  }
  li {
   position: relative;
   perspective: 1200;
   transform-style: preserve-3d;
  }
  div {
   border: 1px solid gray;
   position: absolute;
   text-align: center;
   line-height: 100px;
   backface-visibility: hidden;
  }
  li div:nth-child(2) {
   transform: rotatey(-180deg);
  }
  .one {
   transition: all 2s;
   transform: rotatey(-180deg);
  }
  .two {
   transition: all 2s;
  }

// An highlighted block
let wm = document.getElementById("wangmeng");
  wm.style.width = 400 + 'px'
  wm.style.height = 400 + 'px'
  var num = 0,
   arr = [],
   nums = 0,
   ii = 0,
   time = null
  //创建div
  function main(h, w, c, id) {
   this.width = w
   this.height = h
   this.color = c
   this.id = id
  }
main.prototype.add = function() {
   //创建ul
   const ul = document.createElement('ul');
   ul.style.width = this.width + 'px'
   ul.style.height = this.height + 'px'
   ul.style.backgroundColor = this.color
   this.id.appendChild(ul)
   return function lis(ws, hs, cs) {
    //创建li
    this.li = document.createElement('li')
    this.li.style.width = ws + 'px'
    this.li.style.height = hs + 'px'
    this.li.style.backgroundColor = cs
    ul.appendChild(this.li)
    return this.li
   }
  }
  main.prototype.div = function() {
   //创建2个相同的div
   const div = document.createElement('div');
   div.style.width = li.style.width
   div.style.height = li.style.height
   li.appendChild(div)
   return div
  }
  function init() {
   //初始化
   var s = new main(400, 400, '', wm)
   var adds = s.add()
   for (let i = 0; i < 16; i++) {
    //创建 li
    var li = adds(100, 100, '')
    for (let j = 0; j < 2; j++) {
     //创建div
     s.div()
    }
   }
   divs = document.querySelectorAll("li div:last-child");
   divfir = document.querySelectorAll("li div:first-child");
   this.suiji.call(this)
  }
  init.prototype.clicks = function() {
   for (let i = 0; i < divfir.length; i++) {
    divfir[i].addEventListener('click', btn.bind(this, i))
   }
  }
  function deletes(bool) {
   for (let i = 0; i < divfir.length; i++) {
    if (bool) {
     divfir[i].style.pointerEvents = 'none'
    } else {
     divfir[i].style.pointerEvents = 'auto'
    }
   }
  }
  function btn(i) {
   divs[i].className = 'two'
   divs[i].style.transform = 'rotatey(0deg)'
   divfir[i].className = 'one'
   if (ii != i) {
    num++;
   }
   console.log(num)
   if (num == 2) {
    deletes(true)
    if (nums != arr[i]) {
     clearInterval(time)
     time = setTimeout(function() {
      fz(divfir, divs, ii)
      fz(divfir, divs, i)
      num = 0
      deletes(false)
     }, 1500)
    } else {
     time = setTimeout(function() {
      divs[i].style.backgroundColor = 'pink'
      divs[ii].style.backgroundColor = 'pink'
      deletes(false)
     }, 1000)
     num = 0
    }
   } else {
    nums = arr[i]
    ii = i
   }
  }
   function fz(a, b, iis) {
   a[iis].className = ""
   b[iis].className = ""
   a[iis].className = 'two'
   b[iis].className = 'two'
   a[iis].style.transform = 'rotatey(0deg)'
   b[iis].style.transform = 'rotatey(-180deg)'
  }
   init.prototype.suiji = function() {
   arr = [1, 2, 3, 4, 5, 6, 7, 8];
   arr.forEach(function(val) {
    arr.push(val)
   })
   arr.sort(function(a) {
    return a - Math.random() * 9
   })
   for (let j = 0; j < divs.length; j++) {
    divs[j].innerText = arr[j]
   }
  }
  var ss = new init;
  ss.clicks()