jiandangbainian
/
jiandangbainian-new
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
8 Commits
1 Branch
0 Tags
57 MiB
 
 
 
Tree: c2e2c28408
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'c2e2c28408'
${ noResults }
jiandangbainian-new/game1.html

604 lines
18 KiB
Raw Blame History

<!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/game1.css" />
</head>
<style type="text/css">
.xr {
position: absolute;
width: 65px;
height: 65px;
top: 51%;
left: 62%;
z-index: 999;
/* animation: animatexr1 linear 2s; */
}
@keyframes animatexr1 {
from {
top: 51%;
left: 62%;
}
to {
top: 44%;
left: 42%;
}
}
.tips {
position: absolute;
z-index: 100;
width: 100%;
/* height: 100%; */
text-align: center;
line-height: 100%;
color: white !important;
font-size: .46rem !important;
top: 2.47rem;
}
</style>
<body>
<div id="wrap">
<div class="snowList"></div>
<div class="imgList">
<ul>
<li class="icon icon1" id="icon3" style="left:10%"><img src="img/game1/icon3.png" /></li>
<li class="icon icon2" id="icon2" style="left:28%"><img src="img/game1/icon2.png" /></li>
<li class="icon icon3" id="icon5" style="left:46%"><img src="img/game1/icon5.png" /></li>
<li class="icon icon4" id="icon1" style="left:64%"><img src="img/game1/icon1.png" /></li>
<li class="icon icon5" id="icon4" style="left:82%"><img src="img/game1/icon4.png" /></li>
<!--<li class="icon icon5" id="icon4" style="position:absolute;top:0%;left:82%;flex:0!important"><img src="img/game1/icon4.png" /></li>-->
</ul>
</div>
<div class="tipsNum"><img src="img/game1/firstIcon.png" /></div>
<!-- <div class="tipText">
<ul>
<li>请将下方关于党的英雄事迹</li>
<li>填<br />入<br />对<br />应<br />的<br />虚<br />线<br />框<br />中<br />！</li>
</ul>
</div> -->
<div class="titleIcon">
<ul>
<li><img src="img/game1/result.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>
<li><img src="img/game1/result.png" /></li>
</ul>
</div>
<div class="mapList">
<ul>
<li class="adr1">
<!--<p class="kuang"><img src="img/game1/Group 51.png"/></p>-->
<p class="jt1"><img src="img/game1/jt1.png" /></p>
<p class="dian"></p>
<p class="text">瑞金</p>
</li>
<img id="xr1" class="xr" style="display: none;" src="./img/game1/xiaoren.gif" alt="">
<img id="xr2" class="xr" style="display: none;transform:matrix(-1,0,0,1,0,0);"
src="./img/game1/xiaoren.gif" alt="">
<li class="adr2">
<p class="jt2"><img src="img/game1/jt2.png" /></p>
<p class="dian"></p>
<p class="text">遵义</p>
<p class="kuang kuang1" id="kuang1"><img src="img/game1/Group 51.png" /></p>
<p class="contText">中共中央政治局在贵州遵义 召开的独立自主地解决中国革命问题的一次极其重要的扩大会议。纠正博古、王明、李德等人“左”倾领导在军事指挥上的错误。</p>
</li>
<li class="adr3">
<p class="kuang" style="visibility: hidden;"><img src="img/game1/Group 51.png" /></p>
<p class="text">赤水河</p>
<p class="dian"></p>
<p class="jt3"><img src="img/game1/jt3.png" /></p>
</li>
<li class="adr4">
<p class="jt4"><img src="img/game1/jt4.png" /></p>
<p class="kuang kuang2" id="kuang2"><img src="img/game1/Group 51.png" /></p>
<p class="dian"></p>
<p class="text">金沙江</p>
<p class="contText">红军避敌锋芒、仅凭7只渡船在7天7夜间，2万多人的红军部队全部渡过金沙江 。红军摆脱了几十万敌军的围追堵截，取得了战略转移以来具有决定意义的胜利。</p>
</li>
<li class="adr5">
<p class="jt5"><img src="img/game1/jt5.png" /></p>
<p class="dian"></p>
<p class="text">泸定桥</p>
<p class="kuang kuang3" id="kuang3"><img src="img/game1/Group 51.png" /></p>
<p class="contText">中央红军部队，红四团战士在天下大雨的情况下，在崎岖陡峭的山路上跑步前进，终在5月29日凌晨6时许按时到达泸定桥西岸，并与东岸部队合围占领了泸定桥。</p>
</li>
<li class="adr6">
<p class="kuang kuang4" id="kuang4"><img src="img/game1/Group 51.png" /></p>
<p class="jt6"><img src="img/game1/jt6.png" /></p>
<p class="text">夹金山</p>
<p class="dian"></p>
<p class="contText">
红军在雪山战斗生活月之久。其间,除了要同凶残的敌人英勇作战外,还要克服重重困难,战胜极端恶劣的自然环境,爬过雪山,走过草地,实现战略转移。它既是长征精神的重要组成部分,又是长征精神的集中体现。
</p>
</li>
<li class="adr7">
<p class="kuang kuang5" id="kuang5"><img src="img/game1/Group 51.png" /></p>
<p class="jt7"><img src="img/game1/jt7.png" /></p>
<p class="text">松潘草地</p>
<p class="dian"></p>
<p class="contText">
在极端恶劣的环境下，红军官兵怀着共同的革命理想，发扬了令人感动的阶级友爱，没有垮掉，没有散掉，同甘共苦，以巨大的精神力量战胜了自然界的困难，终于在死神的威胁下夺路而出。</p>
</li>
<li class="adr8" style="display: flex;width: 2rem;justify-content: center;">
<p class="start"><img src="img/game1/star.png" /></p>
<p class="text">延安</p>
</li>
</ul>
</div>
<div class="mask">
</div>
<div class="tips" style="color: #333;
font-size: .26rem;">
<!--<p>请将下方关于党的英雄事迹,</p>-->
<p>请将下方关于长征的事迹,</p>
<p style="margin-top: .1rem;">拖拽至对应的虚线框中!</p>
</div>
<div class="shoushi"><img src="img/shoushi/1.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/suc1.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/suc1.png" /></p>
</div>
<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
<source src="img/audio/game1Bgm.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 src="js/zQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/snow.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);
//禁止微信内h5网页下拉
document.body.addEventListener('touchmove', function (e) {
e.preventDefault()
}, { passive: false });
}
var url = location.href.split('?')[1]
var audioState = url.split('=')[1];
if (audioState == 'true') {
audioAutoPlay('bgmAudio');
}
//手势隐藏
var count = 0;
var xrwydata = [
[{
'top': '55%',
'left': '54%'
}, {
'top': '44%',
'left': '42%'
}],
[{
'top': '45%',
'left': '37%'
}, {
'top': '57%',
'left': '35%'
}, {
'top': '52%',
'left': '29%'
}],
[{
'top': '37%',
'left': '24%'
}],
[{
'top': '24%',
'left': '23%'
}],
[{
'top': '9%',
'left': '31%'
}],
[{
'top': '-2%',
'left': '45%'
}]
] //小人位移
var maskState1 = true
$('.mask').on('touchstart', function () {
if (maskState1) {
fadeoutmask()
maskState1 = false
}
})
function fadeoutmask() {
$('.mask').fadeOut();
$('.shoushi').fadeOut();
$(".tips").fadeOut()
$("#xr1").css({
display: 'block'
})
xranimate()
}
//小人位移动画
function xranimate() {
for (var x = 0; x < xrwydata[count].length; x++) {
if (count > 2) {
$("#xr1").css({
display: 'none'
})
$("#xr2").css({
display: 'block',
top: xrwydata[count - 1][xrwydata[count - 1].length - 1].top,
left: xrwydata[count - 1][xrwydata[count - 1].length - 1].left
})
$("#xr2").animate({
top: xrwydata[count][x].top,
left: xrwydata[count][x].left
}, 2000)
} else {
$("#xr1").animate(xrwydata[count][x], count == 0 ? 2100 : 2000 / parseFloat(xrwydata[count].length))
}
}
}
$(".tips").on('touchstart', function () {
fadeoutmask()
$('.imgList ul').css('z-index', '0');
$('.xr').css('z-index', '0');
})
$('.shoushi').on('touchstart', function () {
fadeoutmask();
$('.imgList ul').css('z-index', '9999');
$('.xr').css('z-index', '999999')
})
//手势隐藏end
$('.imgList ul').animate({
'bottom': '0.4rem'
}, 1000)
$('.imgList ul').animate({
'bottom': '0.1rem'
}, 300)
var time = 0;
var timeLength = setInterval(function () {
// console.log(time)
time++;
}, 1000)
var showSate = false;
maskState()
function maskState() {
if (showSate) {
$('.imgIcon').animate({
'top': '0',
"right": '32%',
'width': '.98rem',
'height': '1.24rem'
}, 2000)
function yincang() {
$('.titleIcon ul li').eq(0).css({
'visibility': 'hidden'
})
}
setTimeout('yincang()', 2000)
}
}
$('.deepBtn').click(function () {
var url = location.href.split('?')[1]
console.log(url)
window.location.replace("game2.html?" + url)
})
$('.close').on('touchstart', function () {
$('.mask').fadeOut();
$('.success .sucImg div').fadeOut();
$('.success').css('z-index', '-2222')
$('.success .close').fadeOut();
$('.mapList li').css('z-index', '0')
$('.xr').css('z-index', '999999')
$('.imgList ul').css('z-index', '-1');
})
/* $('.adr1 .jt1').animate({
width:'2.48rem'
},1000) */
$(document).ready(function () {
$(".adr2 .jt2").css("display", "none");
$(".adr3").css("display", "none");
$(".adr4").css("display", "none");
$(".adr5").css("display", "none");
$(".adr6").css("display", "none");
$(".adr7").css("display", "none");
$(".adr8").css("display", "none");
})
var cssArr = [$(".adr2 .jt2").css("display", "block")];
var iconArr = [{
"top": "0%",
"left": "10%"
}, {
"top": "0%",
"left": "28%"
}, {
"top": "0%",
"left": "46%"
}, {
"top": "0%",
"left": "64%"
},
{
"top": "0%",
"left": "82%"
}
];
var trueArr = ["3", "2", "5", "1", "4"];
var img1State = false;
// $(".kuang1").addClass().siblings()
$(".kuang1").on('touchstart', function () {
console.log('点击')
if (img1State) {
$('.adr4 p.contText').css('display', 'none')
$('.adr5 p.contText').css('display', 'none')
$('.adr6 p.contText').css('display', 'none')
$('.adr7 p.contText').css('display', 'none')
$('.adr2 p.contText').slideToggle()
$('.adr2').css('z-index', '9999').siblings().css('z-index', '0')
}
})
$('.kuang2').on('touchstart', function () {
if (count >= 2) {
$('.adr2 p.contText').css('display', 'none')
$('.adr5 p.contText').css('display', 'none')
$('.adr6 p.contText').css('display', 'none')
$('.adr7 p.contText').css('display', 'none')
$('.adr4 p.contText').slideToggle()
$('.adr4').css('z-index', '9999').siblings().css('z-index', '0')
}
})
$('.kuang3').on('touchstart', function () {
if (count >= 3) {
$('.adr2 p.contText').css('display', 'none')
$('.adr4 p.contText').css('display', 'none')
$('.adr6 p.contText').css('display', 'none')
$('.adr7 p.contText').css('display', 'none')
$('.adr5 p.contText').slideToggle()
$('.adr5').css('z-index', '9999').siblings().css('z-index', '0')
}
})
$('.kuang4').on('touchstart', function () {
if (count >= 4) {
$('.adr4 p.contText').css('display', 'none')
$('.adr5 p.contText').css('display', 'none')
$('.adr2 p.contText').css('display', 'none')
$('.adr7 p.contText').css('display', 'none')
$('.adr6 p.contText').slideToggle()
$('.adr6').css('z-index', '9999').siblings().css('z-index', '0')
}
})
$('.kuang5').on('touchstart', function () {
if (count >= 5) {
$('.adr4 p.contText').css('display', 'none')
$('.adr5 p.contText').css('display', 'none')
$('.adr6 p.contText').css('display', 'none')
$('.adr2 p.contText').css('display', 'none')
$('.adr7 p.contText').slideToggle()
$('.adr7').css('z-index', '9999').siblings().css('z-index', '0')
}
})
//拖拽
var icond = $(".icon");
icond.each(function (index) {
$(this).on('touchstart', function (evt) {
var e = event || evt;
e.preventDefault(); //阻止其他事件
//要做的事情
$(".tipText").css("display", "none");
$(this).find('img').css({
'width': '90%',
'height': '90%'
})
}).on('touchmove', function (evt) {
var e = event || evt;
e.preventDefault(); //阻止其他事件
// 如果这个元素的位置内只有一个手指的话
//console.log(e.targetTouches)
//console.log(event.targetTouches[0].clientX+"/"+event.targetTouches[0].clientY+"/"+event.targetTouches[0].pageX+"/"+event.targetTouches[0].pageY)
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0]; // 把元素放在手指所在的位置
$(this).css("left", (touch.pageY - parseInt($(this).width()) / 2 + 'px'));
$(this).css("top", '-' + (touch.pageX - parseInt($(this).width()) / 2 + 'px'));
}
}).on('touchend', function (evt) {
$(this).find('img').css({
'width': '100%',
'height': '100%'
})
var e = event || evt;
e.preventDefault(); //阻止其他事件
//判断是否进入目标元素
var index = this.id.substring(this.id.length - 1, this.id.length)
if (index == (count + 1)) {
var tuozhuai = document.getElementById(this.id).getBoundingClientRect();
var mubiao = document.getElementById('kuang' + (count + 1)).getBoundingClientRect();
var x = tuozhuai.left + tuozhuai.width / 2;
var y = tuozhuai.bottom + tuozhuai.height / 2;
var xmin = mubiao.left;
var xmax = mubiao.left + mubiao.width;
var ymin = mubiao.bottom;
var ymax = mubiao.bottom + mubiao.height;
if (xmin <= x && x <= xmax && ymin <= y && y <= ymax) {
$(".icon" + (getArrayIndex(trueArr, index) + 1)).css("display", "none");
//地图变动
if (count == 0) {
img1State = true
$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon1.png");
$(".adr2 .jt2").css("display", "block")
$(".adr3").css("display", "block");
$(".adr4").css("display", "block");
$(".adr4 .jt4").css("display", "none")
} else if (count == 1) {
$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon2.png");
$(".adr4 .jt4").css("display", "block")
$(".adr5").css("display", "block");
$(".adr5 .jt5").css("display", "none")
} else if (count == 2) {
$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon3.png");
$(".adr5 .jt5").css("display", "block")
$(".adr6").css("display", "block");
$(".adr6 .jt6").css("display", "none")
$('.snowList').fadeIn(1000)
} else if (count == 3) {
$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon4.png");
$(".adr6 .jt6").css("display", "block")
$(".adr7").css("display", "block");
$(".adr7 .jt7").css("display", "none")
} else if (count == 4) {
$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon5.png");
$(".adr7 .jt7").css("display", "block")
$(".adr8").css("display", "flex");
$('.snowList').fadeOut(1000)
}
count++;
if (count == 5) {
$('.imgList ul').css('z-index', '-1');
// alert("游戏结束");
// setTimeout('yincang()', 2000)
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) + '秒')
}
setTimeout(function () {
$('.mask').fadeIn();
$('.success').fadeIn();
$('.imgIcon').fadeIn();
$('.deepBtn').fadeIn()
showSate = true;
maskState()
$('.xr').css('z-index', '0')
$('.mapList li').css('z-index', '-9999')
}, 1000)
}
//错误
// var trueAudio = document.getElementById('trueAudio');
// trueAudio.play();
audioAutoPlay('trueAudio');
xranimate()
// alert('音频')
} else {
$(this).css("top", iconArr[getArrayIndex(trueArr, index)].top);
$(this).css("left", iconArr[getArrayIndex(trueArr, index)].left);
}
} else {
$(this).css("top", iconArr[getArrayIndex(trueArr, index)].top);
$(this).css("left", iconArr[getArrayIndex(trueArr, index)].left);
//错误提示音
// var falseAudio = document.getElementById('falseAudio');
// falseAudio.play();
audioAutoPlay('falseAudio');
// alert('音频')
}
})
});
$('.icon').on('onmove');
function getArrayIndex(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return i;
}
}
return -1;
}
</script>