You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
479 lines
13 KiB
479 lines
13 KiB
<!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>
|