index.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>答题游戏</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <body>
  10. <!-- 等待页 -->
  11. <section class="waitting full" id="load">
  12. <div class="loader-inner pacman">
  13. <div></div>
  14. <div></div>
  15. <div></div>
  16. <div></div>
  17. <div></div>
  18. <p class="wait-text">正在等待他人加入,请勿关闭...</p>
  19. </div>
  20. </section>
  21. <div class="all">
  22. <!-- 背景 -->
  23. <section class="bg full"></section>
  24. <p class="ren-text">剩余:<span id="ren">0</span>人</p>
  25. <!-- 人物 -->
  26. <section class="full">
  27. <div class="line l2"></div>
  28. <div class="line l3"></div>
  29. <div class="box" id="figureBox"></div>
  30. </section>
  31. <!-- 陷阱-->
  32. <section class="trapbox full" id="trapID">
  33. <div class="trap "></div>
  34. <div class="trap"></div>
  35. </section>
  36. <section class="full" id="go">
  37. <!-- 倒计时 -->
  38. <section class="time"><span id="countDown">30</span></section>
  39. <!-- 问题框 -->
  40. <section class="question-box">
  41. <div class="question" id="ques"></div>
  42. <div class="text"><span id="num">1</span>/<span id="allQues">15</span></div>
  43. </section>
  44. <!-- 答题框 -->
  45. <section class="answer-box" id="ansBox">
  46. <div class="ans ans-1" data-id="0">A</div>
  47. <div class="ans ans-3" data-id="2">B</div>
  48. </section>
  49. </section>
  50. <section class="time-box"></section>
  51. </div>
  52. <!--静音按钮-->
  53. <dl class="mute">
  54. <dt></dt>
  55. <dd id="mp3"></dd>
  56. <audio id="music" preload="auto" src="img/bg.mp3" loop="loop"></audio>
  57. </dl>
  58. <script src="js/jquery.js"></script>
  59. <script src="js/jquery.transit.min.js"></script>
  60. <script>
  61. var music = document.getElementById("music");
  62. var $mute = $(".mute");
  63. var gv = {};
  64. gv.isTouch = window.ontouchstart === undefined ? false : true;
  65. gv.evtDown = gv.isTouch ? "touchstart" : "mousedown";
  66. if (music.paused) {
  67. $mute.addClass("on");
  68. }
  69. var isFirst=true;
  70. function playAudio() {
  71. if(isFirst){
  72. var s = window.setTimeout(function() {
  73. music.play();
  74. if (!music.paused) {
  75. $mute.removeClass("on");
  76. isFirst=false;
  77. }
  78. }, 800);
  79. }else{
  80. music.play();
  81. if (!music.paused) {
  82. $mute.removeClass("on");
  83. }
  84. }
  85. }
  86. function audioPause(audio) {
  87. music.pause();
  88. if (music.paused) {
  89. $mute.addClass("on");
  90. }
  91. }
  92. $("html").one(gv.evtDown,function(){
  93. playAudio();
  94. });
  95. $mute.on(gv.evtDown, function() {
  96. if(music.paused){
  97. playAudio();
  98. }else{
  99. audioPause();
  100. }
  101. })
  102. </script>
  103. <script src="js/game.js?V=2022"></script>
  104. </body>
  105. </html>