honghe
/
roundabout
Seguir 3
Destacar 0
Cuchillo 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Activity
Explorar el Código

Merge branch 'master' of http://git.ycjcjy.com/honghe/roundabout

[baozhangchao] hace 3 años
padre
cf1ba990d5 a2f5cd83fd
commit
d702886354
Se han modificado 6 ficheros con 58 adiciones y 21 borrados
Unificar vista Mostrar estadísticas de diff
  1. 5
    0
      public/index.html
  2. 34
    10
      src/pages/OverPage.vue
  3. 3
    3
      src/pages/game/algorithm/bullet.js
  4. 2
    3
      src/pages/game/algorithm/cage.js
  5. 2
    2
      src/pages/game/algorithm/index.js
  6. 12
    3
      src/pages/game/algorithm/wheel.js

+ 5
- 0
public/index.html Ver fichero

10 
     为岸线圆梦，摩天轮圆满大作战！
 10 
     为岸线圆梦，摩天轮圆满大作战！
11 
   </title>
 11 
   </title>
12 
   <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 12 
   <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
13 
+  <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
14 
+  <script>
15 
+    // VConsole 默认会挂载到 `window.VConsole` 上
16 
+    var vConsole = new window.VConsole();
17 
+  </script> -->
13 
 </head>
 18 
 </head>
14
19
15 
 <body>
 20 
 <body>

+ 34
- 10
src/pages/OverPage.vue Ver fichero

2 
   <BackPage>
 2 
   <BackPage>
3 
     <div>
 3 
     <div>
4 
       <div class="overImage-box">
 4 
       <div class="overImage-box">
5 
-        <img :src="overImage" class="overImage-boxBack" />
5 
+        <img
6 
+          :src="overImage"
7 
+          class="overImage-boxBack"
8 
+        >
6 
       </div>
 9 
       </div>
7 
-      <img v-if="route.query.type =='win'" :src="winTopImage" class="overImage-top-box" />
8 
-      <img v-else :src="loseTopImage" class="overImage-top-box" />
9 
-      <div v-show="visImage" @click="goShares" class="visImage">
10 
-        <img :src="shareImag" />
10 
+      <img
11 
+        v-if="route.query.type =='win'"
12 
+        :src="winTopImage"
13 
+        class="overImage-top-box"
14 
+      >
15 
+      <img
16 
+        v-else
17 
+        :src="loseTopImage"
18 
+        class="overImage-top-box"
19 
+      >
20 
+      <div
21 
+        v-show="visImage"
22 
+        class="visImage"
23 
+        @click="goShares"
24 
+      >
25 
+        <img :src="shareImag">
11 
       </div>
 26 
       </div>
12
27
13 
       <div class="IKnow-box">
 28 
       <div class="IKnow-box">
14 
         <div class="IKnow-box-top">
 29 
         <div class="IKnow-box-top">
15 
-          <img :src="tryAgain" @click="tryAgains" />
16 
-          <img :src="goShare" @click="goShares" />
30 
+          <img
31 
+            :src="tryAgain"
32 
+            @click="tryAgains"
33 
+          >
34 
+          <img
35 
+            :src="goShare"
36 
+            @click="goShares"
37 
+          >
17 
         </div>
 38 
         </div>
18 
         <div class="IKnow-box-bottom">
 39 
         <div class="IKnow-box-bottom">
19 
-          <img :src="goTop" @click="goTops" />
40 
+          <img
41 
+            :src="goTop"
42 
+            @click="goTops"
43 
+          >
20 
         </div>
 44 
         </div>
21 
       </div>
 45 
       </div>
22 
       <!-- <div v-show="visImage" class="visImage">
 46 
       <!-- <div v-show="visImage" class="visImage">
