|
|
<!DOCTYPE html><html>
<head> <meta charset="utf-8" /> <title>建党百年</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/comment.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/game3.css" /> </head> <style type="text/css"> .game3tips { position: absolute; z-index: 100; width: 100%; /* height: 100%; */ text-align: center; line-height: 100%; color: white!important; font-size: .46rem!important; top: 3.7rem; } </style>
<body>
<div id="wrap"> <div class="tipsNum"><img src="img/game3/firstIcon.png" /></div> <div class="titleIcon"> <ul> <li><img src="img/success/suc1.png" /></li> <li><img src="img/success/suc2.png" /></li> <li><img src="img/game1/result.png" /></li> <li><img src="img/game1/result.png" /></li> <li><img src="img/game1/result.png" /></li> </ul> </div> <p class="game3tips"> 请翻转图片将上方党的重要人物与下方名字对应！ </p> <div class="cont_wrap"> <ul class="faceList">
</ul> </div> <div class="middleImg"> <ul> <li> <img src="img/game3/fan/kuang.png" /> </li>
</ul>
<ul> <li> <img src="img/game3/fan/kuang.png" /> </li>
</ul> <ul> <li> <img src="img/game3/fan/kuang.png" /> </li>
</ul> <ul> <li> <img src="img/game3/fan/kuang.png" /> </li>
</ul> <ul> <li> <img src="img/game3/fan/kuang.png" /> </li>
</ul>
</div>
<!--成功--> <div class="mask"></div> <div class="shoushi"><img src="img/shoushi/3.gif" /></div>
<div class="success"> <div class="sucImg"> <div> <p class="text">恭喜获得第三枚徽章！</p> <p class="text textTime"></p> <p class="imgIcons"><img src="img/success/suc33.png" /></p> </div> </div>
<div class="close"><img src="img/close.png" /></div>
</div> <div class="deepBtn">进入第四关</div> <p class="imgIcon"><img src="img/success/suc33.png" /></p> </div> <audio id="bgmAudio" hidden="true" autoplay="autoplay"> <source src="img/audio/game3Bgm.mp3" type="audio/mp3" /> <!--您的浏览器不支持 audio 标签。--> </audio> <audio id="trueAudio" hidden="true"> <source src="img/true.mp3" type="audio/mp3" /> </audio> <audio id="falseAudio" hidden="true"> <source src="img/false1.mp3" type="audio/mp3" /> </audio> </body>
</html><script src="js/common.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> function audioAutoPlay(id) { var audio = document.getElementById(id), play = function () { audio.play(); document.removeEventListener("touchstart", play, false); }; audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { play(); }, false); document.addEventListener("touchstart", play, false); } var url = location.href.split('?')[1] var audioState = url.split('=')[1]; if (audioState == 'true') { audioAutoPlay('bgmAudio'); } var imgArr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var nameArr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var trueArr = [];
var tuArr = [ "img/game3/fan/img11.png", "img/game3/fan/img22.png", "img/game3/fan/img33.png", "img/game3/fan/img44.png", "img/game3/fan/img55.png", "img/game3/fan/img66.png", "img/game3/fan/img77.png", "img/game3/fan/img88.png", "img/game3/fan/img99.png"
] var textArr = [ "img/game3/fan/text11.png", "img/game3/fan/text22.png", "img/game3/fan/text33.png", "img/game3/fan/text44.png", "img/game3/fan/text55.png", "img/game3/fan/text66.png", "img/game3/fan/text77.png", "img/game3/fan/text88.png", "img/game3/fan/text99.png" ] var wordArr = [ '彭德怀', '朱德', '贺龙', '聂荣臻', '刘伯承', '陈毅', '罗荣恒', '徐向前', '叶剑英' ] randArr(imgArr); var newArr = imgArr.slice(0, 5); var faceList = ''; // var textList=''; for(var i = 0; i <= 4; i++) { faceList += '<li class="faceItem" ><p class="backImg"><img data-id=' + newArr[i] + ' src="img/game3/fan/backImg.png" /></p><p class="fontImg"><img src="' + tuArr[newArr[i]] + '" /></p></li>' } randArr(newArr) trueArr = newArr; console.log(trueArr) for(var i = 0; i <= 4; i++) { faceList += '<li class="faceItem last" ><p class="backImg"><img data-id=' + newArr[i] + ' src="img/game3/fan/backText.png" /></p><p class="fontImg"><img src="' + textArr[newArr[i]] + '" /></p></li>' // trueArr.push(newArr[i]) } $('.faceList').html(faceList) //手势隐藏 var maskState1 = true $('.mask').on('touchstart', function() { if(maskState1) { fadeoutmask() maskState1 = false } })
$('.game3tips').on('touchstart', function() { fadeoutmask() })
function fadeoutmask() { $('.mask').fadeOut(); $('.shoushi').fadeOut(); $(".game3tips").fadeOut() } $('.shoushi').on('touchstart', function() { fadeoutmask() }) //手势隐藏end
var time = 0; var timeLength = setInterval(function() { time++; }, 1000) // var trueArr = [7, 9, 6, 8, 5]; var start = -1; var end = null; var trueIndex = null; var count = 0; var clickIndex = []; var newTrueArr = []; var icond = $(".faceItem"); icond.each(function(index) { $(this).on('touchstart', function(evt) { var e = event || evt; e.preventDefault(); //阻止其他事件 // e.target.dataset.id $('.guize span').fadeOut() }).on('touchmove', function(evt) { var e = event || evt; e.preventDefault(); //阻止其他事件 }).on('touchend', function(evt) { var e = event || evt; console.log(e) e.preventDefault(); //阻止其他事件 if(clickIndex.indexOf($(this).index()) == -1) { $(this).find('p.backImg').addClass('backShow') $(this).find('p.fontImg').addClass('fontShow') clickIndex.push($(this).index()); newTrueArr.push(e.target.dataset.id)
// start = $(this).index();
if(start == -1) { start = $(this).index(); } else if($(this).index() <= 4 && start <= 4) { $('.faceList li').eq(start).find('p.backImg').removeClass('backShow'); $('.faceList li').eq(start).find('p.fontImg').removeClass('fontShow'); clickIndex.splice(getArrayIndex(clickIndex, start), 1); start = $(this).index(); } else if($(this).index() > 4 && start > 4) { $('.faceList li').eq(start).find('p.backImg').removeClass('backShow'); $('.faceList li').eq(start).find('p.fontImg').removeClass('fontShow'); clickIndex.splice(getArrayIndex(clickIndex, start), 1); start = $(this).index(); } else if(end == null) { end = $(this).index(); trueIndex = e.target.dataset.id; if(newTrueArr.indexOf(e.target.dataset.id) == -1) { newTrueArr.push(e.target.dataset.id) } console.log(newTrueArr + 'newTrueArr') //判断是否是一对 if(newTrueArr[newTrueArr.length - 1] == newTrueArr[newTrueArr.length - 2]) { var state = true; newTrueArr = []; } else { var state = false; newTrueArr = [];
} if(state) { console.log(index) console.log(clickIndex); start = -1; newTrueArr = []; end = null; count++;
if(count == 1) { var cont1 = ''; setTimeout(function() {
$('.faceList li').eq(clickIndex[0]).find('img').fadeOut(1000); $('.faceList li').eq(clickIndex[1]).find('img').fadeOut(1000); cont1 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>' $('.middleImg ul').eq(count - 1).html(cont1); $('.middleImg ul').eq(count - 1).find('li').css('display', 'none') }, 1000); setTimeout(function() { $('.middleImg ul').eq(count - 1).find('li').fadeIn(1000) }, 1000); } if(count == 2) { var cont2 = ''; setTimeout(function() { $('.faceList li').eq(clickIndex[2]).find('img').fadeOut(1000) $('.faceList li').eq(clickIndex[3]).find('img').fadeOut(1000) cont2 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>' $('.middleImg ul').eq(count - 1).html(cont2); $('.middleImg ul').eq(count - 1).find('li').css('display', 'none') }, 1000); setTimeout(function() { $('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide() }, 1000); } if(count == 3) { var cont3 = '';
setTimeout(function() { $('.faceList li').eq(clickIndex[4]).find('img').fadeOut(1000) $('.faceList li').eq(clickIndex[5]).find('img').fadeOut(1000)
cont3 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>' $('.middleImg ul').eq(count - 1).html(cont3); $('.middleImg ul').eq(count - 1).find('li').css('display', 'none') }, 1000); setTimeout(function() { $('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide() }, 1000); } if(count == 4) { var cont4 = '';
setTimeout(function() { $('.faceList li').eq(clickIndex[6]).find('img').fadeOut(1000) $('.faceList li').eq(clickIndex[7]).find('img').fadeOut(1000)
cont4 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>' $('.middleImg ul').eq(count - 1).html(cont4); $('.middleImg ul').eq(count - 1).find('li').css('display', 'none') }, 1000); setTimeout(function() { $('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide() }, 1000); } var trueAudio = document.getElementById('trueAudio'); trueAudio.play(); audioAutoPlay('trueAudio') if(count == 5) { var cont5 = '';
setTimeout(function() { $('.faceList li').eq(clickIndex[8]).find('img').fadeOut(1000) $('.faceList li').eq(clickIndex[9]).find('img').fadeOut(1000)
cont5 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>' $('.middleImg ul').eq(count - 1).html(cont5); $('.middleImg ul').eq(count - 1).find('li').css('display', 'none') }, 1000); setTimeout(function() { $('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide() }, 1000);
setTimeout(function() { success(); }, 3000) } } else { //恢复原样 var startIndex = start; var endIndex = end; newTrueArr = []; setTimeout(function() { $('.faceList li').eq(startIndex).find('p.backImg').removeClass( 'backShow'); $('.faceList li').eq(startIndex).find('p.fontImg').removeClass( 'fontShow'); clickIndex.splice(getArrayIndex(clickIndex, startIndex), 1); $('.faceList li').eq(endIndex).find('p.backImg').removeClass( 'backShow'); $('.faceList li').eq(endIndex).find('p.fontImg').removeClass( 'fontShow'); clickIndex.splice(getArrayIndex(clickIndex, endIndex), 1); }, 500) start = -1; end = null; //错误提示音 var falseAudio = document.getElementById('falseAudio'); falseAudio.play(); audioAutoPlay('falseAudio') } } } }) })
function success() { clearInterval(timeLength); // console.log(time) if(time > 3600) { var houre = parseInt(time / 3600); if(time % 3600 > 60) { var min = parseInt((time % 3600) / 60) } else { var min = 0; } var sec = (time % 3600) % 60 $('.textTime').text('用时' + houre + '时' + min + '分' + sec + '秒')
} else if(time > 60 && time < 3600) { $('.textTime').text('用时' + parseInt(time / 60) + '分' + (time % 60) + '秒') } else { $('.textTime').text('用时' + (time % 60) + '秒')
}
var showSate = false; maskState() $('.cont_wrap').css({ 'position': 'absolute', 'z-index': '-9999' }) $('.mask').fadeIn(); $('.success').fadeIn(); $('.imgIcon').fadeIn(); $('.lines').css('z-index', '-1') $('#trueXian').css('display', 'none') $('.deepBtn').fadeIn()
showSate = true; maskState()
function maskState() { if(showSate) { $('.imgIcon').animate({
'top': '0', "right": '16%', 'width': '.98rem', 'height': '1.24rem', }, 2000)
function yincang() { $('.titleIcon ul li').eq(1).css({ 'visibility': 'hidden' }) } setTimeout('yincang()', 2000)
} }
$('.deepBtn').click(function() { var url = location.href.split('?')[1]; window.location.href = "game4.html?" + url }) $('.close').on('touchstart', function() { $('.mask').fadeOut(); $('.success .sucImg div').fadeOut(); $('.success .close').fadeOut(); }) }
function randArr(arr) { let i = arr.length; while(i) { let j = Math.floor(Math.random() * i--); [arr[j], arr[i]] = [arr[i], arr[j]]; } return arr; }
function getArrayIndex(arr, obj) { var i = arr.length; while(i--) { if(arr[i] === obj) { return i; } } return -1; }</script>
|
