<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bran's game</title> <link rel="stylesheet" href="https://v3.bootcss.com/dist/css/bootstrap.min.css"> <style> *{ margin:0; padding:0; } dl{ overflow: hidden; margin-bottom:0; } dt{ float:left; } dd{ float:left; } html,body{ width:100%; height:100%; font-size: 12px; } .myContainer{ margin:0 auto; max-width:800px; } #timeArea{ text-align: center; font-size:16px; color:red; position: absolute; left:50%; } .score{ padding:20px 10px 0 10px; position: relative; } .stage{ width:100%; padding:20px 10px 0px; } .stage .card{ border:1px solid white; box-sizing: border-box; float:left; position: relative; perspective: 800px; } .stage .card span{ position: absolute; left:0; top:0; width:100%; height: 100%; backface-visibility: hidden; transition:.8s ease-in-out; transition-duration: 1s; text-align: center; font-size: 2rem; color:purple; padding-top:2.5rem; } @media screen and (min-width:320px){ .stage .card span{ font-size:1.5rem; padding-top:1rem; } } .stage .card .frontStyle{ z-index: 2; background-color:lightblue; } .stage .card .backStyle{ background-color:green; z-index: 1; transform:rotateY(180deg) } .initRotateFront{ transform:rotateY(180deg); } .stage .card .initRotateBack{ transform:rotateY(0); } .stage .card .frontRotate{ transform:rotateY(0); } .stage .card .backRotate{ transform:rotateY(-180deg); } .mySkew{ animation-name: mySkewAnimation; animation-delay: .2s; animation-fill-mode:forwards; animation-duration: 1s; } .myScale{ animation-name: myScaleAnimation; animation-delay: .2s; animation-fill-mode:forwards; animation-duration: .5s; } .myRotate{ animation-name: myRotateAnimation; animation-delay: .2s; animation-fill-mode:forwards; animation-duration: .5s; } .myColor{ animation-name: myColorAnimation; animation-delay: .2s; animation-fill-mode:forwards; animation-duration: .5s; } .myMove{ animation-name: myMoveAnimation; animation-delay: .2s; animation-fill-mode:forwards; animation-duration: .5s; } .endGame{ animation-name: myEndAnimation; animation-delay: .2s; animation-fill-mode:forwards; animation-duration: 2s; } @keyframes mySkewAnimation{ 0%{transform: skew(0deg)} 25%{transform: skew(10deg)} 75%{transform:skew(-10deg)} 100%{transform:skew(0deg)} } @keyframes myScaleAnimation{ 0%{transform: scale(1)} 25%{transform: scale(1.2)} 75%{transform:scale(1.3)} 100%{transform:scale(1)} } @keyframes myRotateAnimation{ 0%{transform: rotateZ(0deg)} 100%{transform: rotateZ(360deg)} } @keyframes myEndAnimation{ 0%{transform: rotateZ(0deg);opacity: 1;} 100%{transform:rotateZ(360deg);opacity: 0;} } @keyframes myColorAnimation{ 0%{background-color: red;} 10%{background-color: orange;} 20%{background-color:green;} 30%{background-color: lightgreen;} 40%{background-color: blue;} 50%{background-color: lightblue;} 60%{background-color: wheat;} 70%{background-color: gray;} 80%{background-color: black;} 90%{background-color: pink;} 100%{background-color: purple;} } @keyframes myMoveAnimation{ 0%{opacity:1;transform: translateX(0)} 25%{opacity:1;transform: translateX(-200px)} 50%{opacity:1;transform: translateX(0)} 75%{opacity:1;transform: translateX(200px)} 100%{opacity:1;transform: translateX(0)} } </style> </head> <body> <div class="myContainer"> <div class="score"> <div id="timeArea"></div> <dl> <dt>STEPS:</dt> <dd id="count">0</dd> </dl> </div> <div class="stage"> </div> </div> <script> window.onload = function(){ !function(e,t){t.querySelector;var n={stage:t.querySelector(".stage"),lineNumber:4,eleList:[],classNameList:["glyphicon-asterisk","glyphicon-plus","glyphicon-euro","glyphicon-glass","glyphicon-music","glyphicon-search","glyphicon-heart","glyphicon-star","glyphicon-star-empty","glyphicon-film","glyphicon-th-large","glyphicon glyphicon-th-list","glyphicon-ok","glyphicon-zoom-in","glyphicon-off","glyphicon-cog","glyphicon-trash","glyphicon-home","glyphicon-time","glyphicon-road","glyphicon-download","glyphicon-thumbs-up","glyphicon-phone","glyphicon-flash","glyphicon-cutlery"],currentEle:null,count:t.querySelector("#count"),cleanList:[],animationList:["mySkew","myScale","myRotate","myMove"],timeArea:t.querySelector("#timeArea")};function a(e,t){var n=t-e+1;return Math.floor(Math.random()*n+e)}function i(e){for(var i=[],l=(t.createDocumentFragment(),0);l<e.count;l++){var r=t.createElement("div");r.style.width=e.width+"px",r.style.height=e.height+"px",r.className="card";var s=t.createElement("span");s.className="frontStyle glyphicon ";var c=a(0,n.classNameList.length-1);s.className+=n.classNameList[c];var o=t.createElement("span");o.className="backStyle",r.appendChild(s),r.appendChild(o),i.push(r),i.push(r.cloneNode(!0))}for(var u=function(e){for(var t,n,a=e.length;0!==a;)n=Math.floor(Math.random()*a),t=e[a-=1],e[a]=e[n],e[n]=t;return e}(i),g=0,m=u.length;g<m;g++)n.stage.appendChild(u[g])}function l(e){var t=parseInt(getComputedStyle(n.stage).width)-parseInt(getComputedStyle(n.stage).paddingLeft)-parseInt(getComputedStyle(n.stage).paddingRight);i({width:t/e.lineNumber,height:t/e.lineNumber,count:e.pairs})}function r(){n.count.innerText=parseInt(n.count.innerText)+1}function s(e){setTimeout(function(){t.querySelectorAll(".frontStyle").forEach(function(e){e.classList.add("initRotateFront")}),t.querySelectorAll(".backStyle").forEach(function(e){e.classList.add("initRotateBack")})},1e3*e),n.timeArea.innerText=e;var a=setInterval(function(){0===parseInt(n.timeArea.innerText)?(n.timeArea.innerText="",clearInterval(a)):n.timeArea.innerText=parseInt(n.timeArea.innerText)-1},1e3)}function c(){if(t.querySelectorAll(".succeed").length===2*o.pairs){t.querySelectorAll(".card").forEach(function(e){e.classList.add("endGame")});var a=setTimeout(function(){e.confirm("是否进入下一关?")?(o={lineNumber:2*o.lineNumber,pairs:4*o.pairs},n.stage.innerHTML="",n.count.innerText=0,l(o),s(o.pairs)):n.stage.innerText="what a shame , then you may leave this page",clearTimeout(a)},2e3)}}var o={lineNumber:4,pairs:8};l(o),s(3),"ontouchend"in t?n.stage.addEventListener("touchend",function(e){var t=e.target.className;if(t.indexOf("backStyle")>=0)if(t.indexOf("backRotate")<0&&(e.target.classList.add("backRotate"),e.target.previousElementSibling.classList.add("frontRotate"),n.cleanList.push(function(){e.target.classList.remove("backRotate"),e.target.previousElementSibling.classList.remove("frontRotate")}),r()),null!=n.currentEle){if(n.currentEle==e.target)return;if(n.currentEle.previousElementSibling.className.indexOf(e.target.previousElementSibling.className)>=0||e.target.previousElementSibling.className.indexOf(n.currentEle.previousElementSibling.className)>=0){n.currentEle.previousElementSibling.classList.add("succeed"),e.target.previousElementSibling.classList.add("succeed");var i=n.currentEle,l=a(0,n.animationList.length-1),s=n.animationList[l],o=setTimeout(function(){i.parentElement.classList.add(s),e.target.parentElement.classList.add(s),clearTimeout(o)},1e3);c()}else var u=n.cleanList,g=setTimeout(function(){u.forEach(function(e){e()}),clearTimeout(g)},2e3);n.cleanList=[],n.currentEle=null}else n.currentEle=e.target},!1):n.stage.addEventListener("click",function(e){var t=e.target.className;if(t.indexOf("backStyle")>=0)if(t.indexOf("backRotate")<0&&(e.target.classList.add("backRotate"),e.target.previousElementSibling.classList.add("frontRotate"),n.cleanList.push(function(){e.target.classList.remove("backRotate"),e.target.previousElementSibling.classList.remove("frontRotate")}),r()),null!=n.currentEle){if(n.currentEle==e.target)return void console.log("self click");if(n.currentEle.previousElementSibling.className.indexOf(e.target.previousElementSibling.className)>=0||e.target.previousElementSibling.className.indexOf(n.currentEle.previousElementSibling.className)>=0){n.currentEle.previousElementSibling.classList.add("succeed"),e.target.previousElementSibling.classList.add("succeed");var i=n.currentEle,l=a(0,n.animationList.length-1),s=n.animationList[l],o=setTimeout(function(){i.parentElement.classList.add(s),e.target.parentElement.classList.add(s),clearTimeout(o)},1e3);c()}else var u=n.cleanList,g=setTimeout(function(){u.forEach(function(e){e()}),clearTimeout(g)},2e3);n.cleanList=[],n.currentEle=null}else n.currentEle=e.target},!1)}(window,document); } </script> </body> </html>
评论 (1 )
最新评论
js代码压缩过了?