honghe
/
roundabout
Segui 3
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Activity
Sfoglia il codice sorgente

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

[baozhangchao] 3 anni fa
parent
cf1ba990d5 a2f5cd83fd
commit
d702886354
6 ha cambiato i file con 58 aggiunte e 21 eliminazioni
Visualizzazione separata Mostra Diff Stats
  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 Vedi File 

@@ -10,6 +10,11 @@
10 10 
     为岸线圆梦，摩天轮圆满大作战！
11 11 
   </title>
12 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 18 
 </head>
14 19
15 20 
 <body>

+ 34
- 10
src/pages/OverPage.vue Vedi File 

@@ -2,21 +2,45 @@
2 2 
   <BackPage>
3 3 
     <div>
4 4 
       <div class="overImage-box">
5 
-        <img :src="overImage" class="overImage-boxBack" />
5 
+        <img
6 
+          :src="overImage"
7 
+          class="overImage-boxBack"
8 
+        >
6 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 26 
       </div>
12 27
13 28 
       <div class="IKnow-box">
14 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 38 
         </div>
18 39 
         <div class="IKnow-box-bottom">
19 
-          <img :src="goTop" @click="goTops" />
40 
+          <img
41 
+            :src="goTop"
42 
+            @click="goTops"
43 
+          >
20 44 
         </div>
21 45 
       </div>
22 46 
       <!-- <div v-show="visImage" class="visImage">
 
@@ -93,7 +117,7 @@ export default {
93 117 
 .overImage-box {
94 118 
   width: 100vw;
95 119 
   position: absolute;
96 
-  top: 13vh;
120 
+  top: 20vh;
97 121 
   display: flex;
98 122 
   justify-content: center;
99 123 
   .overImage-boxBack {
 
@@ -104,7 +128,7 @@ export default {
104 128 
 .overImage-top-box {
105 129 
   position: absolute;
106 130 
   width: 67%;
107 
-  top: 9vh;
131 
+  top: 16vh;
108 132 
   left: 15vw;
109 133 
 }
110 134 
 .visImage {

+ 3
- 3
src/pages/game/algorithm/bullet.js Vedi File 

@@ -48,10 +48,10 @@ export default ({two, center, speed, getGameState}) => {
48 48 
   }
49 49
50 50 
   // 子弹飞行
51 
-  function fly() {
51 
+  function fly(_, timeDelay) {
52 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 57 
     _event.dispatchEvent('shooting', {

+ 2
- 3
src/pages/game/algorithm/cage.js Vedi File 

@@ -62,9 +62,8 @@ export function drawTargeCages({ two, center }) {
62 62 
     // 可接受校验偏差范围
63 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 68 
     // 如果子弹 y 坐标超过警戒线
70 69 
     if (y < center.y + wheelRaduis + offset) {

+ 2
- 2
src/pages/game/algorithm/index.js Vedi File 

@@ -8,14 +8,14 @@ import { drawPedestal } from './pedestal';
8 8 
 import drawBullets from './bullet';
9 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 13 
   // 修复一个单页面应用, 不能重复加载图片的bug
14 14 
   Two.Texture.ImageRegistry = new Two.Registry();
15 15
16 16 
   // 初始化
17 17 
   const two = new Two({
18 
-    type: Two.Types.svg,
18 
+    type: Two.Types.canvas,
19 19 
     fullscreen: true,
20 20 
   }).appendTo(el);
21 21

+ 12
- 3
src/pages/game/algorithm/wheel.js Vedi File 

@@ -16,9 +16,12 @@ export function drawWheel({ two, center, rotateSpeed, cages }) {
16 16 
   const perAngle = Math.PI / cages.length;
17 17
18 18 
   // 摩天轮与轿厢旋转
19 
+  let _count = 0;
19 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 25 
     wheelArc.rotation = rotateAngle
23 26 
     cages.forEach(cage => {
24 27 
       const angle = cage.__$angle + rotateAngle + perAngle / 2  // 除以2是为了视觉上轿厢与摩天轮的轴对齐
 
@@ -34,7 +37,13 @@ export function drawWheel({ two, center, rotateSpeed, cages }) {
34 37
35 38 
   return {
36 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 47 
     stop: () => two.removeEventListener('update', wheelRotate),
39 48 
   }
40 49 
 }