初始化项目-带logo

3 years ago · 63d2ab43bb
165 changed files with 8356 additions and 0 deletions
--- a/begin.html
+++ b/begin.html
@ -0,0 +1,150 @@
 <!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/intoGame.css" />
 	</head>
 	<style type="text/css">
 		.btn {
 			animation: btnlive 0.5s linear;
 		}
 		
 		@keyframes btnlive {
 			0% {
 				bottom: 0rem;
 			}
 			100% {
 				bottom: 1rem;
 			}
 		}
 		
 		.title {
 			animation: titlelive 0.5s linear 0.1s;
 		}
 		
 		@keyframes titlelive {
 			0% {
 				bottom: 0rem;
 			}
 			100% {
 				bottom: 0.2rem;
 			}
 		}
 		
 		.btnscale {
 			transform: scale(0.9);
 			transition: all 0.6s;
 		}
 	</style>

 	<body>
 		<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
 			<source src="img/soundBgm.mp3" type="audio/mp3" />
 			<!--您的浏览器不支持 audio 标签。-->
 		</audio>
 		<div id="wrap">
 			<div class="masks"></div>
 			<div class="bgm"><img src="img/intoGame.png" /></div>
 			<div class="btn">
 				进入活动

 			</div>
 			<div class="ruleCont">
 				<p class="title">活动规则</p>
 				<div class="ruleText">
 					<ul>
 						<li>
 							1.活动时间<br /> 2021年XX月XX日至2021年XX月XX日。
 							<!-- <br /> 2.参加人员
 							<br /> 北京海淀上庄镇全体居民。 -->
 							<br /> 2.活动规则
 							<!--<br /> ①参与活动时候，系统自动获取个人微信头像，请按照弹窗提示填写信息;
 							<br /> ②本次闯关游戏共有五关，每一关的游戏规则请认真阅读当前关卡的提示信息。-->

 							<br />第一关，请将地图下方的场景图片移动至地图中虚框的位置；
 							<br />第二关，请根据上方的时间找到对应的战役，并进行连线；
 							<br />第三关，请通过翻转的方式将上方的人物和下方的姓名进行正确组合；
 							<br />第四关，请根据上方的时间选择正确的会议名称；
 							<br />第五关，请根据问题描述选择出正确答案。
 							<!-- <br /> 3.奖项设置
 							<br /> 在2021年XX月XX日24时前完成云长征路线的参与者，完成闯关任务的请参加后面的转盘抽奖，每个微信号只可进行一次抽奖，抽奖结果请截图保存至手机，按照抽奖结果页面提示信息进行奖品兑换。 奖品领取时间和地点，活动结束后将在活动结果页面上发布，敬请关注，有任何问题请致电活动客服人员。 -->
 							<br /> 3.参考资料
 							<br /> 本活动中长征点位弹窗内容以及答题闯关中的长征知识参考资料为《红军长征史》，《红军长征史》由中共党史出版社于2006年3月出版，由中共中央党史研究室第一研究部主编。 <!-- 本活动程序中长征路线根据1934年10月至1935年10月红一方面军（即中央红军)的长征行军路线而设定。 -->
 							<br /> 本活动素材均来源于百度百科，如涉版权问题请联系我方，我方将及时处理。
 							<br /> 4.版权说明
 							<br />参与活动前，请详细阅读活动规则及相关条款。最终解释权归本公司所有。
 							<br /> 5.客服电话：XXXXXXXXXXX
 						</li>
 						<p class="line"></p>
 						<p class="close">关闭</p>
 					</ul>

 				</div>

 			</div>
 			<div class="audioImg">
 				<img src="img/audioIcon.png" />
 			</div>
 		</div>

 	</body>

 </html>
 <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 	$(document).ready(function() {
 		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);    
 		}    
 		audioAutoPlay('bgmAudio');

 		var clickState = true;

 		$('.btn').click(function() {
 			if(clickState) {
 				window.location.href = "game1.html?audioState=" + audioState
 			}

 			//console.log(audioState)
 		})
 		$(".btn").on("touchstart", function(e) {
 			// e.preventDefault(); //阻止其他事件
 			$(this).toggleClass("btnscale")
 		})

 		$('.close').on('touchstart', function(e) {
 			e.preventDefault(); //阻止其他事件
 			$('.ruleText').css('display', 'none');
 			$('.masks').css('display', 'none');
 			setTimeout(function() {
 				clickState = true
 			}, 1000)
 		})

 		$('.title').on('touchstart', function(e) {
 			$('.ruleText').css('display', 'block');
 			$('.masks').css('display', 'block');
 		})
 	})
 </script>
--- a/begin1.html
+++ b/begin1.html
@ -0,0 +1,292 @@
 <!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/style.css"/>
 		<link rel="stylesheet" type="text/css" href="css/begin.css" />
 	</head>
 	<style type="text/css">

 	</style>

 	<body>
 		<div id="wrap">
 			<div class="mask"></div>
 		<div class="imgs">
 			<img src="img/5.jpg" />
 		</div>
 		
 		<!--旋涡-->
 		<div id="container" touch-action="none"  ></div>
 		</div>
 	</body>
 	<!--$("#header").load("header.html");
 		$("#footer").load("footer.html");-->

 	<script type="text/javascript">
 	var height = document.documentElement.clientWidth,
 		width = document.documentElement.clientHeight;
 		$('.imgs').css({
 			'width': width,
 			'height': height
 		})
 		$('.mask').css({
 			'width': width,
 			'height': height
 		})
 		var $this = $('.imgs img');
 		$this.css({
 				position: 'absolute',
 				top: $this.position().top,
 				left: $this.position().left
 			})
 			.animate({
 				'width': $this.width() * 2,
 				'height': $this.height() * 2,
 				'top': $this.position().top - $this.height() ,
 				'left': $this.position().left - $this.width() 
 			}, 3000)
 			
 //		setTimeout(function() {
 //			$('#container').css('display','block')
 //		}, 3000)
 		setTimeout(function() {
 			$('.mask').fadeIn(2000)
 		}, 4500)
 		setTimeout(function() {
 			window.location.href="index.html"
 		}, 7000)
 	</script>

 </html>
 <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
 <script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
 </script>
 <script  src="js/index.js"></script>
 <script id="fragmentShader" type="x-shader/x-fragment">
 	
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  
  #define PI 3.141592653589793
  #define TAU 6.283185307179586
  
  const int octaves = 2;
  const float seed = 43758.5453123;
  const float seed2 = 73156.8473192;
   
   //旋转度数
  // float r1 = 0.1 + ((u_mouse.y + 0.5) * .1);
  // float r2 = 0.4 + (u_mouse.x * .2);
  float r1 = 0.2;
  float r2 = 0.9;
  
  // These awesome complex Math functions curtesy of 
  // https://github.com/mkovacs/reim/blob/master/reim.glsl
  vec2 cCis(float r);
  vec2 cLog(vec2 c); // principal value
  vec2 cInv(vec2 c);
  float cArg(vec2 c);
  float cAbs(vec2 c);
  
  vec2 cMul(vec2 a, vec2 b);
  vec2 cDiv(vec2 a, vec2 b);

  vec2 cCis(float r)
  {
    return vec2( cos(r), sin(r) );
  }
  vec2 cExp(vec2 c)
  {
    return exp(c.x) * cCis(c.y);
  }
  vec2 cConj(vec2 c)
  {
    return vec2(c.x, -c.y);
  }
  vec2 cInv(vec2 c)
  {
    return cConj(c) / dot(c, c);
  }
  vec2 cLog(vec2 c)
  {
    return vec2( log( cAbs(c) ), cArg(c) );
  }
  float cArg(vec2 c)
  {
    return atan(c.y, c.x);
  }
  float cAbs(vec2 c)
  {
    return length(c);
  }
  vec2 cMul(vec2 a, vec2 b)
  {
    return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
  }
  vec2 cDiv(vec2 a, vec2 b)
  {
    return cMul(a, cInv(b));
  }

  float hash(float p)
  {
    vec2 o = texture2D( u_noise, vec2((p+0.5)/256.0), -100.0 ).xy;
    return o.x;
  }
  vec2 hash(vec2 p)
  {
    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
    return o - .5;
  }
  vec3 hash3(vec2 p)
  {
    vec3 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xyz;
    return o;
  }
  vec4 hash4(vec2 p)
  {
    vec4 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 );
    return o;
  }

  // LUT Noise by Inigo Quilez - iq/2013
  // https://www.shadertoy.com/view/4sfGzS
  float noiseLUT( in vec3 x )
  {
    vec3 p = floor(x);
    vec3 f = fract(x);
    f = f*f*(3.0-2.0*f);
    vec2 uv = (p.xy+vec2(37.0,17.0)*p.z) + f.xy;
    vec2 rg = texture2D(u_noise, (uv+0.5)/256.0).yx - .5;
    return mix( rg.x, rg.y, f.z );
  }

  float fbm1(in vec2 _st, float seed) {
    float v = 0.0;
    float a = 0.5;
    vec2 shift = vec2(100.0);
    // Rotate to reduce axial bias
    mat2 rot = mat2(cos(0.5), sin(0.5),
                    -sin(0.5), cos(0.50));
    for (int i = 0; i < octaves; ++i) {
        v += a * noiseLUT(vec3(_st, 1.));
        // v += a * noise(_st, seed);
        _st = rot * _st * 2.0 + shift;
        a *= 0.4;
    }
    return v;
  }

  float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) {

    q = vec2( fbm1( uv + vec2(0.0,0.0), seed ),
                   fbm1( uv + vec2(5.2,1.3), seed ) );

    r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ),
                   fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) );

    return fbm1( uv + 4.0*r, seed );
  }

  vec2 hash2(vec2 p)
  {
    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
    return o;
  }
  
  vec3 hsb2rgb( in vec3 c ){
    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
                             6.0)-3.0)-1.0,
                     0.0,
                     1.0 );
    rgb = rgb*rgb*(3.0-2.0*rgb);
    return c.z * mix( vec3(1.0), rgb, c.y);
  }
  
  vec3 domain(vec2 z){
    return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));
  }
  vec3 colour(vec2 z) {
      return domain(z);
  }
  
  vec2 Droste(vec2 uv) {
    
    // 5. Take the tiled strips back to ordinary space.
    uv = cLog(uv); 
    // 4. Scale and rotate the strips
    float scale = log(r2/r1);
    float angle = atan(scale/(2.0*PI));
    uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle)); 
    // 3. this simulates zooming in the tile
    uv -= u_time * .2;
    // 2. Tile the strips
    uv.x = mod(uv.x,log(r2/r1)); 
    // 1. Take the annulus to a strip
    uv = cExp(uv)*r1;
    
    return uv;
  }

  void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    uv *= 2.;
    vec2 _uv = uv;
    vec2 polar = vec2(length(_uv), atan(uv.y, uv.x));
    
    uv = Droste(uv);
    
    float rInv = 1./length(uv);
    uv = uv * rInv - vec2(rInv, 1.);
    
    vec2 p;
    vec2 q;
    float pat = pattern(uv * 5., seed, u_time * 5., p, q);
    
    vec3 fragcolour = mix(
      mix(
        vec3(0.1, 0.8, 1.0),
        vec3(0.1, 0.8, 1.0),
        abs(q.x*p.y)*20.),
      vec3(.1, .3, 0.5),
      pat
    );
    fragcolour -= smoothstep(-.1, .9, p.x) * .1;
    fragcolour += smoothstep(-.1, .5, p.y) * .1;
    
    fragcolour += (1. - length(_uv * 2.)) *.5 ;
    float lcol = clamp(length((_uv) * 4.) - .2, 0., 1.);
    
    float raynoise = fbm1(polar*10.-u_time*2., seed);
    
    fragcolour = mix(
      fragcolour, 
      vec3(sin(p.y * 10.), cos(q.y * 10.), pat * 2.) * .5 + 1.5, 
      clamp(
        abs(
          sin(polar.y * 50.)
        ) * 1. / length(_uv * _uv * 3.) * raynoise - .2, 
        0., 
        1.) * .2);
    
    fragcolour = mix(vec3(1.), fragcolour, lcol);
    

    gl_FragColor = vec4(fragcolour,1.0);
  }
 </script>
--- a/css/begin.css
+++ b/css/begin.css
@ -0,0 +1,166 @@
 * {
 	margin: 0;
 	padding: 0;
 }

 ul,
 li {
 	list-style: none;
 }


 /*遮罩*/

 .mask {
 	position: absolute;
 	left: 0;
 	top: 0;
 	z-index: 99;
 	background: rgba(245, 224, 182, 0.4);
 	display: none;
 }

 .imgs {
 	/*background: url(../img/5.jpg) no-repeat;*/
 	/*background-size: 100% 100%;*/
 	position: relative;
 	overflow: hidden;
 }

 .imgs img {
 	width: 100%;
 	height: 100%;
 	position: absolute;
 }

 #container {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 	/*z-index: 999;*/
 	width: 55%;
 	height: 90%;
 }

 #container canvas {
 	width: 100% !important;
 	height: 100% !important;
 	opacity: 1;
 	border-radius: 50%;
 }


 /*.xuanwo{
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%,-50%);
 	width: 2rem;
 	height: 2rem;
 }
 .xuanwo img{
 	width: 100%;
 	height: 100%;
 }*/


 /*翻书结束后的文字*/

 .bookImg {
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	left: 0;
 	top: 0;
 	z-index: 99999;
 	/*display: none;*/
 	opacity: 0;
 }

 .bookImg img {
 	width: 100%;
 	height: 100%;
 }

 .word {
 	position: absolute;
 	left: 50%;
 	top: 20%;
 	display: none;
 	/*display: flex;*/
 	width: 65%;
 	-webkit-transform: rotateX(30deg);
 	-ms-transform: rotateX(30deg);
 	-o-transform: rotateX(30deg);
 	transform: rotateX(30deg);
 	transform: translateX(-50%);
 }

 .word p {
 	font-size: .25rem;
 }

 .word p.title {
 	flex: 1;
 	text-align: center;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: .45rem;
 	margin-right:2rem;
 	margin-top: -.5rem;
 	height: 4.5rem;
 	font-weight: bold;
 }

 .word p.contWord {
 	width: 44%;
 	height: 4.5rem;
 	overflow-y: auto;
 	display: none;
 }

 .bookImg .btn1 {
 	position: absolute;
 	left: 50%;
 	bottom: 3%;
 	
 	z-index: 99999;
 	display: none;
 	transform: translateX(-50%);
 	/*background: url(../img/game2/titleIcon.png) no-repeat;*/
 }
 .bookImg .btn1 span{
 	font-size: .36rem;
 	color: #fff;
        display: flex;
    /* margin: 0 auto; */
    justify-content: center;
    align-items: flex-end;
   width: 3.83rem;
 	height: .72rem;
 	line-height: .72rem;
    position: absolute;
    border-radius: 12px;
      left: 50%;
    bottom: 0%;
    background: rgba(0,0,0,0.5);
    transform: translateX(-50%);
 	
 }
 .bookImg .btn1 p{
 	
 	width: 3.83rem;
 	height: .72rem;
 	background: #999;
 	border-radius: 12px;
 	margin: 0.5rem auto 0;
 	color: #fff;
 	font-size: .36rem;
 	text-align: center;
 	line-height: .82rem;
 }
 .bookImg .btn1 p.active{
 	background: #E40006;
 }
