|
|
<!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.href = "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>
|
