js原生動畫一翻牌遊戲添加圖片就可使用

時間 2019-12-02
原文原文鏈接
<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Title</title>   <link rel="stylesheet" href="common.css">   <style type="text/css">      body {         background: #fff3cd;      }      #txt {         width: 400px;         height: 50px;         border: 0;         display: block;         background: #FFF3CD;         margin: auto;         text-align: center;         line-height: 50px;         font-size: 40px;         color: #00ffff;      }      .container {         width: 780px;         position: relative;         margin: 30px auto;      }      .tile {         width: 128px;         height: 128px;         position: absolute;      }      .tile img,      .tile .mask {         width: 100%;         height: 100%;      }      .tile .mask {         background: #ff98e4;         position: absolute;         left: 0;         top: 0;         /*display: none;*/         transform: scaleX(1);         transform-origin: 50%;         animation: box 10s ;      }      @keyframes box {         0% {            transform: scaleX(1);         }         20% {            transform: scaleX(0);         }         90% {            transform: scaleX(0);         }         100% {            transform: scaleX(1);         }      }   </style></head><body><input id="txt" type="text"><div id="container" class="container"></div><script type="text/javascript">   var container = document.getElementById('container');   var mask = document.getElementsByClassName('mask');   function Tile(tLeft, tTop, type) {      this.create(type);      this.setPosition(tLeft, tTop);   }   Tile.prototype = {      type: 0,//標識當前的圖案類型      target: null,//當前圖案的HTML節點      isMatch: false,//是否已被消除      create: function (type) {         var _this = this;         var div = document.createElement('div');         var className = document.createAttribute('class');         className.value = 'tile';         div.setAttributeNode(className);         div.innerHTML = '\         <img src="images/12shengxiao' + type + '.png" alt="">\         <div class="mask"></div>';         container.appendChild(div);         _this.img = div.getElementsByTagName('img')[0];         _this.mask = div.getElementsByClassName('mask')[0];         _this.target = div;         _this.type = type;      },      setPosition: function (tLeft, tTop) {         var _this = this;         _this.target.style.left = tLeft + 'px';         _this.target.style.top = tTop + 'px'      },      show: function () {         var _this = this;         var i = 1;         var intervalId = setInterval(function () {            i -= 0.1;            _this.mask.style.transform = 'scaleX(' + i + ')';            if (i <= 0) {               _this.mask.style.transform = 'scaleX(0)';               clearInterval(intervalId);               showImg();            }         }, 10);         _this.img.style.transform = 'scaleX(0)';         function showImg() {            var i = 0;            var intervalId = setInterval(function () {               i += 0.1;               _this.img.style.transform = 'scaleX(' + i + ')';               if (i >= 1) {                  _this.img.style.transform = 'scaleX(1)';                  clearInterval(intervalId);               }            }, 10);         }      },      hide: function () {         var _this = this;         var i = 1;         var intervalId = setInterval(function () {            i -= 0.1;            _this.img.style.transform = 'scaleX(' + i + ')';            if (i <= 0) {               _this.img.style.transform = 'scaleX(0)';               clearInterval(intervalId);               showMask();            }         }, 10);         _this.mask.style.transform = 'scaleX(0)';         function showMask() {            var i = 0;            var intervalId = setInterval(function () {               i += 0.1;               _this.mask.style.transform = 'scaleX(' + i + ')';               if (i >= 1) {                  _this.mask.style.transform = 'scaleX(1)';                  clearInterval(intervalId);               }            }, 10);         }      },      remove: function () {         var _this = this;         container.removeChild(_this.target);      }   };   var tileTypeArr = [];   for (var i = 1; i <= 12; i++) {      tileTypeArr.push(i);      tileTypeArr.push(i);   }   var tileArr = [];   for (var i = 0; i < 4; i++) {      for (var j = 0; j < 6; j++) {         var tile = new Tile(j * 128 + 2 * j, i * 128 + 2 * i, tileTypeArr.splice(tileTypeArr.length * Math.random(), 1)[0]);         tileArr.push(tile);      }   }   for (var i in tileArr) {      tileArr[i].target.addEventListener('click', onClickTile);   }   var firstTile = null;   var isAnimation = true;   //開場倒計時   daoJiShi();   function daoJiShi() {      var txt = document.getElementById('txt');      var i = 9;      txt.value = '你能夠看' +  i + '秒';      var intervalId = setInterval(function () {         i--;         txt.value = '你能夠看' +  i + '秒';         if (i < 0) {            clearInterval(intervalId);            txt.value = '';         }      }, 1000);   }   setTimeout(function () {      isAnimation = false;      daoJiShi1();      function daoJiShi1() {         var txt = document.getElementById('txt');         var i = 60;         var intervalId = setInterval(function () {            i--;            txt.value = '還剩' + i + '秒';            if (i < 0) {               clearInterval(intervalId);               txt.value = 'GAME OVER';            }         }, 1000);      }   }, 10000);// 結束倒計時   setTimeout(function () {      isAnimation = true;   }, 70000);   function onClickTile(e) {      if (isAnimation) {         return;      }      var target = e.currentTarget;      for (var i in tileArr) {//遍歷tile數組         var tile = tileArr[i];//取出當前循環的tile對象         if (target == tile.target) {//判斷tile對象中的target節點是否和當前被點擊的節點一致            tile.show();            if (firstTile == null) {//第一次點擊，把點擊的tile對象緩存起來               firstTile = tile;            } else {               if (tile == firstTile) {//若是點擊的仍是上次的，就返回                  return;               }               if (tile.type == firstTile.type) {//判斷第二次點擊的圖案類型和第一次點擊的圖案類型是否一致                  setTimeout(function () {                     tile.remove();                     firstTile.remove();                     firstTile = null;                     isAnimation = false;                  }, 500);                  isAnimation = true;               } else {                  setTimeout(function () {                     tile.hide();                     firstTile.hide();                     firstTile = null;                     isAnimation = false;                  }, 500);                  isAnimation = true;               }            }            break;         }      }   }</script></body></html>