feats

src/pages/game/algorithm/bullet.js

@@ -48,10 +48,10 @@ export default ({two, center, speed, getGameState}) => {
   }
   
   // 子弹飞行
-  function fly() {
+  function fly(_, timeDelay) {
     if (!current) return;
-    const { top, height } = current.getBoundingClientRect()
-    current.position = new Two.Vector(current.position.x, current.position.y + speed)
+    // const { top, height } = current.getBoundingClientRect()
+    current.position = new Two.Vector(current.position.x, current.position.y +  (speed * timeDelay / 1000))
 
     // 子弹飞行事件
     _event.dispatchEvent('shooting', { 

src/pages/game/algorithm/cage.js

@@ -62,9 +62,8 @@ export function drawTargeCages({ two, center }) {
     // 可接受校验偏差范围
     const offset = cageRadius / 3;
 
-    const rect2 = bullet.getBoundingClientRect();
-    const x = rect2.left + rect2.width / 2;
-    const y = rect2.top + rect2.height / 2;
+    const x = bullet.position.x;
+    const y = bullet.position.y;
 
     // 如果子弹 y 坐标超过警戒线
     if (y < center.y + wheelRaduis + offset) {

src/pages/game/algorithm/index.js

@@ -8,14 +8,11 @@ import { drawPedestal } from './pedestal';
 import drawBullets from './bullet';
 import { drawCounter } from './counter';
 
-export default ({ el, center, rotateSpeed = 0.045, speed = -12 }) => {
+export default ({ el, center, rotateSpeed = 2, speed = -360 }) => {
     
   // 修复一个单页面应用, 不能重复加载图片的bug
   Two.Texture.ImageRegistry = new Two.Registry();
 
-  // 30FPS
-  const FRAMERATE = 1000 / 30;
-
   // 初始化
   const two = new Two({
     type: Two.Types.svg,
@@ -52,8 +49,6 @@ export default ({ el, center, rotateSpeed = 0.045, speed = -12 }) => {
 
   // 整体绘制结束  
   two.update();
-  // 页面刷新定时器
-  let frameRateInterval = null;
 
   // 下面是业务逻辑部分
 
@@ -114,28 +109,16 @@ export default ({ el, center, rotateSpeed = 0.045, speed = -12 }) => {
       status = 1; // 游戏开始
       clip.bulletLoad() // 先上膛一颗子弹
       wheel.rotate();
-      // two.play();
-
-      console.log('----------FRAME RATE---------', FRAMERATE)
-
-      if (frameRateInterval) {
-        clearInterval(frameRateInterval)
-      } else {
-        setInterval(function() {
-          two.update();
-        }, FRAMERATE);
-      }
+      two.play();
     },
     pause: () => {
       wheel.stop();
-      // two.pause();
-      clearInterval(frameRateInterval)
+      two.pause();
     },
     destroy: () => {
       two.unbind('update');
       two.pause();
       el.removeChild(two.renderer.domElement);
-      clearInterval(frameRateInterval);
     }
   }
 }

src/pages/game/algorithm/pedestal.js

@@ -34,7 +34,7 @@ export function drawPedestal ({ two, center }) {
   pedestalBox.scale = scale;
 
   // 绘制底座上的绳子
-  const ropeSequence = two.makeImageSequence(ropeImageList, x, y, 30); // 40 是不断调式出来的频率, 需要跟 speed 匹配
+  const ropeSequence = two.makeImageSequence(ropeImageList, x, y, 40); // 40 是不断调式出来的频率, 需要跟 speed 匹配
   ropeSequence.scale = new Two.Vector(scale, scale);
 
   return {

src/pages/game/algorithm/wheel.js

@@ -18,9 +18,10 @@ export function drawWheel({ two, center, rotateSpeed, cages }) {
   // 摩天轮与轿厢旋转
   let _count = 0;
   let rotateAngle = 0;
-  const wheelRotate = () => {
+  const wheelRotate = (_, timeDelay) => {
     _count += 1;
-    rotateAngle += rotateSpeed
+    // rotateAngle += rotateSpeed
+    rotateAngle += rotateSpeed * timeDelay / 1000
     wheelArc.rotation = rotateAngle
     cages.forEach(cage => {
       const angle = cage.__$angle + rotateAngle + perAngle / 2  // 除以2是为了视觉上轿厢与摩天轮的轴对齐