Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
zhengxiaoyu
/
datiGame
Figyelés 2
Kedvenc 0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

Merge branch 'master' of http://120.78.169.79:3000/zhengxiaoyu/datiGame

郑晓宇 6 éve
szülő
c1ebf4d762 82a22da207
commit
1e1c2217d7
4 módosított fájl, 126 hozzáadás és 0 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 16 0
      public/h5/datigame/css/main.css
  2. BIN
      public/h5/datigame/img/vs.png
  3. 104 0
      public/h5/datigame/index.html
  4. 6 0
      public/h5/datigame/js/common.js

+ 16 - 0
public/h5/datigame/css/main.css
Fájl Megtekintése 

@@ -382,6 +382,22 @@ background-color:#009688;
 
     animation-iteration-count: infinite;
 
     animation-iteration-count: infinite;
 
 }
 
 }
 
 .gstart{display:none}
 
 .gstart{display:none}
 
+.vsmov .cov4{
 
+    top: 8rem;
 
+}
 
+.vsmov .win_rate{opacity：1;}
 
+.vsmov .vspic{
 
+  display:block;
 
+  opacity:1;
 
+  width:3.8rem;
 
+  height:3.2rem;
 
+  left:50%;
 
+  margin-left:-1.9rem;
 
+  top: 42%;
 
+  background:url(../img/vs.png) no-repeat bottom;
 
+  background-size: 100%;
 
+}
 
