|
|
<!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/game2.css?vs=1.1.3" /> </head> <style type="text/css"> .game2tips { position: absolute; z-index: 100; width: 100%; /* height: 100%; */ text-align: center; line-height: 100%; color: white!important; font-size: .46rem!important; top: 5.7rem; } </style>
<body>
<div id="wrap"> <div class="tipsNum"><img src="img/game2/firstIcon.png" /></div> <div class="titleIcon"> <ul> <li><img src="img/success/suc1.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="cont_wrap"> <div class="tipList"> <ul id="start"> <!--<li class="start" id="start1">
<p>1935年1月</p> </li>--> <!--<li class="start" id="start2">
<p>1935年5月</p> </li> <li class="start" id="start3"> <p>1935年1月</p> </li> <li class="start" id="start4"> <p>1935年6月</p> </li> <li class="start" id="start5"> <p>1935年9月</p> </li>--> </ul> </div> <div class="posTip"> <p></p>
</div> <div class="contList"> <ul> <!--<li class="end" id="end1">
<p class="tipImg"></p>
<p class="titleText 1" style="width: .97rem;">翻雪山</p> <p class="contImg"><img src="img/game2/icon4.png" /></p> <p class="contText">红军在雪山战斗生活月之久。其间,除了要同凶残的敌人英勇作战外,还要克服重重困难,战胜极端恶劣的自然环境,爬过雪山,走过草地,实现战略转移。它既是长征精神的重要组成部分,又是长征精神的集中体现。</p>
</li> <li class="end li5" id="end2"> <p class="tipImg"></p>
<p class="titleText 2" style="width: 1.37rem;">四渡赤水河</p> <p class="contImg"><img src="img/game2/icon3.png" /></p> <p class="contText">中央红军三个月四渡赤水，转战川贵滇三省，巧妙地穿插于国民党军重兵集团围剿之间，不断创造战机，牢牢地掌握战场的主动权，是红军长征史上以少胜多，变被动为主动的光辉战例。</p>
</li> <li class="end" id="end3"> <p class="tipImg"></p> <p class="titleText 3" style="width: 1.16rem;">遵义会议</p> <p class="contImg"><img src="img/game2/icon1.png" /></p> <p class="contText">中共中央政治局在贵州遵义 召开的独立自主地解决中国革命问题的一次极其重要的扩大会议。纠正博古、王明、李德等人“左”倾领导在军事指挥上的错误。</p>
</li> <li class="end" id="end4"> <p class="tipImg"></p>
<p class="titleText 4" style="width: 1.38rem;">延安大会师</p> <p class="contImg"><img src="img/game2/icon5.png" /></p> <p class="contText">一次次的绝地逢生当4支红色大军在70年前的那个十月胜利会师的时候，中国共产党所领导的这些红色战士，不仅谱就了长征这样举世罕见的伟大史诗，而且铸就了无与伦比的精神丰碑。</p>
</li> <li class="end" id="end5"> <p class="tipImg"></p> <p class="titleText 5" style="width: 1.37rem;">巧渡金沙江</p> <p class="contImg"><img src="img/game2/icon2.png" /></p> <p class="contText">红军避敌锋芒、仅凭7只渡船在7天7夜间，2万多人的红军部队全部渡过金沙江 。红军摆脱了几十万敌军的围追堵截，取得了战略转移以来具有决定意义的胜利。</p>
</li>--> </ul> </div> </div> <!--成功--> <div class="mask"></div> <div class="game2tips"> 请将上方的时间与下方党的重大战役连接！ </div> <div class="shoushi"><img src="img/shoushi/2.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/suc2.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/suc2.png" /></p> </div> <audio id="bgmAudio" hidden="true" autoplay="autoplay"> <source src="img/audio/game2Bgm.mp3" type="audio/mp3" /> </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> <div id="trueXian"></div> <div id="xian"></div> </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); //禁止微信内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 maskState1 = true $('.mask').on('touchstart', function() { if(maskState1) { fadeoutmask() maskState1 = false } }) $('.shoushi').on('touchstart', function() { fadeoutmask() })
function fadeoutmask() { $('.mask').fadeOut(); $('.shoushi').fadeOut(); $(".game2tips").fadeOut() } $('.game2tips').on('touchstart', function() { fadeoutmask() })
//手势隐藏end
var time = 0; var timeLength = setInterval(function() { // console.log(time) time++; }, 1000)
//正确答案顺序 var trueArr = [1, 2, 3, 4, 5]; //题目数组 var timeArr = [ '1948年11月06日', '1948年06月17日', '1948年09月12日', '1946年07月13日', '1948年11月29日', '1947年05月13日', '1948年06月11日', '1948年09月16日' ]; var oldTimeArr = [ '1948年11月06日', '1948年06月17日', '1948年09月12日', '1946年07月13日', '1948年11月29日', '1947年05月13日', '1948年06月11日', '1948年09月16日' ]; //答案数组 var writeArr = [ '淮海战役实现了把国民党主力部队尽可能多地消灭在长江以北的战略构想，解放了华东、中原的广大地区，使敌长江防线和统治中心南京、上海都处于我军的直接威胁之下，取得了解放战争的决定性胜利。', '豫东战役是解放战争以来，我军首次在中原地区集中兵力与敌主力进行的一次大规模兵团作战。毛主席说:“解放战争已经过了山坳子!”。', '自1945年8月我军抽调主力欲控制东北与敌作战三年以来的一次总决战。该战役一举歼灭了国民党在关外的全部主力队伍，解放了东北全境。战役规模之大，歼敌数量之众，仅次于淮海战役。', '华中野战军以3万多人的兵力对付国民党军12万余人，七战七捷，歼敌数量达到我军参战兵力总数的1.76倍，首创解放战争以来一次战役歼敌之多的记录，也创造了现代战争史上的一个奇迹。', '平津战役是解放战争中的三大决战之一，歼敌数量排名第二，和平谈判的方式也处理得非常圆满，我军伤亡人数最少，实属罕见。', '孟良崮战役是解放战争时期，陈毅、粟裕指挥，在山东省临沂市蒙阴县东南孟良崮地区对国民革命军整编第74师进行的进攻作战。该战役一举扭转了华东战局，是解放战争由战略防御转为战略进攻的重要转折点。', '晋中战役是解放战争中一场大规模运动战、速决战、歼灭战的典范之作，徐向前仅用6万余人的兵力，在40天的时间里歼灭阎锡山部10万之众，战术运用灵活机动，是我军以少胜多、以弱胜强的光辉战例。', '济南战役是国、共的第一次大诀战序幕。济南战役是解放战争时期我军进行的一次规模最大的攻城打援战例，超过了敌济南守军和可能增援敌之总数(约28万人)，第一次实现了华东战场我军兵力较之敌军占优势。' ];
//标题数组 var titleArr = [ '淮海战役', '豫东战役', '辽沈战役', '苏中战役', '平津战役', '孟良崮战役', '晋中战役', '济南战役' ]; //图片数组 var imgArr = [ 'img/game2/icon1-1.png', 'img/game2/icon2-1.png', 'img/game2/icon3-1.png', 'img/game2/icon4-1.png', 'img/game2/icon5-1.png', 'img/game2/icon6-1.png', 'img/game2/icon7-1.png', 'img/game2/icon8-1.png', ]; //打乱题目 randArr(timeArr); var se = timeArr; //打乱答案顺序 randArr(trueArr); //展示题目 var timu = ''; var newTimeArr = timeArr.slice(0, 5) function timedata(val) { var timeData = [] for (var x = 0; x < val.length; x++) { var year = val[x].split('')[0] + val[x].split('')[1] + val[x].split('')[2] + val[x].split('')[3]; var month = val[x].split('')[5] + val[x].split('')[6]; var day = val[x].split('')[08] + val[x].split('')[9]; var strtime = year + month + day timeData.push(strtime) } return timeData } function insertStr(soure, start, newStr) { return soure.slice(0, start) + newStr + soure.slice(start); } function biaozhun(val) { var biaozhuntime = val.sort() var aaa = [] for (var x = 0; x < biaozhuntime.length; x++) { var a = insertStr(biaozhuntime[x], 4, '年') a = insertStr(a, 7, '月') a = insertStr(a, 10, '日') aaa.push(a) } return aaa } var newTimeArr = biaozhun(timedata(newTimeArr)) console.log(newTimeArr) console.log(timeArr) for(var i = 0; i < 5; i++) { // console.log('22',timeArr.indexOf(newTimeArr[i])) //取timeArr前五个元素 timu += '<li class="start" id="start' + (i + 1) + '" data-true='+timeArr.indexOf(newTimeArr[i])+'><p>' + newTimeArr[i] + '</p></li>' } $('#start').html(timu)
//展示答案 // var img=''; // var title=''; var cont = ''; for(var i = 0; i < 5; i++) { console.log("111111",getArrayIndex(trueArr, i + 1)) //按照展示顺序进行相对位置的答案计算 // contText+=writeArr[getArrayIndex(oldTimeArr, timeArr[trueArr[i] - 1])]; cont += '<li class="end" id="end' + (i + 1) + '" data-true='+getArrayIndex(trueArr, i + 1)+'><p class="tipImg"></p>' + '<p class="titleText 5" style="width: 1.37rem;">' + titleArr[getArrayIndex(oldTimeArr, timeArr[getArrayIndex(trueArr, i + 1)])] + '</p>' + '<p class="contImg"><img src="' + imgArr[getArrayIndex(oldTimeArr, timeArr[getArrayIndex(trueArr, i + 1)])] + '" /></p>' + '<p class="contText">' + writeArr[getArrayIndex(oldTimeArr, timeArr[getArrayIndex(trueArr, i + 1)])] + '</p>' + '</li>'
} $('.contList ul').html(cont) // console.log(contText)
var firstPoint = null; //第一次点击的坐标 var secondPoint = null; //事件坐标 var startIndex = null; var endIndex = null; var shubiaoD = null; // var trueArr = [3, 5, 2, 1, 4]; var clickArr = []; var endArr = []; click(); newstarindex=null newendindex=null var count = 10;
function click() { $('#start li').on('touchstart', function(evt) { newstarindex=$(this).attr("data-true") $('.posTip p').fadeOut(500) // console.log("按下") var e = event || evt; // e.preventDefault(); //阻止其他事件 //要做的事情 for(var i = 1; i <= 5; i++) { if($.contains($("#start" + i)[0], e.target) || $("#start" + i)[0] == e.target) { startIndex = i - 1; if(clickArr.indexOf(startIndex) == -1) { $('.tipList li').eq(i - 1).removeClass('active') var kaishi = document.getElementById("start" + i).getBoundingClientRect(); } else { startIndex = null;
} } } if(kaishi) { $('.tipList li').eq(startIndex).addClass('active') firstPoint = {}; var x = document.documentElement.clientWidth - document.getElementById("start" + (startIndex + 1)).offsetTop - document.getElementById("start" + (startIndex + 1)).offsetHeight + 8; var y = document.getElementById("start" + (startIndex + 1)).offsetLeft + document.getElementById("start" + (startIndex + 1)).offsetWidth / 2;
firstPoint.xPoint = x; firstPoint.YPoint = y; } }).on('touchmove', function(evt) { // console.log("挪动") var e = event || evt; e.preventDefault(); e.stopPropagation(); var touch = e.targetTouches[0]; shubiaoD = touch; secondPoint = {}; secondPoint.xPoint = touch.pageX; secondPoint.YPoint = touch.pageY; if(firstPoint !== null && secondPoint !== null) { let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.YPoint, secondPoint.xPoint, secondPoint.YPoint ); let bodyDiv = document.getElementById("xian"); if(bodyDiv.lastElementChild) { // bodyDiv.lastElementChild.style.display='none'; bodyDiv.lastElementChild.remove(); } // 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来 let lineHtmlStr = `<div id="` + count + `" class="lines" style="position:absolute;border-top: 1px solid red;width:${lineLength}px;top:${firstPoint.YPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 50%;z-index:1;"></div>`;
count++; // 添加到body 后面 bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; } for(var i = 1; i <= 5; i++) { var leftMin = document.getElementById("end" + i).offsetLeft; var leftMax = document.getElementById("end" + i).offsetLeft + document.getElementById("end" + i).offsetWidth; var bottomMin = document.documentElement.clientWidth - document.getElementById("end" + i).offsetTop - document.getElementById("end" + i).offsetHeight; var bottomMax = document.documentElement.clientWidth - document.getElementById("end" + i).offsetTop; if(leftMin <= shubiaoD.clientY && shubiaoD.clientY <= leftMax && bottomMin <= shubiaoD.clientX && shubiaoD.clientX <= bottomMax) { if(startIndex || startIndex == 0) { if(endArr.indexOf(i - 1) == -1) { $('.contList li').eq(i - 1).addClass('active') } } } else { if(endArr.indexOf(i - 1) == -1) { $('.contList li').eq(i - 1).removeClass('active') } } } }).on('touchend', function(evt) { // console.log("松开") var e = event || evt; // e.preventDefault(); //阻止其他事件 if(firstPoint !== null) { if(shubiaoD) { for(var i = 1; i <= 5; i++) { var leftMin = document.getElementById("end" + i).offsetLeft; var leftMax = document.getElementById("end" + i).offsetLeft + document.getElementById("end" + i).offsetWidth; var bottomMin = document.documentElement.clientWidth - document.getElementById("end" + i).offsetTop - document.getElementById("end" + i).offsetHeight; var bottomMax = document.documentElement.clientWidth - document.getElementById("end" + i).offsetTop; if(leftMin <= shubiaoD.clientY && shubiaoD.clientY <= leftMax && bottomMin <= shubiaoD.clientX && shubiaoD.clientX <= bottomMax) { endIndex = i - 1; var jieshu = document.getElementById("end" + i).getBoundingClientRect(); newendindex=$('#end'+i).attr("data-true") } } } } if(newstarindex==newendindex){ // if(firstPoint !== null && endIndex == trueArr[startIndex] - 1) { var trueAudio = document.getElementById('trueAudio'); trueAudio.play(); audioAutoPlay('trueAudio') clickArr.push(startIndex); endArr.push(endIndex); // $('.contList li').eq(endIndex).css('height','3.6rem') // $('.contList li').eq(endIndex).animate({'height':'3.6rem'},1000) $('.contList li').eq(endIndex).css('height', '3.6rem') $('.contList li').eq(endIndex).find('p.contText').slideDown(1000) //生成线条 secondPoint = {}; var endx = document.documentElement.clientWidth - document.getElementById("end" + (endIndex + 1)).offsetTop + 8; var endy = document.getElementById("end" + (endIndex + 1)).offsetLeft + document.getElementById("end" + (endIndex + 1)).offsetWidth / 2;
secondPoint.xPoint = endx; secondPoint.YPoint = endy; if(firstPoint !== null && secondPoint !== null) { let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.YPoint, secondPoint.xPoint, secondPoint.YPoint ); let bodyDiv = document.getElementById("xian"); if(bodyDiv.lastElementChild) { // bodyDiv.lastElementChild.style.display='none'; bodyDiv.lastElementChild.remove(); } // 设置一个div 宽度为 两点之间的距离，并且以 transform-origin: 0 50% 为圆心旋转，角度已经算出来 let lineHtmlStr = `<div id="` + count + `" style="position:absolute;border-top: 1px solid red;width:${lineLength}px;top:${firstPoint.YPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 50%;"></div>`;
count++; // 添加到body 后面 bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; }
let bodyDiv = document.getElementById("xian"); let trueBodyDiv = document.getElementById("trueXian"); // console.log(bodyDiv.lastElementChild) trueBodyDiv.appendChild(bodyDiv.lastElementChild); // bodyDiv.lastElementChild.style.display='none'; if(bodyDiv.lastElementChild) { bodyDiv.lastElementChild.remove();
} firstPoint = null; secondPoint = null; startIndex = null; endIndex = null; newstarindex = null; newendindex = null; if(clickArr.length == 5) { clearInterval(timeLength); setTimeout('win()', 2000)
} } else { //错误 if(startIndex || startIndex == 0) { $('.tipList li').eq(startIndex).removeClass('active') var falseAudio = document.getElementById('falseAudio'); falseAudio.play(); audioAutoPlay('falseAudio') } $('.contList li').eq(endIndex).removeClass('active') let bodyDiv = document.getElementById("xian"); if(bodyDiv.lastElementChild) { // bodyDiv.lastElementChild.style.display='none'; bodyDiv.lastElementChild.remove(); } firstPoint = null; secondPoint = null; startIndex = null; endIndex = null; newstarindex=null newendindex=null } }) $(document).on('onmove'); }
// 计算连线 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.YPoint - secondPoint.YPoint, 2) ); return line; }
// 计算角度 // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if(x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if(x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if(x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if(x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if(x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if(x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if(x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if(x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; }
function win() { 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() $('.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": '24%', '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 = "game3.html?" + url }) $('.close').on('touchstart', function() { $('.mask').fadeOut(); $('.success .sucImg div').fadeOut(); $('.success .close').fadeOut(); $('#trueXian').css('display', 'block') }) }
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>
|
