<!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" loop="true">
<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.replace("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>