--- a/css/common.css
+++ b/css/common.css
@ -0,0 +1,141 @@
 * {
 	margin: 0;
 	padding: 0;
 }

 ul,
 li {
 	list-style: none;
 }
 #wrap{
 	/*position: relative;*/
 }
 .titleIcon{
 	height: 1.24rem;
 }
 .titleIcon ul{
 	
 	
 }
 .titleIcon ul li{
 	position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
 }
 .titleIcon ul li:nth-child(1){
 	 right:32%;
 }
 .titleIcon ul li:nth-child(2){
 	 right: 24%;
 }
 .titleIcon ul li:nth-child(3){
 	 right: 16%;
 }
 .titleIcon ul li:nth-child(4){
 	 right: 8%;
 }
 .titleIcon ul li:nth-child(5){
 	 right: 0;
 }
 .mask{
 	background: rgba(0,0,0,0.5);
 	position: fixed;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 0;
 	display: none;
 }

 .success{
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%,-50%);
 	width: 7.29rem;
 	height: 4.74rem;
 	margin: 0 auto;
 	z-index: 9999;
 	display: none;
 }
 .close{
 	width: .5rem;
 	height: .5rem;
 	position: absolute;
 	left: 96%;
 	top: 6%;
 	/*transform: translate(-50%,-50%);*/
 	font-size: 0;
 }
 .close img{
 	width: 100%;
 	height: 100%;
 }
 .success .sucImg{
 	width: 100%;
 	height: 100%;
 }
 .success .sucImg div{
 	width: 100%;
 	height: 100%;
 	background: url(../img/success/sucBgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 }

 .imgIcon,
 .imgIcons{
 	display: none;
 	
 	width: 1.98rem;
 	height: 2.5rem;
 	position: absolute;
 	right: 43%;
    top: 38%;
 	/*transform: translate(50%,-50%);*/
 	z-index: 99999;
 	/*margin:1.09rem auto 0.2rem;*/
 	
 }
 .imgIcons{
 	display: block;
 	position: absolute;
 	right: 37%;
    top: 31%;
 	/*transform: translate(50%,-50%);*/
 }
 .imgIcon img,
 .imgIcons img{
 	width: 100%;
 	height: 100%;
 }
 .success p.text{
 	width: 100%;
 	text-align: center;
 	font-size: .3rem;
 	position: absolute;
 	bottom: 10%;
 	left: 0;
 }
 .success p.textTime{
 	bottom: 2%;
 }

 .deepBtn{
 	width: 2.83rem;
 	height: .72rem;
 	background: #E40006;
 	border-radius: 12px;
 	margin: 0.5rem auto 0;
 	color: #fff;
 	font-size: .36rem;
 	text-align: center;
 	line-height: .72rem;
 	position: absolute;
 	left: 50%;
 	bottom: 5%;
 	transform: translateX(-50%);
 	display: none;
 }
--- a/css/font/icon.eot
+++ b/css/font/icon.eot
--- a/css/font/icon.ttf
+++ b/css/font/icon.ttf
--- a/css/game1.css
+++ b/css/game1.css
@ -0,0 +1,479 @@
 #wrap {
 	background: url(../img/game1/bgm1.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 	position: relative;
 }

 .tipsNum {
 	width: 1.45rem;
 	height: 3.2rem;
 	position: absolute;
 	left: 0;
 	top: 50%;
 	transform: translateY(-50%);
 }

 .tipText {
 	position: absolute;
 	top: 40%;
 	transform: translateY(-40%);
 	right: .65rem;
 	width: .8rem;
 	height: 4.32rem;
 }

 .tipText ul {
 	display: flex;
 }

 .tipText ul li {
 	flex: 1;
 	text-align: center;
 	color: #333;
 	font-size: .26rem;
 }

 .tipsNum img {
 	width: 100%;
 	height: 100%;
 }

 .titleIcon {
 	margin-top: .1rem;
 	margin-left: .1rem;
 }

 .titleIcon ul {
 	display: flex;
 	justify-content: flex-end;
 }

 .titleIcon ul li {
 	width: .98rem;
 	height: 1.24rem;
 }

 .titleIcon ul li img {
 	width: 100%;
 	height: 100%;
 }


 /*箭头部分*/

 .mapList {
 	/*position: relative;*/
 	width: 100%;
 	height: 100%;
 }

 .mapList ul {
 	width: 100%;
 	height: 100%;
 	/*display: flex;*/
 }

 .mapList li {
 	/*float: right;*/
 	position: absolute;
 	transform: translate(-50%, -50%);
 }

 .mapList p.dian {
 	width: .1rem;
 	height: .1rem;
 	background: #FE1010;
 	border-radius: 50%;
 	border: 1px solid #333;
 	margin-right: .05rem;
 	margin-top: .25rem;
 }

 .mapList p.kuang {
 	width: 2.22rem;
 	height: 1.25rem;
 }

 .mapList p.contText {
 	font-size: .18rem;
 	position: absolute;
 	width: 3rem;
 	background: #F4BA78;
 	border: 1px solid #D01217;
 	border-radius: 7px;
 	box-sizing: border-box;
 	padding: .1rem;
 	display: none;
 }

 .mapList p.kuang img {
 	width: 100%;
 	height: 100%;
 }

 .mapList p.text {
 	font-size: .31rem;
 	color: #333;
 }

 .adr1 {
 	top: 65%;
 	left: 69%;
 	display: flex;
 	align-items: center;
 }

 .adr1 p.jt1 {
 	/*display: none;*/
 	/*margin-top: .4rem;*/
 	position: absolute;
 	left: -2.42rem;
 	top: -.22rem;
 	/* width: 0;
 	 white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; */
 	/*display: none;*/
 }

 .adr1 p.jt1 img {
 	width: 2.48rem;
 	height: 1.05rem;
 }

 .adr2 p.contText {
 	left: 100%;
 	top: -60%;
 	/*display: none;*/
 }

 .adr4 p.contText {
 	left: 0%;
 	top: -60%;
 }

 .adr5 p.contText {
 	left: 10%;
 	bottom: 87%;
 }

 .adr6 p.contText {
 	left: 100%;
 	bottom: 10%;
 }

 .adr7 p.contText {
 	right: -2.25rem;
 	top: -.44rem;
 }

 .adr2 {
 	top: 50%;
 	left: 58%;
 	display: flex;
 	align-items: center;
 }

 .adr2 p {
 	/*float: right;*/
 }

 .adr2 .text {
 	margin-top: 1rem;
 	margin-right: .05rem;
 }

 .adr2 p.dian {
 	margin-top: 1.4rem;
 }

 .adr2 p.jt2 {
 	position: absolute;
 	left: -.64rem;
 	top: -.58rem;
 	/* width: 0;
 	overflow: hidden; */
 }

 .adr2 p.jt2 img {
 	margin-top: 2rem;
 	width: .66rem;
 	height: .32rem;
 }

 .adr3 {
 	top: 57%;
 	left: 40.5%;
 }

 .adr3 .text {
 	text-align: center;
 }

 .adr3 p.dian {
 	margin-left: 56%;
 	margin-top: 0.1rem;
 }

 .adr3 p.jt3 {
 	/*margin-left: .2rem;*/
 	margin-top: -.1rem;
 	/* width: 0;
 	overflow: hidden; */
 }

 .adr3 p.jt3 img {
 	margin-left: 0.2rem;
 	margin-top: -.2rem;
 	width: 1.05rem;
 	height: .76rem;
 }

 .adr4 {
 	top: 56%;
 	left: 35%;
 	position: relative;
 }

 .adr4 p.text {
 	position: relative;
 	right: .6rem;
 	top: 1.2rem;
 }

 .adr4 p.dian {
 	position: absolute;
 	left: 0.2rem;
 	bottom: -.7rem;
 }

 .adr4 p.jt4 {
 	position: absolute;
 	right: 86%;
 	top: -25%;
 	/* width: 0;
 	overflow: hidden; */
 }

 .adr4 p.jt4 img {
 	width: .48rem;
 	height: .83rem;
 	margin-left: 2rem;
 	margin-top: -2rem;
 }

 .adr4 .kuang {
 	position: absolute;
 	top: .5rem;
 	left: -2.9rem;
 	font-size: 0;
 }

 .adr5 {
 	top: 45%;
 	/*top: 20%;*/
 	left: 25%;
 	position: relative;
 }

 .adr5 .text {
 	margin-top: 1rem;
 	margin-left: -.5rem;
 }

 .adr5 p.dian {
 	/*margin-top: 2rem;*/
 	margin-left: 1.4rem;
 	position: absolute;
 	left: -.8rem;
 	top: 1rem;
 }

 .adr5 p.jt5 {
 	position: absolute;
 	left: -.05rem;
 	top: .2rem;
 	/* width: 0;
 	overflow: hidden; */
 }

 .adr5 p.jt5 img {
 	width: .22rem;
 	height: .68rem;
 	margin-left: .5rem;
 	margin-top: 0rem;
 }

 .adr5 .kuang {
 	position: absolute;
 	right: -2.9rem;
 	top: 0rem;
 }

 .adr6 {
 	top: 40%;
 	left: 24%;
 }

 .adr6 .kuang {
 	position: absolute;
 	left: -1.8rem;
 	top: -1.2rem;
 }

 .adr6 p.dian {
 	position: absolute;
 	right: -.35rem;
 	bottom: 0.13rem;
 }

 .adr6 p.jt6 {
 	position: absolute;
 	left: .9rem;
 	bottom: 0rem;
 	/* width: 0;
 	overflow: hidden; */
 }

 .adr6 p.jt6 img {
 	width: 0.86rem;
 	height: 1.02rem;
 }

 .adr7 {
 	top: 10%;
 	left: 30%;
 }

 .adr7 p.kuang {
 	position: absolute;
 	right: -1.4rem;
 	top: -.6rem;
 }

 .adr7 p.jt7 {
 	position: absolute;
 	left: 1rem;
 	top: .08rem;
 	/* width: 0;
 	overflow: hidden; */
 }

 .adr7 p.jt7 img {
 	width: 1.78rem;
 	height: .97rem;
 }

 .adr7 p.text {
 	width: 2rem;
 	position: absolute;
 	left: -.6rem;
 	top: .65rem;
 }

 .adr7 p.dian {
 	position: absolute;
 	left: .72rem;
 	top: .8rem;
 }

 .adr8 {
 	top: 12%;
 	left: 52%;
 	display: flex;
 }

 .adr8 p.start {
 	width: .4rem;
 	height: .4rem;
 	font-size: 0;
 }

 .adr8 p.start img {
 	width: 100%;
 	height: 100%;
 }


 /*底部图片*/

 .imgList {}

 .imgList ul {
 	width: 100%;
 	height: 1.6rem;
 	float: right;
 	display: flex;
 	justify-content: flex-end;
 	box-sizing: border-box;
 	position: absolute;
 	left: 0;
 	bottom: -10rem;
 	width: 100%;
 	/*z-index: 0;*/
 	/*margin: 0 .1rem;*/
 }

 .imgList ul li {
 	height: 1.25rem;
 	/*flex: 1;*/
 	width: 17%;
 	margin-right: .1rem;
 	position: absolute;
 	left: 0;
 	top: 0;
 	/*z-index: 999;*/
 }

 .imgList li img {
 	width: 100%;
 	height: 100%;
 }


 /**/


 /*p.dian{
 	display: none;
 }*/


 /*雪花*/

@font-face {
 	font-family: icon;
 	src: url("font/icon.ttf"), url("font/icon.eot");
 }

 .snowList {
 	display: none;
 }

 .snow {
 	font-family: icon;
 	color: #fff;
 	position: absolute;
 	top: -100px;
 	-webkit-transform: rotate(90deg);
 	transform: rotate(90deg);
 }


 /*手势*/

 .mask {
 	display: block;
 }

 .shoushi {
 	position: absolute;
 	right: -.66rem;
 	bottom: 20px;
 }

 .shoushi img {
 	width: 50%;
 	height: 50%;
 }
--- a/css/game2.css
+++ b/css/game2.css
@ -0,0 +1,204 @@
 #wrap {
 	background: url(../img/game2/game2Bgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 	position: relative;
 }
 .cont_wrap{
 	/*display: none;*/
 }
 .tipsNum {
 	width: 1.45rem;
 	height: 3.2rem;
 	position: absolute;
 	left: 0;
 	top: 50%;
 	transform: translateY(-50%);
 }

 .tipText {
 	position: absolute;
 	top: 40%;
 	transform: translateY(-40%);
 	right: .65rem;
 	width: .8rem;
 	height: 4.32rem;
 }

 .tipText ul {
 	display: flex;
 }

 .tipText ul li {
 	flex: 1;
 	text-align: center;
 	color: #333;
 	font-size: .26rem;
 }

 .tipsNum img {
 	width: 100%;
 	height: 100%;
 }

 .titleIcon {
 	margin-top: .1rem;
 	margin-left: .1rem;
 }

 .titleIcon ul {
 	display: flex;
 	justify-content: flex-end;
 }

 .titleIcon ul li {
 	width: .98rem;
 	height: 1.24rem;
 }

 .titleIcon ul li img {
 	width: 100%;
 	height: 100%;
 }

 /*时间*/
 .tipList{
 	width: 90%;
 	display: flex;
 	margin-left: 1.35rem;
 }
 .tipList ul{
 	display: flex;
 	width: 100%;
 }
 .tipList ul li{
 	width: 18%;
 	height: 1rem;
 	margin-right: .15rem;
 }
 .tipList ul li p{
    height: 100%;
    width: 2.17rem;
    background: url(../img/game2/timeN.png) no-repeat;
    background-size: 100% 100%;
    font-size: .22rem;
    text-align: center;
    box-sizing: border-box;
    /* padding: .18rem 0rem; */
    color: #fff;
    display: flex;
    line-height: .5rem;
    justify-content: center;
    padding-top: .18rem;
    padding-left: 0rem;
    padding-right: 0.1rem;
 }

 .tipList ul li.active p{
 	/*box-shadow: -6px 2px 18px #999;*/
 	background: url(../img/game2/time.png) no-repeat;
 	background-size: 100% 100%;
 	/*border-radius:10%;*/
 }

 .posTip{
 	width: 100%;
 	padding: .31rem 0;
 	height: .8rem;
 }

 .posTip p{
 	width: 100%;
 	text-align: center;
 	font-size: .3rem;
 	line-height: .8rem;
 	color: #333;
 }
 .contList{
 	width: 95%;
 	display: flex;
 	margin-left: 1.25rem ;
 }
 .contList ul{
 	width: 100%;
 	display: flex;
 }
 .contList ul li{
 	width: 18%;
 	
 	height:1.2rem;
 	background: #F4BA78;
 	border: 1px solid #D01217;
 	border-radius: 7px;
 	margin-right: .05rem;
 	font-size: .3rem;
 	position: relative;
 }
 .contList ul li:last-child{
 	margin-right: 0;
 }
 .contList ul li p.titleText{
 	border-radius: .1rem;
 	height: .32rem;
 	padding: .05rem .1rem;
 	background: #D01217;
 	text-align: center;
 	line-height: .32rem;
 	color: #fff;
 	font-size: .22rem;
 	position: absolute;
 	left: 50%;
 	top: -.16rem;
 	transform: translateX(-50%);
 }
 .contList ul li p.contImg{
 	width: 100%;
 	height: 1.15rem;
 	margin: .05rem auto;
 }
 .contList ul li p.contImg img{
 	width:100%;
 	height: 100%;
 	padding: .05rem;
 	box-sizing: border-box;
 }
 .contList ul li p.contText{
 	font-size: .15rem;
 	margin:0.05rem .05rem  0;
 	line-height: 0.25rem;
 	letter-spacing: 0.01rem;
 	display: none;
 }

 .contList ul li.active p.tipImg{
 	background:#D21318;
 }

 .contList p.tipImg{
 	width: .36rem;
 	height: .36rem;
 	background:#FFD568;
 	border-radius: 50%;
 	position: absolute;
 	left: 50%;
 	top: -.3rem;
 	transform: translateX(-50%);
 }


 /*手势*/

 .mask {
 	display: block;
 }

 .shoushi {
 	position: absolute;
 	right: -4rem;
    bottom: 2.1rem;
 }

 .shoushi img {
 	width: 50%;
 	height: 50%;
 }
--- a/css/game3.css
+++ b/css/game3.css
@ -0,0 +1,299 @@
 #wrap {
 	background: url(../img/game3/game3Bgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 	position: relative;
 }

 .tipsNum {
 	width: 1.45rem;
 	height: 3.2rem;
 	position: absolute;
 	left: 0;
 	top: 50%;
 	transform: translateY(-50%);
 	z-index: -33;
 }

 .tipText {
 	position: absolute;
 	top: 40%;
 	transform: translateY(-40%);
 	right: .65rem;
 	width: .8rem;
 	height: 4.32rem;
 }

 .tipText ul {
 	display: flex;
 }

 .tipText ul li {
 	flex: 1;
 	text-align: center;
 	color: #333;
 	font-size: .26rem;
 }

 .tipsNum img {
 	width: 100%;
 	height: 100%;
 }

 .titleIcon {
 	margin-top: .1rem;
 	margin-left: .1rem;
 }

 .titleIcon ul {
 	display: flex;
 	justify-content: flex-end;
 }

 .titleIcon ul li {
 	width: .98rem;
 	height: 1.24rem;
 }

 .tipList ul li.active p {
 	/*box-shadow: -6px 2px 18px #999;*/
 	background: url(../img/game2/active.png) no-repeat;
 	background-size: 100% 100%;
 	/*border-radius:10%;*/
 }

 .titleIcon ul li img {
 	width: 100%;
 	height: 100%;
 }


 /*时间*/

 .tipList {
 	width: 90%;
 	display: flex;
 	margin-left: 1.45rem;
 }

 .tipList ul {
 	display: flex;
 	width: 100%;
 }

 .tipList ul li {
 	/*flex: 1;*/
 	width: 18%;
 	margin-right: .1rem;
 }

 .tipList ul li p {
 	height: .98rem;
 	width: 2.17rem;
 	background: url(../img/game2/titleIcon.png) no-repeat;
 	background-size: 100%;
 	font-size: .32rem;
 	text-align: center;
 	box-sizing: border-box;
 	padding: .18rem .2rem;
 	color: #fff;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .cont_wrap {
 	width: 100%;
 	position: absolute;
 	z-index: -1;
 	/*margin-top: 1.76rem;*/
 }

 .faceList {
 	width: 90%;
 	margin-left: 1.35rem;
 	display: flex;
 	flex-wrap: wrap;
 	/*justify-content: space-between;*/
 }

 .faceList li {
 	width: 19%;
 	height: 1.99rem;
 	margin-right: .1rem;
 	/*margin-bottom: 1.26rem;*/
 }

 .faceList p.fontImg,
 .faceList p.backImg {
 	width: 1.99rem;
 	height: 1.74rem;
 }

 .faceList li img {
 	/*width: 2.5rem;*/
 	width: 100%;
 	height: 1.74rem;
 }

 .faceItem {
 	perspective: 1000px;
 	-webkit-perspective: 1000px;
 	/*父类容器中 perspective 子类允许透视*/
 	-moz-perspective: 1000px;
 	-ms-perspective: 1000px;
 	-o-perspective: 1000px;
 	perspective: 1000px;
 	margin: 0px auto;
 	/*margin-left: 20px;*/
 	margin-bottom: .2rem;
 }

 .faceList li.last {
 	margin-top: 2rem;
 }

 .faceList li .backShow {
 	transform: rotateY(180deg);
 	-webkit-transform: rotateY(180deg);
 	-moz-transform: rotateY(180deg);
 	-ms-transform: rotateY(180deg);
 	-o-transform: rotateY(180deg);
 	z-index: 1
 }

 .faceList li .fontShow {
 	transform: rotateY(0deg);
 	-webkit-transform: rotateY(0deg);
 	-moz-transform: rotateY(0deg);
 	-ms-transform: rotateY(0deg);
 	-o-transform: rotateY(0deg);
 	z-index: 2;
 }

 .fontImg,
 .backImg {
 	backface-visibility: hidden;
 	-webkit-transition: .6s ease-out;
 	-moz-transition: .6s ease-out;
 	-ms-transition: .6s ease-out;
 	-o-transition: .6s ease-out;
 	transition: 0.6s ease-out;
 	-webkit-transform-style: preserve-3d;
 	-moz-transform-style: preserve-3d;
 	-ms-transform-style: preserve-3d;
 	-o-transform-style: preserve-3d;
 	transform-style: preserve-3d;
 	position: absolute;
 	top: 0;
 	left: 0;
 }

 .fontImg {
 	z-index: 1;
 	transform: rotateY(-180deg);
 	transform: rotateY(-180deg);
 	-webkit-transform: rotateY(-180deg);
 	-moz-transform: rotateY(-180deg);
 	-ms-transform: rotateY(-180deg);
 	-o-transform: rotateY(-180deg);
 }

 .backImg {
 	z-index: 2;
 	transform: rotateY(0deg);
 	transform: rotateY(0deg);
 	-webkit-transform: rotateY(0deg);
 	-moz-transform: rotateY(0deg);
 	-ms-transform: rotateY(0deg);
 	-o-transform: rotateY(0deg);
 }

 p.guize {
 	/*width: 50%;*/
 	position: absolute;
 	left: 50%;
 	top: 55%;
 	transform: translate(-50%, -50%);
 }

 p.guize span {
 	display: block;
 	/*width: 90%;*/
 	font-size: 0.3rem;
 	color: #333;
 	/*border: 1px dotted #D01217;*/
 	margin: .1rem 0 .3rem 0;
 	padding: .3rem .1rem;
 	/*box-sizing: border-box;*/
 }


 /*中间的成功框*/

 .middleImg {
 	position: absolute;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 	width: 100%;
 	height: 20%;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }

 .middleImg ul:first-child {
 	margin-left: 1.45rem;
 }

 .middleImg ul {
 	width: 90%;
 	margin-top: 1rem;
 }

 .middleImg ul li {
 	display: none;
 }

 .middleImg ul li:nth-child(1) {
 	display: block;
 	width: 1.99rem;
 	height: 1.74rem;
 }

 .middleImg ul li p.img {
 	width: 1.99rem;
 	height: 1.74rem;
 }

 .middleImg ul li img {
 	width: 100%;
 	height: 100%;
 }

 .middleImg ul li p.text {
 	font-size: .22rem;
 	color: #D21B20;
 	text-align: center;
 	font-weight: bold;
 }


 /*手势*/

 .mask {
 	display: block;
 	/*z-index: ;*/
 }

 .shoushi {
 	position: absolute;
 	right: -4.42rem;
 	bottom: 1.16rem;
 }

 .shoushi img {
 	width: 50%;
 	height: 50%;
 }
--- a/css/game4.css
+++ b/css/game4.css
@ -0,0 +1,274 @@
 #wrap {
 	background: url(../img/game4/game4Bgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 	position: relative;
 }

 .tipsNum {
 	width: 1.45rem;
 	height: 3.2rem;
 	position: absolute;
 	left: 0;
 	top: 50%;
 	transform: translateY(-50%);
 }

 .tipText {
 	position: absolute;
 	top: 40%;
 	transform: translateY(-40%);
 	right: .65rem;
 	width: .8rem;
 	height: 4.32rem;
 }

 .tipText ul {
 	display: flex;
 }

 .tipText ul li {
 	flex: 1;
 	text-align: center;
 	color: #333;
 	font-size: .26rem;
 }

 .tipsNum img {
 	width: 100%;
 	height: 100%;
 }

 .titleIcon {
 	margin-top: .1rem;
 	margin-left: .1rem;
 }

 .titleIcon ul {
 	display: flex;
 	justify-content: flex-end;
 }

 .titleIcon ul li {
 	width: .98rem;
 	height: 1.24rem;
 }

 .titleIcon ul li img {
 	width: 100%;
 	height: 100%;
 }

 /*时间*/
 .tipList{
 	width: 90%;
 	display: flex;
 	margin-left: 1.55rem;
 }
 .tipList>ul{
 	display: flex;
 	width: 100%;
 	/*justify-content: space-between;*/
 }
 .tipList>ul>li{
 	/*flex: 1;*/
 	width: 19%;
 	position: relative;
 	display: none;
 }
 .tipList ul li div.time{
 	width:1.9rem;
 	height: .56rem;
 	text-align: center;
 	font-size: .24rem;
 	color: #333;
 	background: url(../img/game4/topIcon1.png) no-repeat;
 	background-size: 100% 100%;
 	position: relative;
 	margin: 0 auto;
 	/*font-weight: bold;
 	line-height: .56rem;*/
 	/*left: 0;
 	top: 0;*/
 }
 .tipList ul li div.year{
 	/*display: flex;*/
 	width: 1.9rem;
 	display: none;
 	position: absolute;
 	top: 0%;
 	    left: 50%;
    transform: translateX(-50%);
 }
 .tipList ul li div.year span{
 	display: block;
 	font-size: .25rem;
 	font-weight: bold;
 	position: absolute;
 	top: .18rem;
 	
 }
 /*.tipList ul li div.year span:nth-child(1){
 	
 }*/
 .tipList ul li div.year span:nth-child(1) {
 	left: 5%;
 }

 .tipList ul li div.year span:nth-child(2) {
 	left: 17%;
 }

 .tipList ul li div.year span:nth-child(3) {
 	left: 28.5%;
 }

 .tipList ul li div.year span:nth-child(4) {
 	left: 41%;
 }

 .tipList ul li div.year span:nth-child(5) {
 	left: 63%;
 }

 .tipList ul li div.year span:nth-child(6) {
 	left: 76%;
 }
 .tipList ul li p.timeIcon{
 	width:100%
 	height: .63rem;
 	font-size: 0;
 	margin: .08rem 0;
 }
 .tipList ul li p.timeIcon img{
 	width: 100%;
 	height: 100%;
 }
 .tipList ul li p.kuang{
 	width: 1.87rem;
 	height: .6rem;
 	font-size: 0;
 	margin: 0 auto;
 	/*margin-left: .25rem;*/
 }
 .tipList ul li p.kuang img{
 	width: 100%;
 	height: 100%;
 	/*margin-left: 0.2rem;*/
 }
 .tipList ul li p.text{
 		background: #F4BA78;
 	border: 1px solid #D01217;
 	border-radius: 7px;
 	width: 85%;
 	font-size: .18rem;
 	color: #000;
 	padding: .21rem .08rem;
 	margin: .1rem auto 0;
 	display: none;
 }

 .tipList ul li p.daAn{
 	width: 2rem;
    height: .8rem;
 	background: url(../img/game4/titleIcon.png) no-repeat;
 	background-size: 100% 100%;
 	position: absolute;
 	top: 1.25rem;
 	left: 50%;
 	transform: translateX(-50%);
 	text-align: center;
    line-height: .8rem;
    font-size: .24rem;
    color: #fff;
    padding-right: .05rem;
    display: none;
 }


 .posTip{
 	width: 100%;
 	padding: .31rem 0;
 	height: .8rem;
 	/*display: none;*/
 }

 .posTip p{
 	width: 100%;
 	text-align: center;
 	font-size: .3rem;
 	line-height: .8rem;
 	color: #333;
 }
 .contList{
 	width: 95%;
 	height: 1rem;
 	/* display: flex; */
 	margin-left: 1.05rem ;
 /* 	position: absolute;
 	bottom: 5%;
 	left: 10%; */
 }
 .contList ul{
 	width: 100%;
 	height: 1rem;
 	/*display: flex;*/
 	display: none;
 	/*justify-content: flex-end;*/
 }
 .contList ul li{
 	/*flex: 1;*/
 	width: 16%;
 	position: absolute;
 	/* top: 85%; */
 	bottom : 5%;
 }
 /* .contList ul li.name1{
 	left:19% ;
 }
 .contList ul li.name2{
 	left: 35%;
 }
 .contList ul li.name3{
 	left:51% ;
 }
 .contList ul li.name4{
 	left: 67%;
 }
 .contList ul li.name5{
 	left: 84%;
 } */
 .contList ul li p{
 	width: 100%;
 	height: .8rem;
 	background: url(../img/game4/titleIcon.png) no-repeat;
 	background-size: 100% 100%;
 	text-align: center;
 	line-height: .8rem;
 	font-size: .26rem;
 	color: #fff;
 	padding-right: .05rem;
 	
 }
 .contList ul li.name4 p,
 .contList ul li.name5 p{
 	letter-spacing: -0.02rem;
 }


 /*手势*/

 .mask {
 	display: block;
 }

 .shoushi {
 	position: absolute;
 	right: -.66rem;
 	bottom: 0;
 }

 .shoushi img {
 	width: 50%;
 	height: 50%;
 }
--- a/css/game5.css
+++ b/css/game5.css
@ -0,0 +1,267 @@
 #wrap {
 	background: url(../img/game5/game5Bgm.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 	position: relative;
 }

 .tipsNum {
 	width: 1.45rem;
 	height: 3.2rem;
 	position: absolute;
 	left: 0;
 	top: 50%;
 	transform: translateY(-50%);
 }

 .tipText {
 	position: absolute;
 	top: 40%;
 	transform: translateY(-40%);
 	right: .65rem;
 	width: .8rem;
 	height: 4.32rem;
 }

 .tipText ul {
 	display: flex;
 }

 .tipText ul li {
 	flex: 1;
 	text-align: center;
 	color: #333;
 	font-size: .26rem;
 }

 .tipsNum img {
 	width: 100%;
 	height: 100%;
 }

 .titleIcon {
 	margin-top: .1rem;
 	margin-left: .1rem;
 }

 .titleIcon ul {
 	display: flex;
 	justify-content: flex-end;
 }

 .titleIcon ul li {
 	width: .98rem;
 	height: 1.24rem;
 }

 .titleIcon ul li img {
 	width: 100%;
 	height: 100%;
 }


 /*内容区*/

 .cont_wrap {
 	width: 10rem;
 	height: 5.17rem;
 	margin: 0 auto;
 	background: url(../img/game5/bgm1.png) no-repeat;
 	background-size: 100% 100%;
 	overflow: hidden;
 }
 .contList ul{
 	margin-top: .5rem;
 }
 .contList li{
 	display: none;
 }
 .cont_wrap li.end {
 	width: 9rem;
 	height: .8rem;
 	margin: 1.2rem auto 0;
 	color: #9E6538;
 	font-size: .32rem;
 }


 /*人物名称*/

 .tipList {
 	width: 9rem;
 	display: flex;
 	margin: 0 auto;
 }
 .tipList div.nameItem{
 	display: none;
 	width: 100%;
 }
 .tipList ul {
 	width: 100%;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	margin-top: .5rem;
 }

 .tipList ul li {
 	width: 19%;
 	margin-top: .25rem;
 	position: relative;
 }

 .tipList ul li p {
 	font-size: .32rem;
 	width: 100%;
 }

 .tipList div.left {
 	width: 100%;
 	height: .87rem;
 	/*background: linear-gradient(to bottom, #F4846B , #F64A32);*/
 	background: linear-gradient(to bottom, #FFD581, #F4A200);
 	border-radius: .44rem;
 	display: flex;
 	line-height: .87rem;
 	color: #FFFFFF;
 	font-size: .32rem;
 	text-align: center;
 }

 .tipList div.left p.chose {
 	height: 0.7rem;
 	margin-top: .09rem;
 	margin-left: .33rem;
 	padding-right: .18rem;
 	border-right: 1px solid #fff;
 	   display: flex;
    align-items: center;
    margin-right: .2rem;
 }
 }

 .tipList div.left p.name {
 	margin-left: .38rem;
 }

 .tipList ul li.active div.left {
 	background: linear-gradient(to bottom, #F4846B, #F64A32);
 }

 .choseIcon {
 	position: absolute;
 	right: .1rem;
 	bottom: 0.1rem;
 }

 .choseIcon p.trueIcon {
 	width: .83rem;
 	height: .63rem;
 	display: none;
 }

 .choseIcon p.falseIcon {
 	width: .61rem;
 	height: .61rem;
 	display: none;
 }

 .choseIcon p img {
 	width: 100%;
 	height: 100%;
 }


 /*按钮*/

 .btn {}

 .sureBtn {
 	width: 2.83rem;
 	height: .72rem;
 	position: absolute;
 	bottom: 19%;
 	left: 50%;
 	transform: translateX(-50%);
 }

 .sureBtn img {
 	width: 100%;
 	height: 100%;
 }

 .nextBtn {
 	display: none;
 	width: 2.13rem;
 	height: .72rem;
 	position: absolute;
 	bottom: 15%;
 	right: 0;
 }

 .nextBtn img {
 	width: 100%;
 	height: 100%;
 }


 /*成功后的样子*/

 .successCont {
 	position: absolute;
 	left: 0;
 	top: 20%;
 	width: 100%;
 	height: 100%;
 	display: none;
 }

 .nameList {
 	display: flex;
 	width: 100%;
 	justify-content: flex-end;
 }

 .nameList li {
 	width: 18%;
 	margin-left: .1rem;
 }

 .nameList li p {
 	height: .98rem;
 	width: 100%;
 	background: url(../img/game2/titleIcon.png) no-repeat;
 	background-size: 100% 100%;
 	font-size: .32rem;
 	text-align: center;
 	box-sizing: border-box;
 	padding: .18rem .2rem;
 	color: #fff;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .textList {
 	margin-left: .5rem;
 	margin-top: 1rem;
 }

 .textList ul {
 	width: 100%;
 	display: flex;
 	justify-content: flex-end;
 }

 .textList li {
 	width: 18%;
 	height: 100%;
 	margin-right: .1rem;
 	font-size: .18rem;
 	background: #F4BA78;
 	border: 1px solid #D01217;
 	border-radius: 7px;
 	box-sizing: border-box;
 	padding: .05rem .1rem;
 }
 /*成功后的样子end*/
--- a/css/globle.css
+++ b/css/globle.css
@ -0,0 +1,208 @@
@charset "utf-8";

 /* CSS Document */

 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 dd,
 dl,
 dt,
 li,
 ol,
 ul,
 input,
 select,
 button,
 textarea,
 tr,
 td {
 	padding: 0;
 	margin: 0;
 	border: none;
 }

 input,
 button,
 select,
 textarea,
 a,
 img {
 	outline: none;
 }


 /*去掉超链接或按钮点击时出现的虚线框黄色边框*/

 ::-moz-focus-inner {
 	border: 0px;
 }


 /*火狐的私有属性去掉点击时边框*/

 body,
 html {
 	width: 100%;
 	font-family: "Microsoft YaHei", "Arial", "SimSun";
 }

 ul,
 ul li,
 ol li,
 li {
 	list-style: none;
 }

 a,
 img,
 input,
 textarea {
 	border: none;
 }

 a {
 	text-decoration: none;
 }

 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

 .clearfix:after {
 	visibility: hidden;
 	display: block;
 	font-size: 0;
 	content: ".";
 	clear: both;
 	height: 0;
 }

 * html .clearfix {
 	zoom: 1;
 }

 *:first-child+html .clearfix {
 	zoom: 1;
 }

 .fl {
 	float: left;
 }

 .fr {
 	float: right;
 }

 .none {
 	display: none;
 }

 .inrow {
 	font-size: 0;
 	[;
 	font-size: 12px;
 	];
 	*font-size: 0;
 	font-family: arial;
 	[;
 	letter-spacing: -3px;
 	];
 	*letter-spacing: normal;
 	*word-spacing: -1px;
 }

 .inrow>li,
 .inrow span {
 	display: inline-block;
 	*display: inline;
 	*zoom: 1;
 	font-size: 14px;
 	letter-spacing: normal;
 	word-spacing: normal;
 }

 .dataNums {
 	position: absolute;
 	top: 38%;
 	left: 0;
 	display: block;
 	width: 1.9rem;
 	/*height: 40px;*/
 	/*margin-top: -37px;*/
 	text-align: center;
 }

 .dataNums .dataOne {
 	width: .22rem;
 	text-align: center;
 	/*height: 40px;*/
 	/*margin: 0px 3px;*/
 	text-align: center;
 	/*background: url(../img/game4/white.png)) no-repeat;*/
 	background: url(../img/game4/white.png) no-repeat;
 	background-size: 95% 90%;
 	position: absolute;
 	top: 0;
 }

 .dataNums .dataOne:nth-child(1) {
 	left: 4%;
 }

 .dataNums .dataOne:nth-child(2) {
 	left: 16%;
 }

 .dataNums .dataOne:nth-child(3) {
 	left: 27%;
 }

 .dataNums .dataOne:nth-child(4) {
 	left: 39%;
 }

 .dataNums .dataOne:nth-child(5) {
 	left: 62%;
 }

 .dataNums .dataOne:nth-child(6) {
 	left: 74%;
 }

 .dataNums .dataBoc {
 	position: relative;
 	/*width: 1.9rem;*/
 	height: 18px;
 	overflow: hidden;
 	/*margin-top: -.3rem;*/
 }

 .dataNums .dataBoc .tt {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 18px;
 }

 .dataNums .tt span {
 	width: 100%;
 	height: 18px;
 	font-size: 14px;
 	font-weight: bold;
 	/*font: bold 12px/75px "Arial";*/
 	color: #333;
 }
--- a/css/intoGame.css
+++ b/css/intoGame.css
@ -0,0 +1,138 @@
 .bgm {
 	width: 100%;
 	height: 100%;
 }

 .bgm img {
 	width: 100%;
 	height: 100%;
 }

 .btn {
 	position: absolute;
 	left: 50%;
 	bottom: 1rem;
 	/* transform: translateX(-50%); */
 	margin-left: -1.415rem;
 	width: 2.83rem;
 	height: .72rem;
 	background: #E40006;
 	border-radius: .12rem;
 	text-align: center;
 	line-height: .72rem;
 	color: #fff;
 	font-size: .36rem;
 	font-weight: bold;
 	z-index: 0;
 	
 }

 .masks {
 	position: fixed;
 	left: 0;
 	top: 0;
 	background: rgba(0, 0, 0, .6);
 	width: 100%;
 	height: 100%;
 	z-index: 999;
 	display: none;

 }

 /*.ruleCont{
 	position: absolute;
 	left: 0;
 	top: 0;
 }*/
 .title {
 	position: absolute;
    right: 50%;
    /* top: .1rem; */
    transform: translateX(50%);
    /* margin: auto; */
    bottom: 0.2rem;
    color: white;
    font-size: .28rem;
    font-weight: bold;
    padding-bottom: .05rem;
    /*border-bottom: 3px solid #E40006;*/
    border-bottom: 3px solid #fff;
 }

 .ruleText {
 	display: none;
 	width: 9.1rem;
 	height: 5.19rem;
 	background: url(../img/indexBgm.png) no-repeat;
 	background-size: 100% 100%;
 	position: absolute;
 	left: 50%;
 	top: 45%;
 	transform: translate(-50%, -50%);
 	z-index: 9999;
 }

 .ruleText ul {
 	height: 84%;
 }

 .ruleText ul li {
 	height: 84%;
 	width: 96%;
 	color: #000;
 	font-size: .26rem;
 	overflow-y: auto;
 	margin: 1rem auto 0;
 }

 .ruleText .line {
 	width: .03rem;
 	height: .38rem;
 	background: #E40006;
 	position: absolute;
 	left: 50%;
 	top: 100%;
 	transform: translateX(-50%);
 }

 .ruleText .close {
 	width: 2.83rem;
 	height: .72rem;
 	background: #E40006;
 	border-radius: .12rem;
 	text-align: center;
 	line-height: .72rem;
 	color: #fff;
 	font-size: .36rem;
 	font-weight: bold;
 	position: absolute;
 	left: 50%;
 	top: 107%;
 	transform: translateX(-50%);
 	z-index: 9999;
 }

 .audioImg {
 	position: absolute;
 	top: .2rem;
 	right: 2%;
 	width: .82rem;
 	height: .82rem;
 	z-index: 9999;
 	font-size: 0;
 }

 .audioImg img {
 	width: 100%;
 	height: 100%;
 }

 .o-img {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 96%;
 	height: 96%;
 	opacity: 0;
 	z-index: 20;
 }
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,9 @@
 body {
  margin: 0;
  padding: 0;
 }

 #container {
  position: fixed;
  touch-action: none;
 }
--- a/css/transition.css
+++ b/css/transition.css
@ -0,0 +1,20 @@
 .bgm img{
 	width: 100%;
 	height: 100%;
 }

 .btn {
 	position: absolute;
 	left: 50%;
 	bottom: .55rem;
 	transform: translateX(-50%);
 	width: 2.83rem;
 	height: .72rem;
 	background: #E40006;
 	border-radius: .12rem;
 	text-align: center;
 	line-height: .72rem;
 	color: #fff;
 	font-size: .36rem;
 	font-weight: bold;
 }
--- a/game1.html
+++ b/game1.html
@ -0,0 +1,604 @@
 <!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/game1.css" />
 </head>
 <style type="text/css">
 	.xr {
 		position: absolute;
 		width: 65px;
 		height: 65px;
 		top: 51%;
 		left: 62%;
 		z-index: 999;
 		/* animation: animatexr1 linear 2s; */
 	}

 	@keyframes animatexr1 {
 		from {
 			top: 51%;
 			left: 62%;
 		}

 		to {
 			top: 44%;
 			left: 42%;
 		}
 	}

 	.tips {
 		position: absolute;
 		z-index: 100;
 		width: 100%;
 		/* height: 100%; */
 		text-align: center;
 		line-height: 100%;
 		color: white !important;
 		font-size: .46rem !important;
 		top: 2.47rem;
 	}
 </style>

 <body>
 	<div id="wrap">
 		<div class="snowList"></div>
 		<div class="imgList">
 			<ul>
 				<li class="icon icon1" id="icon3" style="left:10%"><img src="img/game1/icon3.png" /></li>
 				<li class="icon icon2" id="icon2" style="left:28%"><img src="img/game1/icon2.png" /></li>
 				<li class="icon icon3" id="icon5" style="left:46%"><img src="img/game1/icon5.png" /></li>
 				<li class="icon icon4" id="icon1" style="left:64%"><img src="img/game1/icon1.png" /></li>
 				<li class="icon icon5" id="icon4" style="left:82%"><img src="img/game1/icon4.png" /></li>
 				<!--<li class="icon icon5" id="icon4" style="position:absolute;top:0%;left:82%;flex:0!important"><img src="img/game1/icon4.png" /></li>-->
 			</ul>

 		</div>

 		<div class="tipsNum"><img src="img/game1/firstIcon.png" /></div>
 		<!-- <div class="tipText">
 			<ul>
 				<li>请将下方关于党的英雄事迹</li>
 				<li>填<br />入<br />对<br />应<br />的<br />虚<br />线<br />框<br />中<br />！</li>
 			</ul>
 		</div> -->
 		<div class="titleIcon">
 			<ul>
 				<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>
 				<li><img src="img/game1/result.png" /></li>
 			</ul>
 		</div>
 		<div class="mapList">
 			<ul>
 				<li class="adr1">
 					<!--<p class="kuang"><img src="img/game1/Group 51.png"/></p>-->
 					<p class="jt1"><img src="img/game1/jt1.png" /></p>
 					<p class="dian"></p>
 					<p class="text">瑞金</p>
 				</li>
 				<img id="xr1" class="xr" style="display: none;" src="./img/game1/xiaoren.gif" alt="">
 				<img id="xr2" class="xr" style="display: none;transform:matrix(-1,0,0,1,0,0);"
 					src="./img/game1/xiaoren.gif" alt="">
 				<li class="adr2">
 					<p class="jt2"><img src="img/game1/jt2.png" /></p>
 					<p class="dian"></p>
 					<p class="text">遵义</p>
 					<p class="kuang kuang1" id="kuang1"><img src="img/game1/Group 51.png" /></p>
 					<p class="contText">中共中央政治局在贵州遵义 召开的独立自主地解决中国革命问题的一次极其重要的扩大会议。纠正博古、王明、李德等人“左”倾领导在军事指挥上的错误。</p>
 				</li>
 				<li class="adr3">
 					<p class="kuang" style="visibility: hidden;"><img src="img/game1/Group 51.png" /></p>
 					<p class="text">赤水河</p>
 					<p class="dian"></p>
 					<p class="jt3"><img src="img/game1/jt3.png" /></p>
 				</li>

 				<li class="adr4">
 					<p class="jt4"><img src="img/game1/jt4.png" /></p>
 					<p class="kuang kuang2" id="kuang2"><img src="img/game1/Group 51.png" /></p>
 					<p class="dian"></p>
 					<p class="text">金沙江</p>
 					<p class="contText">红军避敌锋芒、仅凭7只渡船在7天7夜间，2万多人的红军部队全部渡过金沙江 。红军摆脱了几十万敌军的围追堵截，取得了战略转移以来具有决定意义的胜利。</p>

 				</li>
 				<li class="adr5">
 					<p class="jt5"><img src="img/game1/jt5.png" /></p>
 					<p class="dian"></p>
 					<p class="text">泸定桥</p>
 					<p class="kuang kuang3" id="kuang3"><img src="img/game1/Group 51.png" /></p>
 					<p class="contText">中央红军部队，红四团战士在天下大雨的情况下，在崎岖陡峭的山路上跑步前进，终在5月29日凌晨6时许按时到达泸定桥西岸，并与东岸部队合围占领了泸定桥。</p>

 				</li>
 				<li class="adr6">
 					<p class="kuang kuang4" id="kuang4"><img src="img/game1/Group 51.png" /></p>
 					<p class="jt6"><img src="img/game1/jt6.png" /></p>
 					<p class="text">夹金山</p>
 					<p class="dian"></p>
 					<p class="contText">
 						红军在雪山战斗生活月之久。其间,除了要同凶残的敌人英勇作战外,还要克服重重困难,战胜极端恶劣的自然环境,爬过雪山,走过草地,实现战略转移。它既是长征精神的重要组成部分,又是长征精神的集中体现。
 					</p>

 				</li>
 				<li class="adr7">
 					<p class="kuang kuang5" id="kuang5"><img src="img/game1/Group 51.png" /></p>
 					<p class="jt7"><img src="img/game1/jt7.png" /></p>
 					<p class="text">松潘草地</p>
 					<p class="dian"></p>
 					<p class="contText">
 						在极端恶劣的环境下，红军官兵怀着共同的革命理想，发扬了令人感动的阶级友爱，没有垮掉，没有散掉，同甘共苦，以巨大的精神力量战胜了自然界的困难，终于在死神的威胁下夺路而出。</p>

 				</li>

 				<li class="adr8" style="display: flex;width: 2rem;justify-content: center;">
 					<p class="start"><img src="img/game1/star.png" /></p>
 					<p class="text">延安</p>
 				</li>
 			</ul>
 		</div>

 		<div class="mask">

 		</div>
 		<div class="tips" style="color: #333;
 		font-size: .26rem;">
 			<!--<p>请将下方关于党的英雄事迹,</p>-->
 			<p>请将下方关于长征的事迹,</p>
 			<p style="margin-top: .1rem;">拖拽至对应的虚线框中!</p>

 		</div>
 		<div class="shoushi"><img src="img/shoushi/1.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/suc1.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/suc1.png" /></p>
 	</div>
 	<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
 		<source src="img/audio/game1Bgm.mp3" type="audio/mp3" />
 		<!--您的浏览器不支持 audio 标签。-->
 	</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>
 </body>

 </html>
 <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/zQuery.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/snow.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 count = 0;
 	var xrwydata = [
 		[{
 			'top': '55%',
 			'left': '54%'
 		}, {
 			'top': '44%',
 			'left': '42%'
 		}],
 		[{
 			'top': '45%',
 			'left': '37%'
 		}, {
 			'top': '57%',
 			'left': '35%'
 		}, {
 			'top': '52%',
 			'left': '29%'
 		}],
 		[{
 			'top': '37%',
 			'left': '24%'
 		}],
 		[{
 			'top': '24%',
 			'left': '23%'
 		}],
 		[{
 			'top': '9%',
 			'left': '31%'
 		}],
 		[{
 			'top': '-2%',
 			'left': '45%'
 		}]
 	] //小人位移
 	var maskState1 = true
 	$('.mask').on('touchstart', function () {
 		if (maskState1) {
 			fadeoutmask()
 			maskState1 = false
 		}
 	})

 	function fadeoutmask() {
 		$('.mask').fadeOut();
 		$('.shoushi').fadeOut();
 		$(".tips").fadeOut()
 		$("#xr1").css({
 			display: 'block'
 		})
 		xranimate()
 	}
 	//小人位移动画
 	function xranimate() {
 		for (var x = 0; x < xrwydata[count].length; x++) {
 			if (count > 2) {
 				$("#xr1").css({
 					display: 'none'
 				})
 				$("#xr2").css({
 					display: 'block',
 					top: xrwydata[count - 1][xrwydata[count - 1].length - 1].top,
 					left: xrwydata[count - 1][xrwydata[count - 1].length - 1].left
 				})
 				$("#xr2").animate({
 					top: xrwydata[count][x].top,
 					left: xrwydata[count][x].left
 				}, 2000)
 			} else {
 				$("#xr1").animate(xrwydata[count][x], count == 0 ? 2100 : 2000 / parseFloat(xrwydata[count].length))
 			}
 		}
 	}
 	$(".tips").on('touchstart', function () {
 		fadeoutmask()
 		$('.imgList  ul').css('z-index', '0');
 		$('.xr').css('z-index', '0');

 	})
 	$('.shoushi').on('touchstart', function () {
 		fadeoutmask();
 		$('.imgList  ul').css('z-index', '9999');
 		$('.xr').css('z-index', '999999')

 	})
 	//手势隐藏end

 	$('.imgList  ul').animate({
 		'bottom': '0.4rem'
 	}, 1000)
 	$('.imgList  ul').animate({
 		'bottom': '0.1rem'
 	}, 300)

 	var time = 0;
 	var timeLength = setInterval(function () {
 		//		console.log(time)
 		time++;
 	}, 1000)

 	var showSate = false;
 	maskState()

 	function maskState() {
 		if (showSate) {
 			$('.imgIcon').animate({
 				'top': '0',
 				"right": '32%',
 				'width': '.98rem',
 				'height': '1.24rem'
 			}, 2000)

 			function yincang() {
 				$('.titleIcon ul li').eq(0).css({
 					'visibility': 'hidden'
 				})
 			}
 			setTimeout('yincang()', 2000)
 		}

 	}
 	$('.deepBtn').click(function () {
 		var url = location.href.split('?')[1]
 		console.log(url)
 		window.location.href = "game2.html?" + url
 	})

 	$('.close').on('touchstart', function () {
 		$('.mask').fadeOut();
 		$('.success .sucImg div').fadeOut();
 		$('.success').css('z-index', '-2222')
 		$('.success .close').fadeOut();
 		$('.mapList li').css('z-index', '0')
 		$('.xr').css('z-index', '999999')
 		$('.imgList  ul').css('z-index', '-1');

 	})

 	/* $('.adr1 .jt1').animate({
 		width:'2.48rem'
 	},1000) */
 	$(document).ready(function () {
 		$(".adr2 .jt2").css("display", "none");
 		$(".adr3").css("display", "none");
 		$(".adr4").css("display", "none");
 		$(".adr5").css("display", "none");
 		$(".adr6").css("display", "none");
 		$(".adr7").css("display", "none");
 		$(".adr8").css("display", "none");
 	})
 	var cssArr = [$(".adr2 .jt2").css("display", "block")];
 	var iconArr = [{
 		"top": "0%",
 		"left": "10%"
 	}, {
 		"top": "0%",
 		"left": "28%"
 	}, {
 		"top": "0%",
 		"left": "46%"
 	}, {
 		"top": "0%",
 		"left": "64%"
 	},
 	{
 		"top": "0%",
 		"left": "82%"
 	}
 	];
 	var trueArr = ["3", "2", "5", "1", "4"];

 	var img1State = false;
 	//	$(".kuang1").addClass().siblings()
 	$(".kuang1").on('touchstart', function () {
 		console.log('点击')
 		if (img1State) {
 			$('.adr4 p.contText').css('display', 'none')
 			$('.adr5 p.contText').css('display', 'none')
 			$('.adr6 p.contText').css('display', 'none')
 			$('.adr7 p.contText').css('display', 'none')
 			$('.adr2 p.contText').slideToggle()
 			$('.adr2').css('z-index', '9999').siblings().css('z-index', '0')
 		}
 	})
 	$('.kuang2').on('touchstart', function () {
 		if (count >= 2) {

 			$('.adr2 p.contText').css('display', 'none')
 			$('.adr5 p.contText').css('display', 'none')
 			$('.adr6 p.contText').css('display', 'none')
 			$('.adr7 p.contText').css('display', 'none')
 			$('.adr4 p.contText').slideToggle()
 			$('.adr4').css('z-index', '9999').siblings().css('z-index', '0')

 		}
 	})
 	$('.kuang3').on('touchstart', function () {
 		if (count >= 3) {
 			$('.adr2 p.contText').css('display', 'none')
 			$('.adr4 p.contText').css('display', 'none')
 			$('.adr6 p.contText').css('display', 'none')
 			$('.adr7 p.contText').css('display', 'none')
 			$('.adr5 p.contText').slideToggle()
 			$('.adr5').css('z-index', '9999').siblings().css('z-index', '0')

 		}
 	})
 	$('.kuang4').on('touchstart', function () {
 		if (count >= 4) {
 			$('.adr4 p.contText').css('display', 'none')
 			$('.adr5 p.contText').css('display', 'none')
 			$('.adr2 p.contText').css('display', 'none')
 			$('.adr7 p.contText').css('display', 'none')
 			$('.adr6 p.contText').slideToggle()
 			$('.adr6').css('z-index', '9999').siblings().css('z-index', '0')

 		}
 	})
 	$('.kuang5').on('touchstart', function () {
 		if (count >= 5) {
 			$('.adr4 p.contText').css('display', 'none')
 			$('.adr5 p.contText').css('display', 'none')
 			$('.adr6 p.contText').css('display', 'none')
 			$('.adr2 p.contText').css('display', 'none')
 			$('.adr7 p.contText').slideToggle()
 			$('.adr7').css('z-index', '9999').siblings().css('z-index', '0')

 		}
 	})
 	//拖拽
 	var icond = $(".icon");
 	icond.each(function (index) {
 		$(this).on('touchstart', function (evt) {
 			var e = event || evt;
 			e.preventDefault(); //阻止其他事件
 			//要做的事情
 			$(".tipText").css("display", "none");
 			$(this).find('img').css({
 				'width': '90%',
 				'height': '90%'
 			})
 		}).on('touchmove', function (evt) {
 			var e = event || evt;
 			e.preventDefault(); //阻止其他事件

 			// 如果这个元素的位置内只有一个手指的话
 			//console.log(e.targetTouches)
 			//console.log(event.targetTouches[0].clientX+"/"+event.targetTouches[0].clientY+"/"+event.targetTouches[0].pageX+"/"+event.targetTouches[0].pageY)
 			if (e.targetTouches.length == 1) {
 				var touch = e.targetTouches[0]; // 把元素放在手指所在的位置
 				$(this).css("left", (touch.pageY - parseInt($(this).width()) / 2 + 'px'));
 				$(this).css("top", '-' + (touch.pageX - parseInt($(this).width()) / 2 + 'px'));
 			}
 		}).on('touchend', function (evt) {
 			$(this).find('img').css({
 				'width': '100%',
 				'height': '100%'
 			})

 			var e = event || evt;
 			e.preventDefault(); //阻止其他事件
 			//判断是否进入目标元素
 			var index = this.id.substring(this.id.length - 1, this.id.length)
 			if (index == (count + 1)) {
 				var tuozhuai = document.getElementById(this.id).getBoundingClientRect();
 				var mubiao = document.getElementById('kuang' + (count + 1)).getBoundingClientRect();
 				var x = tuozhuai.left + tuozhuai.width / 2;
 				var y = tuozhuai.bottom + tuozhuai.height / 2;
 				var xmin = mubiao.left;
 				var xmax = mubiao.left + mubiao.width;
 				var ymin = mubiao.bottom;
 				var ymax = mubiao.bottom + mubiao.height;
 				if (xmin <= x && x <= xmax && ymin <= y && y <= ymax) {
 					$(".icon" + (getArrayIndex(trueArr, index) + 1)).css("display", "none");
 					//地图变动
 					if (count == 0) {
 						img1State = true
 						$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon1.png");
 						$(".adr2 .jt2").css("display", "block")
 						$(".adr3").css("display", "block");
 						$(".adr4").css("display", "block");
 						$(".adr4 .jt4").css("display", "none")

 					} else if (count == 1) {
 						$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon2.png");
 						$(".adr4 .jt4").css("display", "block")
 						$(".adr5").css("display", "block");
 						$(".adr5 .jt5").css("display", "none")
 					} else if (count == 2) {
 						$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon3.png");
 						$(".adr5 .jt5").css("display", "block")
 						$(".adr6").css("display", "block");
 						$(".adr6 .jt6").css("display", "none")
 						$('.snowList').fadeIn(1000)
 					} else if (count == 3) {
 						$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon4.png");
 						$(".adr6 .jt6").css("display", "block")
 						$(".adr7").css("display", "block");
 						$(".adr7 .jt7").css("display", "none")

 					} else if (count == 4) {
 						$(".kuang" + (count + 1) + " img").attr("src", "img/game1/icon5.png");
 						$(".adr7 .jt7").css("display", "block")
 						$(".adr8").css("display", "flex");
 						$('.snowList').fadeOut(1000)

 					}

 					count++;
 					if (count == 5) {
 						$('.imgList  ul').css('z-index', '-1');

 						//						alert("游戏结束");

 						//						setTimeout('yincang()', 2000)
 						clearInterval(timeLength);
 						//						console.log(time)
 						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) + '秒')

 						}

 						setTimeout(function () {
 							$('.mask').fadeIn();
 							$('.success').fadeIn();
 							$('.imgIcon').fadeIn();
 							$('.deepBtn').fadeIn()
 							showSate = true;
 							maskState()
 							$('.xr').css('z-index', '0')
 							$('.mapList li').css('z-index', '-9999')

 						}, 1000)

 					}
 					//错误
 					//					var trueAudio = document.getElementById('trueAudio');
 					//					trueAudio.play();
 					audioAutoPlay('trueAudio');
 					xranimate()
 					//					alert('音频')

 				} else {
 					$(this).css("top", iconArr[getArrayIndex(trueArr, index)].top);
 					$(this).css("left", iconArr[getArrayIndex(trueArr, index)].left);
 				}
 			} else {
 				$(this).css("top", iconArr[getArrayIndex(trueArr, index)].top);
 				$(this).css("left", iconArr[getArrayIndex(trueArr, index)].left);
 				//错误提示音
 				//				var falseAudio = document.getElementById('falseAudio');
 				//				falseAudio.play();
 				audioAutoPlay('falseAudio');
 				//					alert('音频')

 			}
 		})
 	});
 	$('.icon').on('onmove');

 	function getArrayIndex(arr, obj) {
 		var i = arr.length;
 		while (i--) {
 			if (arr[i] === obj) {
 				return i;
 			}
 		}
 		return -1;
 	}
 </script>
