zhengxiaoyu
/
datiGame


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>答题王</title>
<meta name="keywords" content="答题王" />
<meta name="description" content="答题王" />
<meta name="full-screen" content="yes"/> <!--部分原生机子-->
<meta name="screen-orientation" content="portrait"/> <!--UC浏览器-->
<meta name="x5-fullscreen" content="true"/> <!--QQ浏览器-->
<meta name="360-fullscreen" content="true"/> <!--360浏览器-->
<meta name="Author" content="daxiong">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script>
(function(f,j){var i=document,d=window;var b=i.documentElement;var c;var h=i.querySelector('meta[name="viewport"]');var e="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no";if(h){h.setAttribute("content",e)}else{h=i.createElement("meta");h.setAttribute("name","viewport");h.setAttribute("content",e);if(b.firstElementChild){b.firstElementChild.appendChild(h)}else{var a=i.createElement("div");a.appendChild(h);i.write(a.innerHTML)}}function g(){var k=b.getBoundingClientRect().width;if(!j){j=540}if(k>j){k=j}var l=k*100/f;b.style.fontSize=l+"px"}g();d.addEventListener("resize",function(){clearTimeout(c);c=setTimeout(g,300)},false);d.addEventListener("pageshow",function(k){if(k.persisted){clearTimeout(c);c=setTimeout(g,300)}},false);if(i.readyState==="complete"){i.body.style.fontSize="16px"}else{i.addEventListener("DOMContentLoaded",function(k){i.body.style.fontSize="16px"},false)}})(750,750);
</script>
<link href="./css/wapzt_base_rem.1.0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/main.css?v2">
</head>
<body>
	<div class="g-doc">
    <canvas id="canvas" style="position: fixed;left: 0;top: 0; width: 100%;height: 100%;"></canvas>

  <div class="popbg"></div>
    <div class="g-inner welcome">
      <button id="start_game" class="layui-btn btn-1" >匹配对手</button>
      <a href="javascript:;" class="rulebtn" ></a>
      <div class="popwind">
        <div class="art">
        <p>1.随机匹配对手<br />
          2.在50秒内完成5道题目<br />
          3.10秒内完成答题，答对加分，答错不扣分<br />
          4.每题满分100分，慢一秒答题扣10分<br />
          5.最终得分高为胜者，获得奖励</p>
          
        </div>
        <a href="javascript:;" class="close"></a>
      </div>
      <div class="cov covtit1"></div>
      <div class="cov covtit2"></div>
    </div>
    <div class="g-inner gstart">
       <span class="cov covxlz">星力值：<em class="sum">0</em></span>
      <div class="loading amt">
        <div class="loader">
          <div class="face">
            <div class="circle"></div>
          </div>
          <div class="face">
            <div class="circle"></div>
          </div>

        </div>
      </div>

      <div class="cov cov1 amt"><span class="userface" id="py1_avatar"></span>
        <b id="py1_username" class="name"></b>
        
        <span class="num amt win_rate" id="win_rate1">0</span>
        <span class="num amt" id="py1_score">0</span>
      </div>
      <div class="cov cov2 amt">
        
        <input type="hidden" id="user_id" name="user_id">
        <input type="hidden" id="duishou" name="duishou">
      </div>
      <span class="cov vspic bounceIn animated"></span>
      <div class="cov cov3 amt" id="Jvs">
        <span class="tit">匹配中</span>
        <div class="con" style="display: none;">
          <div class="percent-circle percent-circle-left">
            <div class="left-content "></div>
          </div>
          <div class="percent-circle percent-circle-right">
            <div class="right-content "></div>
          </div>
          <div class="text-circle">0%</div>
        </div>
      </div>
      <div class="cov cov4 amt">
        <span class="userface" id="py2_avatar" ></span>
        <b id="py2_username" class="name"></b>
        <span class="num amt win_rate" id="win_rate2">0</span>
        <span class="num amt"  id="py2_score">0</span>
      </div>
      <div class="qs-item" >
        <span class="tit" id="Jqtitle"></span>
        <ul class="list" id="question">
          <!-- <li class="item item1 on">四川</li>
          <li class="item item2">新疆</li>
          <li class="item item3">西藏</li> -->
        </ul>
        <div class="page" id="Jpage"></div>
      </div>
      <div class="result bounceInUp animated">
        <span class="icon top-icon success" id="Jresult"></span>
        <span class="live" id="Jlastmsg">初级玩家</span>
         <span class="btn-3 btn btn1" id="Jagain"  >再来一局</span> 
        <!-- <span class="btn-3 btn btn2" data-href="./Index">查看等级</span> -->
      </div>

    </div>
    
  </div> 
</body>
<script src="./js/lib-jquery1.10.2.js"></script>
<script src="./js/base64.js"></script>
<script src="./js/common.js?v1"></script>
<script type="text/javascript">
	common.init();
  "use strict";

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,

  hue = 217,
  stars = [],
  count = 0,
  maxStars = 700;

var canvas2 = document.createElement('canvas'),
  ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }

  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w, h));
  this.radius = random(60, this.orbitRadius) / 12;
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 900000;
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.8;
  ctx.fillStyle = 'rgb(39,48,123)';
  ctx.fillRect(0, 0, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };

  window.requestAnimationFrame(animation);
}

animation();

</script>
</html>