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.

603 lines
18 KiB

3 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>建党百年</title>
  6. <meta name="keywords" content="keyword1,keyword2,keyword3">
  7. <meta name="description" content="this is my page">
  8. <meta name="content-type" content="text/html; charset=UTF-8">
  9. <meta name="viewport"
  10. content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  11. <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
  12. <script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
  13. <link rel="stylesheet" type="text/css" href="css/common.css" />
  14. <link rel="stylesheet" type="text/css" href="css/game1.css" />
  15. </head>
  16. <style type="text/css">
  17. .xr {
  18. position: absolute;
  19. width: 65px;
  20. height: 65px;
  21. top: 51%;
  22. left: 62%;
  23. z-index: 999;
  24. /* animation: animatexr1 linear 2s; */
  25. }
  26. @keyframes animatexr1 {
  27. from {
  28. top: 51%;
  29. left: 62%;
  30. }
  31. to {
  32. top: 44%;
  33. left: 42%;
  34. }
  35. }
  36. .tips {
  37. position: absolute;
  38. z-index: 100;
  39. width: 100%;
  40. /* height: 100%; */
  41. text-align: center;
  42. line-height: 100%;
  43. color: white !important;
  44. font-size: .46rem !important;
  45. top: 2.47rem;
  46. }
  47. </style>
  48. <body>
  49. <div id="wrap">
  50. <div class="snowList"></div>
  51. <div class="imgList">
  52. <ul>
  53. <li class="icon icon1" id="icon3" style="left:10%"><img src="img/game1/icon3.png" /></li>
  54. <li class="icon icon2" id="icon2" style="left:28%"><img src="img/game1/icon2.png" /></li>
  55. <li class="icon icon3" id="icon5" style="left:46%"><img src="img/game1/icon5.png" /></li>
  56. <li class="icon icon4" id="icon1" style="left:64%"><img src="img/game1/icon1.png" /></li>
  57. <li class="icon icon5" id="icon4" style="left:82%"><img src="img/game1/icon4.png" /></li>
  58. <!--<li class="icon icon5" id="icon4" style="position:absolute;top:0%;left:82%;flex:0!important"><img src="img/game1/icon4.png" /></li>-->
  59. </ul>
  60. </div>
  61. <div class="tipsNum"><img src="img/game1/firstIcon.png" /></div>
  62. <!-- <div class="tipText">
  63. <ul>
  64. <li>请将下方关于党的英雄事迹</li>
  65. <li><br /><br /><br /><br /><br /><br />线<br /><br /><br /></li>
  66. </ul>
  67. </div> -->
  68. <div class="titleIcon">
  69. <ul>
  70. <li><img src="img/game1/result.png" /></li>
  71. <li><img src="img/game1/result.png" /></li>
  72. <li><img src="img/game1/result.png" /></li>
  73. <li><img src="img/game1/result.png" /></li>
  74. <li><img src="img/game1/result.png" /></li>
  75. </ul>
  76. </div>
  77. <div class="mapList">
  78. <ul>
  79. <li class="adr1">
  80. <!--<p class="kuang"><img src="img/game1/Group 51.png"/></p>-->
  81. <p class="jt1"><img src="img/game1/jt1.png" /></p>
  82. <p class="dian"></p>
  83. <p class="text">瑞金</p>
  84. </li>
  85. <img id="xr1" class="xr" style="display: none;" src="./img/game1/xiaoren.gif" alt="">
  86. <img id="xr2" class="xr" style="display: none;transform:matrix(-1,0,0,1,0,0);"
  87. src="./img/game1/xiaoren.gif" alt="">
  88. <li class="adr2">
  89. <p class="jt2"><img src="img/game1/jt2.png" /></p>
  90. <p class="dian"></p>
  91. <p class="text">遵义</p>
  92. <p class="kuang kuang1" id="kuang1"><img src="img/game1/Group 51.png" /></p>
  93. <p class="contText">中共中央政治局在贵州遵义 召开的独立自主地解决中国革命问题的一次极其重要的扩大会议。纠正博古、王明、李德等人“左”倾领导在军事指挥上的错误。</p>
  94. </li>
  95. <li class="adr3">
  96. <p class="kuang" style="visibility: hidden;"><img src="img/game1/Group 51.png" /></p>
  97. <p class="text">赤水河</p>
  98. <p class="dian"></p>
  99. <p class="jt3"><img src="img/game1/jt3.png" /></p>
  100. </li>
  101. <li class="adr4">
  102. <p class="jt4"><img src="img/game1/jt4.png" /></p>
  103. <p class="kuang kuang2" id="kuang2"><img src="img/game1/Group 51.png" /></p>
  104. <p class="dian"></p>
  105. <p class="text">金沙江</p>
  106. <p class="contText">红军避敌锋芒、仅凭7只渡船在7天7夜间,2万多人的红军部队全部渡过金沙江 。红军摆脱了几十万敌军的围追堵截,取得了战略转移以来具有决定意义的胜利。</p>
  107. </li>
  108. <li class="adr5">
  109. <p class="jt5"><img src="img/game1/jt5.png" /></p>
  110. <p class="dian"></p>
  111. <p class="text">泸定桥</p>
  112. <p class="kuang kuang3" id="kuang3"><img src="img/game1/Group 51.png" /></p>
  113. <p class="contText">中央红军部队,红四团战士在天下大雨的情况下,在崎岖陡峭的山路上跑步前进,终在5月29日凌晨6时许按时到达泸定桥西岸,并与东岸部队合围占领了泸定桥。</p>
  114. </li>
  115. <li class="adr6">
  116. <p class="kuang kuang4" id="kuang4"><img src="img/game1/Group 51.png" /></p>
  117. <p class="jt6"><img src="img/game1/jt6.png" /></p>
  118. <p class="text">夹金山</p>
  119. <p class="dian"></p>
  120. <p class="contText">
  121. 红军在雪山战斗生活月之久。其间,除了要同凶残的敌人英勇作战外,还要克服重重困难,战胜极端恶劣的自然环境,爬过雪山,走过草地,实现战略转移。它既是长征精神的重要组成部分,又是长征精神的集中体现。
  122. </p>
  123. </li>
  124. <li class="adr7">
  125. <p class="kuang kuang5" id="kuang5"><img src="img/game1/Group 51.png" /></p>
  126. <p class="jt7"><img src="img/game1/jt7.png" /></p>
  127. <p class="text">松潘草地</p>
  128. <p class="dian"></p>
  129. <p class="contText">
  130. 在极端恶劣的环境下,红军官兵怀着共同的革命理想,发扬了令人感动的阶级友爱,没有垮掉,没有散掉,同甘共苦,以巨大的精神力量战胜了自然界的困难,终于在死神的威胁下夺路而出。</p>
  131. </li>
  132. <li class="adr8" style="display: flex;width: 2rem;justify-content: center;">
  133. <p class="start"><img src="img/game1/star.png" /></p>
  134. <p class="text">延安</p>
  135. </li>
  136. </ul>
  137. </div>
  138. <div class="mask">
  139. </div>
  140. <div class="tips" style="color: #333;
  141. font-size: .26rem;">
  142. <!--<p>请将下方关于党的英雄事迹,</p>-->
  143. <p>请将下方关于长征的事迹,</p>
  144. <p style="margin-top: .1rem;">拖拽至对应的虚线框中!</p>
  145. </div>
  146. <div class="shoushi"><img src="img/shoushi/1.gif" /></div>
  147. <div class="success">
  148. <div class="sucImg">
  149. <div>
  150. <p class="text">恭喜获得第一枚徽章!</p>
  151. <p class="text textTime"></p>
  152. <p class="imgIcons"><img src="img/success/suc1.png" /></p>
  153. </div>
  154. </div>
  155. <div class="close"><img src="img/close.png" /></div>
  156. </div>
  157. <div class="deepBtn">进入第二关</div>
  158. <p class="imgIcon"><img src="img/success/suc1.png" /></p>
  159. </div>
  160. <audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
  161. <source src="img/audio/game1Bgm.mp3" type="audio/mp3" />
  162. <!--您的浏览器不支持 audio 标签。-->
  163. </audio>
  164. <audio id="trueAudio" hidden="true">
  165. <source src="img/true.mp3" type="audio/mp3" />
  166. </audio>
  167. <audio id="falseAudio" hidden="true">
  168. <source src="img/false1.mp3" type="audio/mp3" />
  169. </audio>
  170. </body>
  171. </html>
  172. <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
  173. <script src="js/zQuery.js" type="text/javascript" charset="utf-8"></script>
  174. <script src="js/snow.js" type="text/javascript" charset="utf-8"></script>
  175. <script type="text/javascript">
  176. function audioAutoPlay(id) {
  177. var audio = document.getElementById(id),
  178. play = function () {
  179. audio.play();
  180. document.removeEventListener("touchstart", play, false);
  181. };
  182. audio.play();
  183. document.addEventListener("WeixinJSBridgeReady", function () {
  184. play();
  185. }, false);
  186. document.addEventListener('YixinJSBridgeReady', function () {
  187. play();
  188. }, false);
  189. document.addEventListener("touchstart", play, false);
  190. //禁止微信内h5网页下拉
  191. document.body.addEventListener('touchmove', function (e) {
  192. e.preventDefault()
  193. }, { passive: false });
  194. }
  195. var url = location.href.split('?')[1]
  196. var audioState = url.split('=')[1];
  197. if (audioState == 'true') {
  198. audioAutoPlay('bgmAudio');
  199. }
  200. //手势隐藏
  201. var count = 0;
  202. var xrwydata = [
  203. [{
  204. 'top': '55%',
  205. 'left': '54%'
  206. }, {
  207. 'top': '44%',
  208. 'left': '42%'
  209. }],
  210. [{
  211. 'top': '45%',
  212. 'left': '37%'
  213. }, {
  214. 'top': '57%',
  215. 'left': '35%'
  216. }, {
  217. 'top': '52%',
  218. 'left': '29%'
  219. }],
  220. [{
  221. 'top': '37%',
  222. 'left': '24%'
  223. }],
  224. [{
  225. 'top': '24%',
  226. 'left': '23%'
  227. }],
  228. [{
  229. 'top': '9%',
  230. 'left': '31%'
  231. }],
  232. [{
  233. 'top': '-2%',
  234. 'left': '45%'
  235. }]
  236. ] //小人位移
  237. var maskState1 = true
  238. $('.mask').on('touchstart', function () {
  239. if (maskState1) {
  240. fadeoutmask()
  241. maskState1 = false
  242. }
  243. })
  244. function fadeoutmask() {
  245. $('.mask').fadeOut();
  246. $('.shoushi').fadeOut();
  247. $(".tips").fadeOut()
  248. $("#xr1").css({
  249. display: 'block'
  250. })
  251. xranimate()
  252. }
  253. //小人位移动画
  254. function xranimate() {
  255. for (var x = 0; x < xrwydata[count].length; x++) {
  256. if (count > 2) {
  257. $("#xr1").css({
  258. display: 'none'
  259. })
  260. $("#xr2").css({
  261. display: 'block',
  262. top: xrwydata[count - 1][xrwydata[count - 1].length - 1].top,
  263. left: xrwydata[count - 1][xrwydata[count - 1].length - 1].left
  264. })
  265. $("#xr2").animate({
  266. top: xrwydata[count][x].top,
  267. left: xrwydata[count][x].left
  268. }, 2000)
  269. } else {
  270. $("#xr1").animate(xrwydata[count][x], count == 0 ? 2100 : 2000 / parseFloat(xrwydata[count].length))
  271. }
  272. }
  273. }
  274. $(".tips").on('touchstart', function () {
  275. fadeoutmask()
  276. $('.imgList ul').css('z-index', '0');
  277. $('.xr').css('z-index', '0');
  278. })
  279. $('.shoushi').on('touchstart', function () {
  280. fadeoutmask();
  281. $('.imgList ul').css('z-index', '9999');
  282. $('.xr').css('z-index', '999999')
  283. })
  284. //手势隐藏end
  285. $('.imgList ul').animate({
  286. 'bottom': '0.4rem'
  287. }, 1000)
  288. $('.imgList ul').animate({
  289. 'bottom': '0.1rem'
  290. }, 300)
  291. var time = 0;
  292. var timeLength = setInterval(function () {
  293. // console.log(time)
  294. time++;
  295. }, 1000)
  296. var showSate = false;
  297. maskState()
  298. function maskState() {
  299. if (showSate) {
  300. $('.imgIcon').animate({
  301. 'top': '0',
  302. "right": '32%',
  303. 'width': '.98rem',
  304. 'height': '1.24rem'
  305. }, 2000)
  306. function yincang() {
  307. $('.titleIcon ul li').eq(0).css({
  308. 'visibility': 'hidden'
  309. })
  310. }
  311. setTimeout('yincang()', 2000)
  312. }
  313. }
  314. $('.deepBtn').click(function () {
  315. var url = location.href.split('?')[1]
  316. console.log(url)
  317. window.location.replace("game2.html?" + url)
  318. })
  319. $('.close').on('touchstart', function () {
  320. $('.mask').fadeOut();
  321. $('.success .sucImg div').fadeOut();
  322. $('.success').css('z-index', '-2222')
  323. $('.success .close').fadeOut();
  324. $('.mapList li').css('z-index', '0')
  325. $('.xr').css('z-index', '999999')
  326. $('.imgList ul').css('z-index', '-1');
  327. })
  328. /* $('.adr1 .jt1').animate({
  329. width:'2.48rem'
  330. },1000) */
  331. $(document).ready(function () {
  332. $(".adr2 .jt2").css("display", "none");
  333. $(".adr3").css("display", "none");
  334. $(".adr4").css("display", "none");
  335. $(".adr5").css("display", "none");
  336. $(".adr6").css("display", "none");
  337. $(".adr7").css("display", "none");
  338. $(".adr8").css("display", "none");
  339. })
  340. var cssArr = [$(".adr2 .jt2").css("display", "block")];
  341. var iconArr = [{
  342. "top": "0%",
  343. "left": "10%"
  344. }, {
  345. "top": "0%",
  346. "left": "28%"
  347. }, {
  348. "top": "0%",
  349. "left": "46%"
  350. }, {
  351. "top": "0%",
  352. "left": "64%"
  353. },
  354. {
  355. "top": "0%",
  356. "left": "82%"
  357. }
  358. ];
  359. var trueArr = ["3", "2", "5", "1", "4"];
  360. var img1State = false;
  361. // $(".kuang1").addClass().siblings()
  362. $(".kuang1").on('touchstart', function () {
  363. console.log('点击')
  364. if (img1State) {
  365. $('.adr4 p.contText').css('display', 'none')
  366. $('.adr5 p.contText').css('display', 'none')
  367. $('.adr6 p.contText').css('display', 'none')
  368. $('.adr7 p.contText').css('display', 'none')
  369. $('.adr2 p.contText').slideToggle()
  370. $('.adr2').css('z-index', '9999').siblings().css('z-index', '0')
  371. }
  372. })
  373. $('.kuang2').on('touchstart', function () {
  374. if (count >= 2) {
  375. $('.adr2 p.contText').css('display', 'none')
  376. $('.adr5 p.contText').css('display', 'none')
  377. $('.adr6 p.contText').css('display', 'none')
  378. $('.adr7 p.contText').css('display', 'none')
  379. $('.adr4 p.contText').slideToggle()
  380. $('.adr4').css('z-index', '9999').siblings().css('z-index', '0')
  381. }
  382. })
  383. $('.kuang3').on('touchstart', function () {
  384. if (count >= 3) {
  385. $('.adr2 p.contText').css('display', 'none')
  386. $('.adr4 p.contText').css('display', 'none')
  387. $('.adr6 p.contText').css('display', 'none')
  388. $('.adr7 p.contText').css('display', 'none')
  389. $('.adr5 p.contText').slideToggle()
  390. $('.adr5').css('z-index', '9999').siblings().css('z-index', '0')
  391. }
  392. })
  393. $('.kuang4').on('touchstart', function () {
  394. if (count >= 4) {
  395. $('.adr4 p.contText').css('display', 'none')
  396. $('.adr5 p.contText').css('display', 'none')
  397. $('.adr2 p.contText').css('display', 'none')
  398. $('.adr7 p.contText').css('display', 'none')
  399. $('.adr6 p.contText').slideToggle()
  400. $('.adr6').css('z-index', '9999').siblings().css('z-index', '0')
  401. }
  402. })
  403. $('.kuang5').on('touchstart', function () {
  404. if (count >= 5) {
  405. $('.adr4 p.contText').css('display', 'none')
  406. $('.adr5 p.contText').css('display', 'none')
  407. $('.adr6 p.contText').css('display', 'none')
  408. $('.adr2 p.contText').css('display', 'none')
  409. $('.adr7 p.contText').slideToggle()
  410. $('.adr7').css('z-index', '9999').siblings().css('z-index', '0')
  411. }
  412. })
  413. //拖拽
  414. var icond = $(".icon");
  415. icond.each(function (index) {
  416. $(this).on('touchstart', function (evt) {
  417. var e = event || evt;
  418. e.preventDefault(); //阻止其他事件
  419. //要做的事情
  420. $(".tipText").css("display", "none");
  421. $(this).find('img').css({
  422. 'width': '90%',
  423. 'height': '90%'
  424. })
  425. }).on('touchmove', function (evt) {
  426. var e = event || evt;
  427. e.preventDefault(); //阻止其他事件
  428. // 如果这个元素的位置内只有一个手指的话
  429. //console.log(e.targetTouches)
  430. //console.log(event.targetTouches[0].clientX+"/"+event.targetTouches[0].clientY+"/"+event.targetTouches[0].pageX+"/"+event.targetTouches[0].pageY)
  431. if (e.targetTouches.length == 1) {
  432. var touch = e.targetTouches[0]; // 把元素放在手指所在的位置
  433. $(this).css("left", (touch.pageY - parseInt($(this).width()) / 2 + 'px'));
  434. $(this).css("top", '-' + (touch.pageX - parseInt($(this).width()) / 2 + 'px'));
  435. }
  436. }).on('touchend', function (evt) {
  437. $(this).find('img').css({
  438. 'width': '100%',
  439. 'height': '100%'
  440. })
  441. var e = event || evt;
  442. e.preventDefault(); //阻止其他事件
  443. //判断是否进入目标元素
  444. var index = this.id.substring(this.id.length - 1, this.id.length)
  445. if (index == (count + 1)) {
  446. var tuozhuai = document.getElementById(this.id).getBoundingClientRect();
  447. var mubiao = document.getElementById('kuang' + (count + 1)).getBoundingClientRect();
  448. var x = tuozhuai.left + tuozhuai.width / 2;
  449. var y = tuozhuai.bottom + tuozhuai.height / 2;
  450. var xmin = mubiao.left;
  451. var xmax = mubiao.left + mubiao.width;
  452. var ymin = mubiao.bottom;
  453. var ymax = mubiao.bottom + mubiao.height;
  454. if (xmin <= x && x <= xmax && ymin <= y && y <= ymax) {
  455. $(".icon" + (getArrayIndex(trueArr, index) + 1)).css("display", "none");
  456. //地图变动
  457. if (count == 0) {
  458. img1State = true
  459. $(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon1.png");
  460. $(".adr2 .jt2").css("display", "block")
  461. $(".adr3").css("display", "block");
  462. $(".adr4").css("display", "block");
  463. $(".adr4 .jt4").css("display", "none")
  464. } else if (count == 1) {
  465. $(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon2.png");
  466. $(".adr4 .jt4").css("display", "block")
  467. $(".adr5").css("display", "block");
  468. $(".adr5 .jt5").css("display", "none")
  469. } else if (count == 2) {
  470. $(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon3.png");
  471. $(".adr5 .jt5").css("display", "block")
  472. $(".adr6").css("display", "block");
  473. $(".adr6 .jt6").css("display", "none")
  474. $('.snowList').fadeIn(1000)
  475. } else if (count == 3) {
  476. $(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon4.png");
  477. $(".adr6 .jt6").css("display", "block")
  478. $(".adr7").css("display", "block");
  479. $(".adr7 .jt7").css("display", "none")
  480. } else if (count == 4) {
  481. $(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon5.png");
  482. $(".adr7 .jt7").css("display", "block")
  483. $(".adr8").css("display", "flex");
  484. $('.snowList').fadeOut(1000)
  485. }
  486. count++;
  487. if (count == 5) {
  488. $('.imgList ul').css('z-index', '-1');
  489. // alert("游戏结束");
  490. // setTimeout('yincang()', 2000)
  491. clearInterval(timeLength);
  492. // console.log(time)
  493. if (time > 3600) {
  494. var houre = parseInt(time / 3600);
  495. if (time % 3600 > 60) {
  496. var min = parseInt((time % 3600) / 60)
  497. } else {
  498. var min = 0;
  499. }
  500. var sec = (time % 3600) % 60
  501. $('.textTime').text('用时' + houre + '时' + min + '分' + sec + '秒')
  502. } else if (time > 60 && time < 3600) {
  503. $('.textTime').text('用时' + parseInt(time / 60) + '分' + (time % 60) + '秒')
  504. } else {
  505. $('.textTime').text('用时' + (time % 60) + '秒')
  506. }
  507. setTimeout(function () {
  508. $('.mask').fadeIn();
  509. $('.success').fadeIn();
  510. $('.imgIcon').fadeIn();
  511. $('.deepBtn').fadeIn()
  512. showSate = true;
  513. maskState()
  514. $('.xr').css('z-index', '0')
  515. $('.mapList li').css('z-index', '-9999')
  516. }, 1000)
  517. }
  518. //错误
  519. // var trueAudio = document.getElementById('trueAudio');
  520. // trueAudio.play();
  521. audioAutoPlay('trueAudio');
  522. xranimate()
  523. // alert('音频')
  524. } else {
  525. $(this).css("top", iconArr[getArrayIndex(trueArr, index)].top);
  526. $(this).css("left", iconArr[getArrayIndex(trueArr, index)].left);
  527. }
  528. } else {
  529. $(this).css("top", iconArr[getArrayIndex(trueArr, index)].top);
  530. $(this).css("left", iconArr[getArrayIndex(trueArr, index)].left);
  531. //错误提示音
  532. // var falseAudio = document.getElementById('falseAudio');
  533. // falseAudio.play();
  534. audioAutoPlay('falseAudio');
  535. // alert('音频')
  536. }
  537. })
  538. });
  539. $('.icon').on('onmove');
  540. function getArrayIndex(arr, obj) {
  541. var i = arr.length;
  542. while (i--) {
  543. if (arr[i] === obj) {
  544. return i;
  545. }
  546. }
  547. return -1;
  548. }
  549. </script>