--- a/game2.html
+++ b/game2.html
@ -0,0 +1,656 @@
 <!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>
--- a/game3.html
+++ b/game3.html
@ -0,0 +1,479 @@
 <!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/game3.css" />
 	</head>
 	<style type="text/css">
 		.game3tips {
 			position: absolute;
 			z-index: 100;
 			width: 100%;
 			/* height: 100%; */
 			text-align: center;
 			line-height: 100%;
 			color: white!important;
 			font-size: .46rem!important;
 			top: 3.7rem;
 		}
 	</style>

 	<body>

 		<div id="wrap">
 			<div class="tipsNum"><img src="img/game3/firstIcon.png" /></div>
 			<div class="titleIcon">
 				<ul>
 					<li><img src="img/success/suc1.png" /></li>
 					<li><img src="img/success/suc2.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>
 			<p class="game3tips">
 				请翻转图片将上方党的重要人物与下方名字对应！
 			</p>
 			<div class="cont_wrap">
 				<ul class="faceList">

 				</ul>
 			</div>
 			<div class="middleImg">
 				<ul>
 					<li>
 						<img src="img/game3/fan/kuang.png" />
 					</li>

 				</ul>

 				<ul>
 					<li>
 						<img src="img/game3/fan/kuang.png" />
 					</li>

 				</ul>
 				<ul>
 					<li>
 						<img src="img/game3/fan/kuang.png" />
 					</li>

 				</ul>
 				<ul>
 					<li>
 						<img src="img/game3/fan/kuang.png" />
 					</li>

 				</ul>
 				<ul>
 					<li>
 						<img src="img/game3/fan/kuang.png" />
 					</li>

 				</ul>

 			</div>

 			<!--成功-->
 			<div class="mask"></div>
 			<div class="shoushi"><img src="img/shoushi/3.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/suc33.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/suc33.png" /></p>
 		</div>
 		<audio id="bgmAudio" hidden="true" autoplay="autoplay">
 			<source src="img/audio/game3Bgm.mp3" type="audio/mp3" />
 			<!--您的浏览器不支持 audio 标签。-->
 		</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>
 	</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);
 	}
 	    var url = location.href.split('?')[1]
 	var audioState = url.split('=')[1];
 	if (audioState == 'true') {
 		audioAutoPlay('bgmAudio');
 	}
 	
 	var imgArr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 	var nameArr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 	var trueArr = [];

 	var tuArr = [
 		"img/game3/fan/img11.png",
 		"img/game3/fan/img22.png",
 		"img/game3/fan/img33.png",
 		"img/game3/fan/img44.png",
 		"img/game3/fan/img55.png",
 		"img/game3/fan/img66.png",
 		"img/game3/fan/img77.png",
 		"img/game3/fan/img88.png",
 		"img/game3/fan/img99.png"

 	]
 	var textArr = [
 		"img/game3/fan/text11.png",
 		"img/game3/fan/text22.png",
 		"img/game3/fan/text33.png",
 		"img/game3/fan/text44.png",
 		"img/game3/fan/text55.png",
 		"img/game3/fan/text66.png",
 		"img/game3/fan/text77.png",
 		"img/game3/fan/text88.png",
 		"img/game3/fan/text99.png"
 	]
 	var wordArr = [
 		'彭德怀',
 		'朱德',
 		'贺龙',
 		'聂荣臻',
 		'刘伯承',
 		'陈毅',
 		'罗荣恒',
 		'徐向前',
 		'叶剑英'
 	]
 	randArr(imgArr);
 	var newArr = imgArr.slice(0, 5);
 	var faceList = '';
 	//	var textList='';
 	for(var i = 0; i <= 4; i++) {
 		faceList += '<li class="faceItem"  ><p class="backImg"><img data-id=' + newArr[i] + ' src="img/game3/fan/backImg.png" /></p><p class="fontImg"><img src="' + tuArr[newArr[i]] + '" /></p></li>'
 	}
 	randArr(newArr)
 	trueArr = newArr;
 	console.log(trueArr)
 	for(var i = 0; i <= 4; i++) {
 		faceList += '<li class="faceItem last" ><p class="backImg"><img data-id=' + newArr[i] + ' src="img/game3/fan/backText.png" /></p><p class="fontImg"><img src="' + textArr[newArr[i]] + '" /></p></li>'
 		//		 trueArr.push(newArr[i]) 
 	}
 	$('.faceList').html(faceList)
 	//手势隐藏
 	var maskState1 = true
 	$('.mask').on('touchstart', function() {
 		if(maskState1) {
 			fadeoutmask()
 			maskState1 = false
 		}
 	})

 	$('.game3tips').on('touchstart', function() {
 		fadeoutmask()
 	})

 	function fadeoutmask() {
 		$('.mask').fadeOut();
 		$('.shoushi').fadeOut();
 		$(".game3tips").fadeOut()
 	}
 	$('.shoushi').on('touchstart', function() {
 		fadeoutmask()
 	})
 	//手势隐藏end

 	var time = 0;
 	var timeLength = setInterval(function() {
 		time++;
 	}, 1000)
 	//	var trueArr = [7, 9, 6, 8, 5];
 	var start = -1;
 	var end = null;
 	var trueIndex = null;
 	var count = 0;
 	var clickIndex = [];
 	var newTrueArr = [];
 	var icond = $(".faceItem");
 	icond.each(function(index) {
 		$(this).on('touchstart', function(evt) {
 			var e = event || evt;
 			e.preventDefault(); //阻止其他事件
 			//			e.target.dataset.id
 			$('.guize span').fadeOut()
 		}).on('touchmove', function(evt) {
 			var e = event || evt;
 			e.preventDefault(); //阻止其他事件
 		}).on('touchend', function(evt) {
 			var e = event || evt;
 			console.log(e)
 			e.preventDefault(); //阻止其他事件
 			if(clickIndex.indexOf($(this).index()) == -1) {
 				$(this).find('p.backImg').addClass('backShow')
 				$(this).find('p.fontImg').addClass('fontShow')
 				clickIndex.push($(this).index());
 				newTrueArr.push(e.target.dataset.id)

 				//					start = $(this).index();

 				if(start == -1) {
 					start = $(this).index();
 				} else if($(this).index() <= 4 && start <= 4) {
 					$('.faceList li').eq(start).find('p.backImg').removeClass('backShow');
 					$('.faceList li').eq(start).find('p.fontImg').removeClass('fontShow');
 					clickIndex.splice(getArrayIndex(clickIndex, start), 1);
 					start = $(this).index();
 				} else if($(this).index() > 4 && start > 4) {
 					$('.faceList li').eq(start).find('p.backImg').removeClass('backShow');
 					$('.faceList li').eq(start).find('p.fontImg').removeClass('fontShow');
 					clickIndex.splice(getArrayIndex(clickIndex, start), 1);
 					start = $(this).index();
 				} else if(end == null) {
 					end = $(this).index();
 					trueIndex = e.target.dataset.id;
 					if(newTrueArr.indexOf(e.target.dataset.id) == -1) {
 						newTrueArr.push(e.target.dataset.id)
 					}
 					console.log(newTrueArr + 'newTrueArr')
 					//判断是否是一对
 					if(newTrueArr[newTrueArr.length - 1] == newTrueArr[newTrueArr.length - 2]) {
 						var state = true;
 						newTrueArr = [];
 					} else {
 						var state = false;
 						newTrueArr = [];

 					}
 					if(state) {
 						console.log(index)
 						console.log(clickIndex);
 						start = -1;
 						newTrueArr = [];
 						end = null;
 						count++;

 						if(count == 1) {
 							var cont1 = '';
 							setTimeout(function() {

 								$('.faceList li').eq(clickIndex[0]).find('img').fadeOut(1000);
 								$('.faceList li').eq(clickIndex[1]).find('img').fadeOut(1000);
 								cont1 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>'
 								$('.middleImg ul').eq(count - 1).html(cont1);
 								$('.middleImg ul').eq(count - 1).find('li').css('display', 'none')
 							}, 1000);
 							setTimeout(function() {
 								$('.middleImg ul').eq(count - 1).find('li').fadeIn(1000)
 							}, 1000);
 						}
 						if(count == 2) {
 							var cont2 = '';
 							setTimeout(function() {
 								$('.faceList li').eq(clickIndex[2]).find('img').fadeOut(1000)
 								$('.faceList li').eq(clickIndex[3]).find('img').fadeOut(1000)
 								cont2 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>'
 								$('.middleImg ul').eq(count - 1).html(cont2);
 								$('.middleImg ul').eq(count - 1).find('li').css('display', 'none')
 							}, 1000);
 							setTimeout(function() {
 								$('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide()
 							}, 1000);
 						}
 						if(count == 3) {
 							var cont3 = '';

 							setTimeout(function() {
 								$('.faceList li').eq(clickIndex[4]).find('img').fadeOut(1000)
 								$('.faceList li').eq(clickIndex[5]).find('img').fadeOut(1000)

 								cont3 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>'
 								$('.middleImg ul').eq(count - 1).html(cont3);
 								$('.middleImg ul').eq(count - 1).find('li').css('display', 'none')
 							}, 1000);
 							setTimeout(function() {
 								$('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide()
 							}, 1000);
 						}
 						if(count == 4) {
 							var cont4 = '';

 							setTimeout(function() {
 								$('.faceList li').eq(clickIndex[6]).find('img').fadeOut(1000)
 								$('.faceList li').eq(clickIndex[7]).find('img').fadeOut(1000)

 								cont4 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>'
 								$('.middleImg ul').eq(count - 1).html(cont4);
 								$('.middleImg ul').eq(count - 1).find('li').css('display', 'none')
 							}, 1000);
 							setTimeout(function() {
 								$('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide()
 							}, 1000);
 						}
 						var trueAudio = document.getElementById('trueAudio');
 						trueAudio.play();
 						audioAutoPlay('trueAudio')
 						if(count == 5) {
 							var cont5 = '';

 							setTimeout(function() {
 								$('.faceList li').eq(clickIndex[8]).find('img').fadeOut(1000)
 								$('.faceList li').eq(clickIndex[9]).find('img').fadeOut(1000)

 								cont5 += '<li><p class="img"><img src="' + tuArr[trueIndex] + '" /></p><p class="text">' + wordArr[trueIndex] + '</p></li>'
 								$('.middleImg ul').eq(count - 1).html(cont5);
 								$('.middleImg ul').eq(count - 1).find('li').css('display', 'none')
 							}, 1000);
 							setTimeout(function() {
 								$('.middleImg ul').eq(count - 1).find('li').fadeIn(1000).siblings().hide()
 							}, 1000);

 							setTimeout(function() {
 								success();
 							}, 3000)
 						}
 					} else {
 						//恢复原样
 						var startIndex = start;
 						var endIndex = end;
 						newTrueArr = [];
 						setTimeout(function() {
 							$('.faceList li').eq(startIndex).find('p.backImg').removeClass(
 								'backShow');
 							$('.faceList li').eq(startIndex).find('p.fontImg').removeClass(
 								'fontShow');
 							clickIndex.splice(getArrayIndex(clickIndex, startIndex), 1);
 							$('.faceList li').eq(endIndex).find('p.backImg').removeClass(
 								'backShow');
 							$('.faceList li').eq(endIndex).find('p.fontImg').removeClass(
 								'fontShow');
 							clickIndex.splice(getArrayIndex(clickIndex, endIndex), 1);
 						}, 500)
 						start = -1;
 						end = null;
 						//错误提示音
 						var falseAudio = document.getElementById('falseAudio');
 						falseAudio.play();
 						audioAutoPlay('falseAudio')
 					}
 				}
 			}
 		})
 	})

 	function success() {
 		clearInterval(timeLength);
 		//						console.log(time)
 		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()
 		$('.cont_wrap').css({
 			'position': 'absolute',
 			'z-index': '-9999'
 		})
 		$('.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": '16%',
 					'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 = "game4.html?" + url
 		})
 		$('.close').on('touchstart', function() {
 			$('.mask').fadeOut();
 			$('.success .sucImg div').fadeOut();
 			$('.success .close').fadeOut();
 		})
 	}

 	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>
--- a/game4.html
+++ b/game4.html
@ -0,0 +1,481 @@
 <!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/game4.css" />
 		<link rel="stylesheet" type="text/css" href="css/globle.css" />

 	</head>
 	<style type="text/css">
 		.game4tips {
 			position: absolute;
 			z-index: 100;
 			width: 100%;
 			/* height: 100%; */
 			text-align: center;
 			line-height: 100%;
 			color: white!important;
 			font-size: .46rem!important;
 			top: 1.5rem;
 		}
 	</style>

 	<body>

 		<div id="wrap">
 			<div class="tipsNum"><img src="img/game4/firstIcon.png" /></div>
 			<div class="titleIcon">
 				<ul>
 					<li><img src="img/success/suc1.png" /></li>
 					<li><img src="img/success/suc2.png" /></li>
 					<li><img src="img/success/suc33.png" /></li>
 					<li><img src="img/game1/result.png" /></li>
 					<li><img src="img/game1/result.png" /></li>
 				</ul>
 			</div>
 			<!--<div class=" " id="dataNums">1935年1月</div>-->
 			<div class="cont_wrap">
 				<div class="tipList">
 					<ul>

 					</ul>
 				</div>

 				<div class="game4tips">
 					<p>请根据上方会议时间，  </p>
 					<p style="margin-top: .1rem;">点击选择下方正确会议名称！</p>
 				</div>
 				<div class="contList">
 					<ul>
 						<!--<li class="textName name3" id="icon3" style="left:15%">
 							<p class="btnText">十一届三中全会</p>
 						</li>
 						<li class="textName name5" id="icon5" style="left:32%">
 							<p class="btnText">十九届五中全会</p>
 						</li>
 						<li class="textName name1" id="icon1" style="left:49%">
 							<p class="btnText">遵义会议</p>
 						</li>
 						<li class="textName name2" id="icon2" style="left:66%">
 							<p class="btnText"> 中共八大</p>
 						</li>
 						<li class="textName name4" id="icon4" style="left:83%">
 							<p class="btnText">十三届三中全会</p>
 						</li>-->
 					</ul>
 					<!--<ul>
 						<li class="textName name3" id="icon3" style="left:15%">
 							<p class="btnText">遵义会议</p>
 						</li>
 						<li class="textName name5" id="icon5" style="left:32%">
 							<p class="btnText">十三届三中全会</p>
 						</li>
 						<li class="textName name1" id="icon1" style="left:49%">
 							<p class="btnText">十一届三中全会</p>
 						</li>
 						<li class="textName name2" id="icon2" style="left:66%">
 							<p class="btnText">中共八大</p>
 						</li>
 						<li class="textName name4" id="icon4" style="left:83%">
 							<p class="btnText"> 十九届五中全会</p>
 						</li>
 					</ul>
 					<ul>
 						<li class="textName name3" id="icon3" style="left:15%">
 							<p class="btnText">十一届三中全会</p>
 						</li>
 						<li class="textName name5" id="icon5" style="left:32%">
 							<p class="btnText">中共八大</p>
 						</li>
 						<li class="textName name1" id="icon1" style="left:49%">
 							<p class="btnText">十三届三中全会</p>
 						</li>
 						<li class="textName name2" id="icon2" style="left:66%">
 							<p class="btnText">遵义会议 </p>
 						</li>
 						<li class="textName name4" id="icon4" style="left:83%">
 							<p class="btnText">十九届五中全会</p>
 						</li>
 					</ul>
 					<ul>
 						
 					</ul>
 					<ul>
 						
 					</ul>-->
 				</div>
 			</div>
 			<!--成功-->
 			<div class="mask"></div>
 			<div class="shoushi"><img src="img/shoushi/4.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/suc44.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/suc44.png" /></p>
 		</div>
 		<audio id="bgmAudio" hidden="true" autoplay="autoplay">
 			<source src="img/audio/game4Bgm.mp3" type="audio/mp3" />
 			<!--您的浏览器不支持 audio 标签。-->
 		</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>
 	</body>

 </html>
 <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/num.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 	function yearTime(time) {
 		$("#dataNums").rollNumDaq({
 			deVal: time
 		});
 	}
 </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);
 	}
 	   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;
 			yearTime(newTiemArr1[0])

 		} else {
 			$('.mask').fadeOut();
 			$('.success .sucImg div').fadeOut();
 			$('.success .close').fadeOut();
 		}
 	})
 	$('.shoushi').on('touchstart',
 		function() {
 			fadeoutmask()
 			yearTime(newTiemArr1[0])
 		})
 	$('.game4tips').on('touchstart', function() {
 		fadeoutmask()
 		yearTime(newTiemArr1[0])

 	})

 	function fadeoutmask() {
 		$('.mask').fadeOut();
 		$('.shoushi').fadeOut();
 		$(".game4tips").fadeOut()
 		maskState1 = false;

 	}
 	//手势隐藏end
 	var time = 0;
 	var timeLength = setInterval(function() {
 		//		console.log(time)
 		time++;
 	}, 1000)

 	var true1 = document.getElementsByClassName('true1');
 	//	console.log(true1[0].offsetLeft)
 	var textNameArr = [
 		"left: 12%",
 		"left: 29%",
 		"left: 46%",
 		"left: 63%",
 		"left: 80%"
 	];
 	//正确答案数组
 	var trueArr = ["1", "2", "3", "4", "5"];
 	var trueArrNew = ["3", "5", "1", "2", "4"];
 	//	var trueArrNew = [];
 	//事件名称数组
 	var nameArr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 	//事件时间数组
 	var oldtimeArr = [1, 2, 3, 4, 5, 6, 7, 8];
 	var timeArr = [1, 2, 3, 4, 5, 6, 7, 8];
 	var timeArrNew = [192107, 192207, 192912, 193501, 194504, 194903, 195609, 197812, 202010];
 	//文字数组
 	//	var writeArr = [
 	//		'中共一大2107',
 	//		'中共二大2207',
 	//		'古田会议2912',
 	//		'遵义会议3501',
 	//		'中共七大4504',
 	//		"七届二中全会4903",
 	//		'中共八大5609',
 	//		'十一届三中全会7812',
 	//		'十三届三中全会2012',
 	//		'十九届五中全会2020'
 	//	];
 	var writeArr = [
 		'中共一大',
 		'中共二大',
 		'古田会议',
 		'遵义会议',
 		'中共七大',
 		"七届二中全会",
 		'中共八大',
 		'十一届三中全会',
 //		'十三届三中全会',
 		'十九届五中全会'
 	];
 	var contArr = [
 		'一大召开标志着中国共产党的正式成立，犹如一轮红日在东方冉冉升起，照亮了中国革命的前程。这是近代中国社会进步和革命发展的客观要求，是开天辟地的大事变。中国革命的面目就焕然一新了。',
 		'在中国近代史上第一次明确地提出了反帝反封建的民主革命纲领，指明了中国人民革命斗争的方向，表明了共产党已经接受了列宁关于殖民地革命的理论，为党确立新民主主义革命的基本思想奠定了基础',
 		'古田会议将马克思列宁主义与中国革命斗争的具体实践相结合，解决了如何从加强党的思想工作着手保持党的无产阶级先锋队性质和建设新型人民军队的根本问题，是人民军队建设史上一次极其重要的会议。',
 		'（1）集中解决当时具有决定意义的军事问题和组织问题 <br />（2）开始确立以毛泽东为代表的马克思主义的正确路线在中共中央的领导地位<br />（3）成为党的历史上一个生死攸关的转折点',
 		'它总结了中国新民主主义革命20多年曲折发展的历史经验，制定了正确的路线、纲领和策略，克服了党内的错误思想，使全党特别是党的高级干部对于中国民主革命的发展规律有了比较明确的认识。',
 		"七届二中全会是一次制定夺取全国胜利和胜利后的各方面政策的极其重要的决策性会议。这次会议完满地解决了中国共产党夺取民主革命的最后胜利和由民主主义革命向社会主义革命转变的一系列重大方针问题。",
 		'（1）大会正确地分析了社会主义改造完成后中国社会的主要矛盾和主要任务。<br /> （2）八大的路线是正确的，它为社会主义事业的发展和党的建设指明了方向。<br /> （3）陈云在发言中提出三个主体、三个补充思想。',
 		'会议高度评价了实践是检验真理的唯一标准观点，实行改革开放，把党和国家工作的重心转移到经济建设上来。党的十一届三中全会标志着我党重新确立了马克思主义思想路线、政治路线和组织路线。',
 //		'把科学发展观确定为党的指导思想，阐明中国特色社会主义的总依据、总布局和总任务，阐明中国特色社会主义道路，明确提出夺取中国特色社会主义新胜利必须牢牢把握的基本要求，提出全面建成小康社会的新要求。',
 		'“十三五”时期，全面深化改革取得重大突破，全面依法治国取得重大进展，全面从严治党取得重大成果，国家治理体系和治理能力现代化加快推进，中国共产党领导和我国社会主义制度优势进一步彰显'
 	]
 	//打乱时间
 	randArr(nameArr);
 	var newTitleArr = nameArr.slice(0, 5);
 	var newTiemArr = [];
 	var tipList = '';
 	var deepBtn = '';
 	var newIndex = [];
 	var daAnIndex = null;
 	for(var i = 0; i <= 4; i++) {
 		tipList += '<li class="true' + (i + 1) + '"><div class="time"></div><p class="timeIcon"><img src="img/game4/tiemIcon1.png" /></p><p class="kuang" id="kuang1"><img src="img/game4/kuangbefore.png" /></p>' +
 			'<div class="year"></div></li>'
 		newTiemArr.push(timeArrNew[newTitleArr[i]])
 		newIndex.push(newTitleArr[i])
 		deepBtn += '<li class="textName" data-id=' + newTitleArr[i] + '  style="' + textNameArr[i] + '"><p class="btnText">' + writeArr[newTitleArr[i]] + '</p></li>'
 	}
 	var newTiemArr1 = newTiemArr.sort();

 	$('.tipList ul').html(tipList)
 	$('.contList ul').html(deepBtn)
 	var showTimeArr = [];
 	//取前五个元素并按照时间排序
 	for(var i = 0; i < 5; i++) {
 		showTimeArr[getArrayIndex(oldtimeArr, timeArr[i])] = timeArr[i];
 	}
 	for(var i = 0; i < showTimeArr.length; i++) {
 		if(!showTimeArr[i]) {
 			showTimeArr.splice(i, 1);
 			i = i - 1;
 		}
 	}

 	var count = 0;

 	//点击答案
 	var trueNums = 0
 	console.log(trueArr)
 	$('.contList ul').eq(trueNums).css('display', 'flex');
 	$('.tipList>ul>li').eq(trueNums).css('display', 'block');
 	$('.tipList>ul>li').eq(trueNums).find('.time').attr('id', 'dataNums');
 	$('.contList ').on('touchstart', 'li', function(e) {
 		console.log(e)
 		var idIndex = e.currentTarget.dataset.id;

 		for(var i = 0; i <= timeArrNew.length; i++) {
 			if(timeArrNew[i] == newTiemArr1[trueNums]) {
 				console.log(i)
 				daAnIndex = i
 			}
 		}
 		if(daAnIndex == idIndex) {
 			//正确
 			var ans = '<p class="text">' + contArr[daAnIndex] + '</p><p class="daAn">' + writeArr[daAnIndex] + '</p>'
 			$('.tipList li').eq(trueNums).append(ans)
 			var trueAudio = document.getElementById('trueAudio');
 			trueAudio.play();
 			audioAutoPlay('trueAudio')
 			$('.tipList>ul>li').eq(trueNums).find('.daAn').fadeIn(1000);
 			$('.tipList>ul>li').eq(trueNums).find('.kuang').css('visibility', 'hidden');
 			$('.tipList>ul>li').eq(trueNums).find('.text').slideDown(1000);
 			$(this).fadeOut(1000)
 			setTimeout(function() {
 				trueNums++;
 				$('.tipList>ul>li').eq(trueNums).css('display', 'block');
 				//				$('.contList ul').eq(trueNums).css('display', 'flex').siblings().css('display', 'none');
 				//更换选项
 				if(trueNums<5) {
 					deepBtn = '';
 					var newIndexArr = [];
 					var ansIndex = null;
 					for(var i = 0; i <= timeArrNew.length; i++) {
 						if(timeArrNew[i] == newTiemArr1[trueNums]) {
 							console.log(i)
 							ansIndex = i
 						}
 					}
 					newIndexArr.push(ansIndex);
 					randArr(nameArr)
 					for(var n = 0; n < nameArr.length; n++) {
 						if(newIndexArr.length < 5 && newIndexArr[0] != nameArr[n]) {
 							newIndexArr.push(nameArr[n])
 						}

 					}
 					randArr(newIndexArr);
 					for(var i = 0; i <= 4; i++) {
 						deepBtn += '<li class="textName" data-id=' + newIndexArr[i] + '  style="' + textNameArr[i] + '"><p class="btnText">' + writeArr[newIndexArr[i]] + '</p></li>'
 					}
 					$('.contList ul').html(deepBtn)
 				}
 				//更换选项end
 				$('.tipList>ul>li').eq(trueNums).find('.time').attr('id', "dataNums");
 				for(var i = 0; i <= 4; i++) {
 					console.log(i + '==' + trueNums)
 					if(i != trueNums) {

 						$('.tipList>ul>li').eq(i).find('.time').attr('id', "");
 						$('.tipList>ul>li').eq(i).find('.time').find('.dataNums').remove();
 						$('.tipList>ul>li').eq(i).find('.time').css({
 							'background': 'url(img/game4/topIcon.png) no-repeat',
 							'background-size': '100% 100%'
 						})

 					}
 				}
 				console.log(trueNums + 'trueNums++;')
 				yearTime(newTiemArr1[trueNums]);
 				$('.tipList>ul>li').eq(trueNums - 1).find('.year').css('display', 'flex');
 				var times = newTiemArr1[trueNums - 1].toString().split('');
 				var timeSpan = '';
 				$.each(times, function(i, item) {
 					timeSpan += '<span>' + item + '</span>'
 				})
 				$('.tipList>ul>li').eq(trueNums - 1).find('.year').html(timeSpan)
 			}, 1000)

 			if(trueNums == 4) {
 				setTimeout(function(){
 					$('.contList ul li').fadeOut(500)
 				},1000)
 				setTimeout(function() {
 					//					alert("游戏结束");
 					clearInterval(timeLength);
 					//					console.log(time)
 					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();
 					$('.deepBtn').fadeIn()

 					showSate = true;
 					maskState()

 					function maskState() {
 						if(showSate) {
 							$('.imgIcon').animate({
 								'top': '0',
 								"right": '8%',
 								'width': '.98rem',
 								'height': '1.24rem'
 							}, 2000)

 							function yincang() {
 								$('.titleIcon ul li').eq(3).css({
 									'visibility': 'hidden'
 								})
 							}
 							setTimeout('yincang()', 2000)
 						}
 					}
 					$('.deepBtn').click(function() {
 						var url = location.href.split('?')[1];
 						window.location.href = "game5.html?" + url
 					})
 					$('.close').on('touchstart', function() {
 						$('.mask').fadeOut();
 						$('.success .sucImg div').fadeOut();
 						$('.success .close').fadeOut();
 					})
 				}, 2000)
 			}

 		} else {
 			var falseAudio = document.getElementById('falseAudio');
 			falseAudio.play();
 			audioAutoPlay('falseAudio')
 			//				
 		}

 	})

 	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>