93 
 .overImage-box {
 117 
 .overImage-box {
94 
   width: 100vw;
 118 
   width: 100vw;
95 
   position: absolute;
 119 
   position: absolute;
96 
-  top: 13vh;
120 
+  top: 20vh;
97 
   display: flex;
 121 
   display: flex;
98 
   justify-content: center;
 122 
   justify-content: center;
99 
   .overImage-boxBack {
 123 
   .overImage-boxBack {
104 
 .overImage-top-box {
 128 
 .overImage-top-box {
105 
   position: absolute;
 129 
   position: absolute;
106 
   width: 67%;
 130 
   width: 67%;
107 
-  top: 9vh;
131 
+  top: 16vh;
108 
   left: 15vw;
 132 
   left: 15vw;
109 
 }
 133 
 }
110 
 .visImage {
 134 
 .visImage {

+ 3
- 3
src/pages/game/algorithm/bullet.js Ver fichero

48 
   }
 48 
   }
49
49
50 
   // 子弹飞行
 50 
   // 子弹飞行
51 
-  function fly() {
51 
+  function fly(_, timeDelay) {
52 
     if (!current) return;
 52 
     if (!current) return;
53 
-    const { top, height } = current.getBoundingClientRect()
54 
-    current.position = new Two.Vector(current.position.x, current.position.y + speed)
53 
+    // const { top, height } = current.getBoundingClientRect()
54 
+    current.position = new Two.Vector(current.position.x, current.position.y +  (speed * timeDelay / 1000))
55
55
56 
     // 子弹飞行事件
 56 
     // 子弹飞行事件
57 
     _event.dispatchEvent('shooting', {
57 
     _event.dispatchEvent('shooting', {

+ 2
- 3
src/pages/game/algorithm/cage.js Ver fichero

62 
     // 可接受校验偏差范围
 62 
     // 可接受校验偏差范围
63 
     const offset = cageRadius / 3;
 63 
     const offset = cageRadius / 3;
64
64
65 
-    const rect2 = bullet.getBoundingClientRect();
66 
-    const x = rect2.left + rect2.width / 2;
67 
-    const y = rect2.top + rect2.height / 2;
65 
+    const x = bullet.position.x;
66 
+    const y = bullet.position.y;
68
67
69 
     // 如果子弹 y 坐标超过警戒线
 68 
     // 如果子弹 y 坐标超过警戒线
70 
     if (y < center.y + wheelRaduis + offset) {
 69 
     if (y < center.y + wheelRaduis + offset) {

+ 2
- 2
src/pages/game/algorithm/index.js Ver fichero

8 
 import drawBullets from './bullet';
 8 
 import drawBullets from './bullet';
9 
 import { drawCounter } from './counter';
 9 
 import { drawCounter } from './counter';
10
10
11 
-export default ({ el, center, rotateSpeed = 0.015, speed = -5 }) => {
11 
+export default ({ el, center, rotateSpeed = 1.6, speed = -360 }) => {
12
12
13 
   // 修复一个单页面应用, 不能重复加载图片的bug
 13 
   // 修复一个单页面应用, 不能重复加载图片的bug
14 
   Two.Texture.ImageRegistry = new Two.Registry();
 14 
   Two.Texture.ImageRegistry = new Two.Registry();
15
15
16 
   // 初始化
 16 
   // 初始化
17 
   const two = new Two({
 17 
   const two = new Two({
18 
-    type: Two.Types.svg,
18 
+    type: Two.Types.canvas,
19 
     fullscreen: true,
 19 
     fullscreen: true,
20 
   }).appendTo(el);
 20 
   }).appendTo(el);
21
21

+ 12
- 3
src/pages/game/algorithm/wheel.js Ver fichero

16 
   const perAngle = Math.PI / cages.length;
 16 
   const perAngle = Math.PI / cages.length;
17
17
18 
   // 摩天轮与轿厢旋转
 18 
   // 摩天轮与轿厢旋转
19 
+  let _count = 0;
19 
   let rotateAngle = 0;
 20 
   let rotateAngle = 0;
20 
-  const wheelRotate = () => {
21 
-    rotateAngle += rotateSpeed
21 
+  const wheelRotate = (_, timeDelay) => {
22 
+    _count += 1;
23 
+    // rotateAngle += rotateSpeed
24 
+    rotateAngle += rotateSpeed * timeDelay / 1000
22 
     wheelArc.rotation = rotateAngle
 25 
     wheelArc.rotation = rotateAngle
23 
     cages.forEach(cage => {
 26 
     cages.forEach(cage => {
24 
       const angle = cage.__$angle + rotateAngle + perAngle / 2  // 除以2是为了视觉上轿厢与摩天轮的轴对齐
 27 
       const angle = cage.__$angle + rotateAngle + perAngle / 2  // 除以2是为了视觉上轿厢与摩天轮的轴对齐
34
37
35 
   return {
 38 
   return {
36 
     raduis,
 39 
     raduis,
37 
-    rotate: () => two.addEventListener('update', wheelRotate),
40 
+    rotate: () => {
41 
+      console.log('----------START---------')
42 
+      two.addEventListener('update', wheelRotate)
43 
+      const t = setTimeout(() => {
44 
+        console.log('----------1 MINUTES---------', _count)
45 
+      }, 1000)
46 
+    },
38 
     stop: () => two.removeEventListener('update', wheelRotate),
 47 
     stop: () => two.removeEventListener('update', wheelRotate),
39 
   }
 48 
   }
40 
 }
 49 
 }