+.win_rate{opacity:0}
 
 .popwind{width:6.05rem;height:6.98rem;position: absolute;left: 0.8rem;top: 2.5rem;background: url(../img/rulebg.png);background-size: 100%;display: none;z-index: 99;}
 
 .popwind{width:6.05rem;height:6.98rem;position: absolute;left: 0.8rem;top: 2.5rem;background: url(../img/rulebg.png);background-size: 100%;display: none;z-index: 99;}
 
 .popwind .art{
 
 .popwind .art{
 
     padding: 1.1rem .82rem .4rem;
 
     padding: 1.1rem .82rem .4rem;

BIN
public/h5/datigame/img/vs.png
Fájl Megtekintése


+ 104 - 0
public/h5/datigame/index.html
Fájl Megtekintése 

@@ -23,6 +23,8 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 	<div class="g-doc">
 
 	<div class="g-doc">
 
+    <canvas id="canvas" style="position: fixed;left: 0;top: 0; width: 100%;height: 100%;"></canvas>
 
+
 
   <div class="popbg"></div>
 
   <div class="popbg"></div>
 
     <div class="g-inner welcome">
 
     <div class="g-inner welcome">
 
       <button id="start_game" class="layui-btn btn-1" >匹配对手</button>
 
       <button id="start_game" class="layui-btn btn-1" >匹配对手</button>
 
@@ -64,6 +66,7 @@
 
         <input type="hidden" id="user_id" name="user_id">
 
         <input type="hidden" id="user_id" name="user_id">
 
         <input type="hidden" id="duishou" name="duishou">
 
         <input type="hidden" id="duishou" name="duishou">
 
       </div>
 
       </div>
 
+      <span class="cov vspic"></span>
 
       <div class="cov cov3 amt" id="Jvs">
 
       <div class="cov cov3 amt" id="Jvs">
 
         <span class="tit">匹配中</span>
 
         <span class="tit">匹配中</span>
 
         <div class="con" style="display: none;">
 
         <div class="con" style="display: none;">
 
@@ -106,5 +109,106 @@
 
 <script src="./js/common.js?v1"></script>
 
 <script src="./js/common.js?v1"></script>
 
 <script type="text/javascript">
 
 <script type="text/javascript">
 
 	common.init();
 
 	common.init();
 
+  "use strict";
 
+
 
+var canvas = document.getElementById('canvas'),
 
+  ctx = canvas.getContext('2d'),
 
+  w = canvas.width = window.innerWidth,
 
+  h = canvas.height = window.innerHeight,
 
+
 
+  hue = 217,
 
+  stars = [],
 
+  count = 0,
 
+  maxStars = 1200;
 
+
 
+var canvas2 = document.createElement('canvas'),
 
+  ctx2 = canvas2.getContext('2d');
 
+canvas2.width = 100;
 
+canvas2.height = 100;
 
+var half = canvas2.width / 2,
 
+  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
 
+gradient2.addColorStop(0.025, '#fff');
 
+gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
 
+gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
 
+gradient2.addColorStop(1, 'transparent');
 
+
 
+ctx2.fillStyle = gradient2;
 
+ctx2.beginPath();
 
+ctx2.arc(half, half, half, 0, Math.PI * 2);
 
+ctx2.fill();
 
+
 
+// End cache
 
+
 
+function random(min, max) {
 
+  if (arguments.length < 2) {
 
+    max = min;
 
+    min = 0;
 
+  }
 
+
 
+  if (min > max) {
 
+    var hold = max;
 
+    max = min;
 
+    min = hold;
 
+  }
 
+
 
+  return Math.floor(Math.random() * (max - min + 1)) + min;
 
+}
 
+
 
+function maxOrbit(x, y) {
 
+  var max = Math.max(x, y),
 
+    diameter = Math.round(Math.sqrt(max * max + max * max));
 
+  return diameter / 2;
 
+}
 
+
 
+var Star = function() {
 
+
 
+  this.orbitRadius = random(maxOrbit(w, h));
 
+  this.radius = random(60, this.orbitRadius) / 12;
 
+  this.orbitX = w / 2;
 
+  this.orbitY = h / 2;
 
+  this.timePassed = random(0, maxStars);
 
+  this.speed = random(this.orbitRadius) / 900000;
 
+  this.alpha = random(2, 10) / 10;
 
+
 
+  count++;
 
+  stars[count] = this;
 
+}
 
+
 
+Star.prototype.draw = function() {
 
+  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
 
+    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
 
+    twinkle = random(10);
 
+
 
+  if (twinkle === 1 && this.alpha > 0) {
 
+    this.alpha -= 0.05;
 
+  } else if (twinkle === 2 && this.alpha < 1) {
 
+    this.alpha += 0.05;
 
+  }
 
+
 
+  ctx.globalAlpha = this.alpha;
 
+  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
 
+  this.timePassed += this.speed;
 
+}
 
+
 
+for (var i = 0; i < maxStars; i++) {
 
+  new Star();
 
+}
 
+
 
+function animation() {
 
+  ctx.globalCompositeOperation = 'source-over';
 
+  ctx.globalAlpha = 0.8;
 
+  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
 
+  ctx.fillRect(0, 0, w, h)
 
+
 
+  ctx.globalCompositeOperation = 'lighter';
 
+  for (var i = 1, l = stars.length; i < l; i++) {
 
+    stars[i].draw();
 
+  };
 
+
 
+  window.requestAnimationFrame(animation);
 
+}
 
+
 
+animation();
 
+
 
 </script>
 
 </script>
 
 </html>
 
 </html>

+ 6 - 0
public/h5/datigame/js/common.js
Fájl Megtekintése 

@@ -81,6 +81,8 @@ common={
 
    	}
 
    	}
 
    	if(data.info.players.length>=2){
 
    	if(data.info.players.length>=2){
 
    		$(".gstart").addClass("ready");
 
    		$(".gstart").addClass("ready");
 
+   		$(".g-doc .g-inner").addClass("doing");
 
+        $(".g-doc .g-inner").addClass("vsmov");
 
    	}
 
    	}
 
         
         
  		 
  		 
@@ -143,6 +145,8 @@ common={
 
                     $("#Jresult").removeClass("success");
 
                     $("#Jresult").removeClass("success");
 
                     $("#Jresult").addClass("faild");
 
                     $("#Jresult").addClass("faild");
 
                   }
 
                   }
 
+         $(".g-doc .g-inner").addClass("gstart");
 
+         $(".g-doc .g-inner").addClass("doing");
 
          $(".g-doc .g-inner").addClass("end");
 
          $(".g-doc .g-inner").addClass("end");
 
          $("#Jvs").hide();
 
          $("#Jvs").hide();
 
      },3000)
 
      },3000)
 
@@ -236,6 +240,8 @@ common={
 
         $("#Jpage").html(responsedata.info.sequence+"/5");
 
         $("#Jpage").html(responsedata.info.sequence+"/5");
 
         
         
            $(".g-doc .g-inner").addClass("doing");
 
            $(".g-doc .g-inner").addClass("doing");
 
+           $(".g-doc .g-inner").removeClass("vsmov");
 
+           
        // is_end = responsedata.info.question.is_end;
 
        // is_end = responsedata.info.question.is_end;
 
          this.daoshu();
 
          this.daoshu();
 
           var animate=["zoomInDown","bounceIn","flash"];
 
           var animate=["zoomInDown","bounceIn","flash"];