--- a/game5.html
+++ b/game5.html
@ -0,0 +1,436 @@
 <!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/game5.css?index=1" />
 	</head>
 	<style type="text/css">

 	</style>

 	<body>

 		<div id="wrap">
 			<div class="tipsNum"><img src="img/game5/firstIcon.png" /></div>
 			<div class="titleIcon">
 				<ul>
 					<li><img src="img/success/suc1.png" /></li>
 					<li><img src="img/success/suc2.png" /></li>
 					<li><img src="img/success/suc33.png" /></li>
 					<li><img src="img/success/suc44.png" /></li>
 					<li><img src="img/game1/result.png" /></li>
 				</ul>
 			</div>

 			<div class="cont_wrap" style="">

 				<div class="contList">
 					<ul>
 						<!--<li class="end">
 							<p class="contText">是哪位领导人奠定了新中国在国际上的大国地位，为开创独立自主的和平外交作了不懈的努力?（单选）</p>

 						</li>

 						<li class="end">
 							<p class="contText">哪位领导人是中国社会主义改革开放和现代化建设的总设计师?（单选）</p>
 						</li>
 						<li class="end">
 							<p class="contText">1995年1月30日，是哪位领导人发表了《为促进祖国统一大业的完成而继续奋斗》的重要讲话？（单选）</p>
 						</li>
 						<li class="end">
 							<p class="contText">是哪位领导人提出了继续推进人民政协事业的四个“必须坚持”和五个“继续”?（单选）</p>
 						</li>

 						<li class="end">
 							<p class="contText">是哪位领导人提出了指导思想“中国梦”?（单选）</p>
 						</li>-->
 					</ul>
 				</div>
 				<!--<div class="posTip">
 					<p>请在下方找找提出上方对新中国发展有推进作用的政策的是哪位伟人！</p>

 				</div>-->
 				<div class="tipList">
 					<div class="nameItem">
 						<ul>
 							<li class="start click1">
 								<div class="left">
 									<!--<p class="chose">A</p>-->
 									<p class="name">毛泽东</p>
 								</div>
 								<div class="choseIcon">
 									<p class="trueIcon"><img src="img/game5/trueIcon.png" /></p>
 									<p class="falseIcon"><img src="img/game5/falseIcon.png" /></p>
 								</div>
 							</li>
 							<li class="start click1">
 								<div class="left">
 									<!--<p class="chose">B</p>-->
 									<p class="name">邓小平</p>
 								</div>
 								<div class="choseIcon">
 									<p class="trueIcon"><img src="img/game5/trueIcon.png" /></p>
 									<p class="falseIcon"><img src="img/game5/falseIcon.png" /></p>
 								</div>
 							</li>
 							<li class="start click1">
 								<div class="left">
 									<!--<p class="chose">C</p>-->
 									<p class="name"> 江泽民</p>
 								</div>
 								<div class="choseIcon">
 									<p class="trueIcon"><img src="img/game5/trueIcon.png" /></p>
 									<p class="falseIcon"><img src="img/game5/falseIcon.png" /></p>
 								</div>
 							</li>
 							<li class="start click1">
 								<div class="left">
 									<!--<p class="chose">D</p>-->
 									<p class="name">胡锦涛</p>
 								</div>
 								<div class="choseIcon">
 									<p class="trueIcon"><img src="img/game5/trueIcon.png" /></p>
 									<p class="falseIcon"><img src="img/game5/falseIcon.png" /></p>
 								</div>
 							</li>
 							<li class="start click1">
 								<div class="left">
 									<!--<p class="chose">E</p>-->
 									<p class="name">习近平</p>
 								</div>
 								<div class="choseIcon">
 									<p class="trueIcon"><img src="img/game5/trueIcon.png" /></p>
 									<p class="falseIcon"><img src="img/game5/falseIcon.png" /></p>
 								</div>
 							</li>
 						</ul>
 					</div>
 				</div>

 				<div class="btn">
 					<div class="sureBtn"><img src="img/game5/sureBtn.png" /></div>
 					<div class="nextBtn">
 						<img src="img/game5/next.png" />
 					</div>
 				</div>
 			</div>
 			<!--打完五道题后的样子-->
 			<div class="successCont">
 				<ul class="nameList">
 					<li>
 						<p>毛泽东</p>
 					</li>
 					<li>
 						<p>邓小平</p>
 					</li>
 					<li>
 						<p>江泽民</p>
 					</li>
 					<li>
 						<p>胡锦涛</p>
 					</li>
 					<li>
 						<p>习近平</p>
 					</li>

 				</ul>
 				<div class="textList">
 					<ul>

 					</ul>
 				</div>
 			</div>
 			<!--成功-->
 			<div class="chengg">
 				<div class="mask"></div>
 				<div class="success">
 					<div class="sucImg">
 						<div>
 							<p class="text">恭喜获得第五枚徽章！</p>
 							<p class="text textTime"></p>
 							<p class="imgIcons"><img src="img/success/suc5.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/suc5.png" /></p>
 			</div>
 		</div>
 		<div class="audio">
 			<audio id="bgmAudio" hidden="true" autoplay="autoplay" loop="true">
 				<source src="img/audio/game5Bgm.mp3" type="audio/mp3" />
 				<!--您的浏览器不支持 audio 标签。-->
 			</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>
 	</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);    
 	}   
 	var url = location.href.split('?')[1]
 	var audioState = url.split('=')[1];
 	if(audioState == 'true') {    
 		audioAutoPlay('bgmAudio');
 	}

 	$('.tipList div').eq(0).show();
 	var liIndex = null
 	var time = 0;
 	var timeLength = setInterval(function() {
 		time++;
 	}, 1000)
 	var count = 0;
 	var trueArr = [0, 1, 2, 3, 4];
 	//	var questArr = [
 	//		'是哪位领导人奠定了新中国在国际上的大国地位，为开创独立自主的和平外交作了不懈的努力?（单选）',
 	//		'哪位领导人是中国社会主义改革开放和现代化建设的总设计师?（单选）',
 	//		'1995年1月30日，是哪位领导人发表了《为促进祖国统一大业的完成而继续奋斗》的重要讲话？（单选）',
 	//		'是哪位领导人提出了继续推进人民政协事业的四个“必须坚持”和五个“继续”?（单选）',
 	//		'是哪位领导人提出了指导思想“中国梦”?（单选）'
 	//	]

 	var quest1Arr = [
 		'1927年9月下旬，是哪位领导人率领秋收起义的部队来到江西省永新县三湾村，进行了著名的三湾改编，确立了人民军队建设的根本原则？（单选）',
 		'中国共产党、中国人民解放军和中华人民共和国的主要缔造者和领导人是哪位党的领导人？（单选）',
 		'是哪位领导人奠定了新中国在国际上的大国地位，为开创独立自主的和平外交作了不懈的努力？（单选）',
 	];
 	var quest2Arr = [
 		'中国特色社会主义道路的开创者是哪位领导人？（单选）',
 		'是哪位领导人所倡导的“改革开放”及“一国两制”政策理念，改变了20世纪后期的中国，也影响了世界？（单选）',
 		'哪位领导人是中国社会主义改革开放和现代化建设的总设计师？（单选）',
 	];
 	var quest3Arr = [
 		'哪位领导人是党的第三代中央领导集体的核心，是“三个代表”重要思想的主要创立者?（单选）',
 		'1995年1月30日，是哪位领导人发表了《为促进祖国统一大业的完成而继续奋斗》的重要讲话?（单选）',
 		'是哪位领导人提出了祖国和平统一八项主张?（单选）'
 	];
 	var quest4Arr = [
 		'是哪位领导人提出了继续推进人民政协事业的四个“必须坚持”和五个“继续”。（单选',
 		'是哪位领导人提出了“八个为荣，八个为耻”的重要论述。（单选）',
 		'是哪位领导人在2003年7月28日的讲话中提出“坚持以人为本，树立全面、协调、可持续的发展观。（单选）',
 	];
 	var quest5Arr = [
 		'2013年10月3日，是哪位领导人提出共建21世纪海上丝绸之路重大倡议。（单选）',
 		'是哪位领导人提出了指导思想“中国梦”（单选）',
 		'中国共产党第十九次全国代表大会，把哪位领导人新时代中国特色社会主义思想确立为党必须长期坚持的指导思想并庄严地写入党章，实现了党的指导思想的与时俱进。（单选',
 	]
 	var newQuestArr = [];
 	newQuestArr.push(randArr(quest1Arr)[0]);
 	newQuestArr.push(randArr(quest2Arr)[0]);
 	newQuestArr.push(randArr(quest3Arr)[0]);
 	newQuestArr.push(randArr(quest4Arr)[0]);
 	newQuestArr.push(randArr(quest5Arr)[0]);
 	console.log(newQuestArr)
 	var newIndexArr = [];
 	newIndexArr = randArr(trueArr);
 	var quest = '';
 	console.log(newIndexArr)
 	for(var i = 0; i <= 4; i++) {
 		quest += '<li class="end"><p class="contText">' + newQuestArr[newIndexArr[i]] + '</p></li>'
 	}
 	console.log(quest)
 	$('.contList ul').html(quest);
 	$('.contList li').eq(0).show()
 	var chooseIndex = null;
 	var clickState = true;
 	for(var i = 1; i <= 5; i++) {
 		var icond = $(".click" + i);
 		icond.each(function(index) {
 			$(this).on('touchstart', function(evt) {
 				$('.posTip p').fadeOut(1000)
 				var e = event || evt;
 				e.preventDefault(); //阻止其他事件
 				liIndex = $(this).index()
 				if(clickState) {
 					$(this).addClass('active').siblings().removeClass('active');
 				}
 			}).on('touchmove', function(evt) {
 				var e = event || evt;
 				e.preventDefault(); //阻止其他事件

 			}).on('touchend', function(evt) {
 				var e = event || evt;
 				e.preventDefault(); //阻止其他事件
 				chooseIndex = $(this).index()
 			})
 		})
 	}

 	$('.sureBtn img').on('touchstart', function() {
 		if(chooseIndex || chooseIndex == 0) {

 			if(clickState) {
 				if(chooseIndex == trueArr[count]) {
 					clickState = false;
 					//正确
 					var trueAudio = document.getElementById('trueAudio');
 					trueAudio.play();
 					audioAutoPlay('trueAudio')
 					$('.tipList .nameItem ').find('li').eq(trueArr[count]).find('.trueIcon').fadeIn();
 					$('.tipList li').eq(trueArr[count]).addClass('active')
 					count++;
 					$('.nextBtn').fadeIn();
 					$('.sureBtn').fadeOut();

 				} else {
 					$('.tipList .nameItem ').find('li').eq(chooseIndex).find('.falseIcon').fadeIn();
 					$('.tipList .nameItem ').find('li').eq(chooseIndex).find('.falseIcon').fadeOut();
 					$('.tipList li').eq(liIndex).removeClass('active')
 					//错误

 					var falseAudio = document.getElementById('falseAudio');
 					falseAudio.play();
 					audioAutoPlay('falseAudio')

 					// count++;

 				}

 			}
 			if(count == 5) {
 				$('.posTip p').fadeOut()

 				setTimeout(function() {
 					$('.cont_wrap').fadeOut();
 					$('.contList').fadeOut();
 					// $('.successCont').slideDown(2000);

 				}, 0)
 				setTimeout(function() {
 					end();
 				}, 1000)
 			}

 		} else {
 			alert('请选择')
 		}
 	})
 	$('.nextBtn').on('touchstart', function() {
 		clickState = true;
 		chooseIndex = null;
 		$('.sureBtn').fadeIn();
 		$('.nextBtn').fadeOut();
 		$('.contList li').eq(count).show().siblings().hide();
 		//		$('.tipList .nameItem').eq(count).show().siblings().hide();
 		$('.tipList li').removeClass('active')
 		$('.trueIcon').fadeOut();
 		$('.falseIcon').fadeOut();
 		//		img/game5/bgm4.png
 		//							 background: url(img/game5/bgm2.png) no-repeat;
 		//		if(cont==1){}
 		$('.cont_wrap').css({
 			'background': 'url(img/game5/bgm' + (count + 1) + '.png) no-repeat',
 			'background-size': '100% 100%',
 		})

 	})

 	function end() {
 		clearInterval(timeLength);
 		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": '0',
 					'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];
 			location.replace("http://h5.qishichuangke.cn/html5/szdj/index?" + url);
 			//window.open("http://h5.qishichuangke.cn/html5/szdj/index?"+url) 
 			//window.location.href = "http://h5.qishichuangke.cn/html5/szdj/index?"+url
 		})
 		$('.close').on('touchstart', function() {
 			$('.mask').fadeOut();
 			$('.success .sucImg div').fadeOut();
 			$('.success .close').fadeOut();
 		})

 	}

 	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;
 	}
 	
 	
 </script>
