js原生动画一翻牌游戏 添加图片就可以使用 

<!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>

posted on 2017-04-30 18:20  朝阳-小牛  阅读(313)  评论(0)    收藏  举报

导航