123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>答题游戏</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="css/index.css">
- </head>
- <body>
- <!-- 等待页 -->
- <section class="waitting full" id="load">
- <div class="loader-inner pacman">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <p class="wait-text">正在等待他人加入,请勿关闭...</p>
- </div>
- </section>
- <div class="all">
- <!-- 背景 -->
- <section class="bg full"></section>
- <p class="ren-text">剩余:<span id="ren">0</span>人</p>
- <!-- 人物 -->
- <section class="full">
- <div class="line l2"></div>
- <div class="line l3"></div>
- <div class="box" id="figureBox"></div>
- </section>
- <!-- 陷阱-->
- <section class="trapbox full" id="trapID">
- <div class="trap "></div>
- <div class="trap"></div>
- </section>
- <section class="full" id="go">
- <!-- 倒计时 -->
- <section class="time"><span id="countDown">30</span></section>
- <!-- 问题框 -->
- <section class="question-box">
- <div class="question" id="ques"></div>
- <div class="text"><span id="num">1</span>/<span id="allQues">15</span></div>
- </section>
- <!-- 答题框 -->
- <section class="answer-box" id="ansBox">
- <div class="ans ans-1" data-id="0">A</div>
- <div class="ans ans-3" data-id="2">B</div>
- </section>
- </section>
- <section class="time-box"></section>
- </div>
- <!--静音按钮-->
- <dl class="mute">
- <dt></dt>
- <dd id="mp3"></dd>
- <audio id="music" preload="auto" src="img/bg.mp3" loop="loop"></audio>
- </dl>
- <script src="js/jquery.js"></script>
- <script src="js/jquery.transit.min.js"></script>
- <script>
- var music = document.getElementById("music");
- var $mute = $(".mute");
- var gv = {};
- gv.isTouch = window.ontouchstart === undefined ? false : true;
- gv.evtDown = gv.isTouch ? "touchstart" : "mousedown";
- if (music.paused) {
- $mute.addClass("on");
- }
- var isFirst=true;
- function playAudio() {
- if(isFirst){
- var s = window.setTimeout(function() {
- music.play();
- if (!music.paused) {
- $mute.removeClass("on");
- isFirst=false;
- }
- }, 800);
- }else{
- music.play();
- if (!music.paused) {
- $mute.removeClass("on");
- }
- }
-
- }
- function audioPause(audio) {
- music.pause();
- if (music.paused) {
- $mute.addClass("on");
- }
- }
- $("html").one(gv.evtDown,function(){
- playAudio();
- });
- $mute.on(gv.evtDown, function() {
- if(music.paused){
- playAudio();
- }else{
- audioPause();
- }
- })
- </script>
- <script src="js/game.js?V=2022"></script>
- </body>
- </html>
|