--- a/img/5.jpg
+++ b/img/5.jpg
--- a/img/audio/game1Bgm.mp3
+++ b/img/audio/game1Bgm.mp3
--- a/img/audio/game2Bgm.mp3
+++ b/img/audio/game2Bgm.mp3
--- a/img/audio/game3Bgm.mp3
+++ b/img/audio/game3Bgm.mp3
--- a/img/audio/game4Bgm.mp3
+++ b/img/audio/game4Bgm.mp3
--- a/img/audio/game5Bgm.mp3
+++ b/img/audio/game5Bgm.mp3
--- a/img/audioIcon.png
+++ b/img/audioIcon.png
--- a/img/book.gif
+++ b/img/book.gif
--- a/img/close.png
+++ b/img/close.png
--- a/img/djs.gif
+++ b/img/djs.gif
--- a/img/false1.mp3
+++ b/img/false1.mp3
--- a/img/game1/Group
+++ b/img/game1/Group
--- a/img/game1/bgm.png
+++ b/img/game1/bgm.png
--- a/img/game1/bgm1.png
+++ b/img/game1/bgm1.png
--- a/img/game1/firstIcon.png
+++ b/img/game1/firstIcon.png
--- a/img/game1/icon1.png
+++ b/img/game1/icon1.png
--- a/img/game1/icon2.png
+++ b/img/game1/icon2.png
--- a/img/game1/icon3.png
+++ b/img/game1/icon3.png
--- a/img/game1/icon4.png
+++ b/img/game1/icon4.png
--- a/img/game1/icon5.png
+++ b/img/game1/icon5.png
--- a/img/game1/jt1.png
+++ b/img/game1/jt1.png
--- a/img/game1/jt2.png
+++ b/img/game1/jt2.png
--- a/img/game1/jt3.png
+++ b/img/game1/jt3.png
--- a/img/game1/jt4.png
+++ b/img/game1/jt4.png
--- a/img/game1/jt5.png
+++ b/img/game1/jt5.png
--- a/img/game1/jt6.png
+++ b/img/game1/jt6.png
--- a/img/game1/jt7.png
+++ b/img/game1/jt7.png
--- a/img/game1/result.png
+++ b/img/game1/result.png
--- a/img/game1/star.png
+++ b/img/game1/star.png
--- a/img/game1/xiaoren.gif
+++ b/img/game1/xiaoren.gif
--- a/img/game2/active.png
+++ b/img/game2/active.png
--- a/img/game2/firstIcon.png
+++ b/img/game2/firstIcon.png
--- a/img/game2/game2Bgm.png
+++ b/img/game2/game2Bgm.png
--- a/img/game2/icon1-1.png
+++ b/img/game2/icon1-1.png
--- a/img/game2/icon2-1.png
+++ b/img/game2/icon2-1.png
--- a/img/game2/icon3-1.png
+++ b/img/game2/icon3-1.png
--- a/img/game2/icon4-1.png
+++ b/img/game2/icon4-1.png
--- a/img/game2/icon5-1.png
+++ b/img/game2/icon5-1.png
--- a/img/game2/icon6-1.png
+++ b/img/game2/icon6-1.png
--- a/img/game2/icon7-1.png
+++ b/img/game2/icon7-1.png
--- a/img/game2/icon8-1.png
+++ b/img/game2/icon8-1.png
--- a/img/game2/nSelect.png
+++ b/img/game2/nSelect.png
--- a/img/game2/select.png
+++ b/img/game2/select.png
--- a/img/game2/time.png
+++ b/img/game2/time.png
--- a/img/game2/timeN.png
+++ b/img/game2/timeN.png
--- a/img/game2/titleIcon.png
+++ b/img/game2/titleIcon.png
--- a/img/game3/Group
+++ b/img/game3/Group
--- a/img/game3/fan/backImg.png
+++ b/img/game3/fan/backImg.png
--- a/img/game3/fan/backText.png
+++ b/img/game3/fan/backText.png
--- a/img/game3/fan/img11.png
+++ b/img/game3/fan/img11.png
--- a/img/game3/fan/img2.png
+++ b/img/game3/fan/img2.png
--- a/img/game3/fan/img22.png
+++ b/img/game3/fan/img22.png
--- a/img/game3/fan/img3.png
+++ b/img/game3/fan/img3.png
--- a/img/game3/fan/img33.png
+++ b/img/game3/fan/img33.png
--- a/img/game3/fan/img4.png
+++ b/img/game3/fan/img4.png
--- a/img/game3/fan/img44.png
+++ b/img/game3/fan/img44.png
--- a/img/game3/fan/img55.png
+++ b/img/game3/fan/img55.png
--- a/img/game3/fan/img66.png
+++ b/img/game3/fan/img66.png
--- a/img/game3/fan/img77.png
+++ b/img/game3/fan/img77.png
--- a/img/game3/fan/img88.png
+++ b/img/game3/fan/img88.png
--- a/img/game3/fan/img99.png
+++ b/img/game3/fan/img99.png
--- a/img/game3/fan/kuang.png
+++ b/img/game3/fan/kuang.png
--- a/img/game3/fan/text1.png
+++ b/img/game3/fan/text1.png
--- a/img/game3/fan/text11.png
+++ b/img/game3/fan/text11.png
--- a/img/game3/fan/text2.png
+++ b/img/game3/fan/text2.png
--- a/img/game3/fan/text22.png
+++ b/img/game3/fan/text22.png
--- a/img/game3/fan/text3.png
+++ b/img/game3/fan/text3.png
--- a/img/game3/fan/text33.png
+++ b/img/game3/fan/text33.png
--- a/img/game3/fan/text4.png
+++ b/img/game3/fan/text4.png
--- a/img/game3/fan/text44.png
+++ b/img/game3/fan/text44.png
--- a/img/game3/fan/text5.png
+++ b/img/game3/fan/text5.png
--- a/img/game3/fan/text55.png
+++ b/img/game3/fan/text55.png
--- a/img/game3/fan/text66.png
+++ b/img/game3/fan/text66.png
--- a/img/game3/fan/text77.png
+++ b/img/game3/fan/text77.png
--- a/img/game3/fan/text88.png
+++ b/img/game3/fan/text88.png
--- a/img/game3/fan/text99.png
+++ b/img/game3/fan/text99.png
--- a/img/game3/firstIcon.png
+++ b/img/game3/firstIcon.png
--- a/img/game3/game3Bgm.png
+++ b/img/game3/game3Bgm.png
--- a/img/game3/icon22.png
+++ b/img/game3/icon22.png
--- a/img/game3/icon33.png
+++ b/img/game3/icon33.png