音效纠正

src/components/Counter/index.jsx

@@ -50,7 +50,7 @@ const ShakeCount = (props) => {
           canvas.width = width
           canvas.height = height
           ctx.scale(dpr, dpr)
-          
+
           canvasRef.current = canvas
           initS()
         })
@@ -68,7 +68,7 @@ const ShakeCount = (props) => {
           canvas.width = width
           canvas.height = height
           ctx.scale(dpr, dpr)
-          
+
           canvasShapeRef.current = canvas
           initS()
         })

src/hooks/useInterval.jsx

@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useRef } from "react"
+import useCountDown from './../pages/index/hooks/useCountDown';
+import useShake from './../pages/index/hooks/useShake';
 
 /**
  * 定时器
@@ -7,6 +9,8 @@ import { useCallback, useEffect, useRef } from "react"
  * @returns
  */
 export default function useInterval(interval) {
+  const [count, countFn, startCount] = useCountDown();
+  const [times, startShake, onShakeEnd] = useShake()
 
   // 待执行函数列表
   const fnListRef = useRef([])
@@ -25,8 +29,11 @@ export default function useInterval(interval) {
     const ticker = setInterval(() => {
       console.log('-----------interval---------')
       fnListRef.current.forEach(fn => fn())
+
+
     }, interval)
     return () => clearInterval(ticker)
+
   }, [])
 
   return [push]

src/pages/index/components/TopBar/index.jsx

@@ -9,7 +9,6 @@ import './style.less'
 export default (props) => {
 
   const showTopList = () => {
-    console.log('----------------------')
     // Taro.navigateTo({ url: '/pages/topList/index' })
     Taro.navigateTo({ url: '/pages/topListCopy/index' })
   }

src/pages/index/hooks/useCountDown.js

@@ -15,7 +15,7 @@ export default function useCountDown() {
 
   const start = useCallback((startNum) => {
     numRef.current = startNum
-    setVal(3)
+    setVal(startNum)
   }, [])
 
   return [val, countDown, start]

src/pages/index/hooks/useShake.js

@@ -15,7 +15,7 @@ export default function useShake() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleShake = useCallback(throttle((val) => {
     setTimes(val)
-  }, 1300, { trailing: true, immediate: true }), [])
+  }, 1000, { trailing: true, immediate: true }), [])
 
   const start = useCallback(() => {
     isReadyRef.current = true

src/pages/index/index.jsx

@@ -33,10 +33,11 @@ const IndexPage = (props) => {
   useMemo(() => add2TickerList(countFn), [])
 
 
+  const [state, setstate] = useState(true)
   const { run } = useThrottleFn(
     () => {
       setTimeout(() => {
-        Taro.vibrateLong()
+        state ? Taro.vibrateLong() : ''
 
       }, 30000);
     },
@@ -45,46 +46,59 @@ const IndexPage = (props) => {
 
 
 
+  // 摇一摇
+  const [times, startShake, onShakeEnd] = useShake()
 
+  console.log("🚀 ~ file: index.jsx ~ line 49 ~ IndexPage ~ times", times)
+  useEffect(() => {
 
 
 
+    if (times >= 2) {
+      setTimeout(() => {
 
+        run()
+
+        //添加音效
+        const innerAudioContext = Taro.createInnerAudioContext()
+        innerAudioContext.autoplay = true// 是否自动开始播放，默认为 false
+        innerAudioContext.loop = false  // 是否循环播放，默认为 false
+        Taro.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
+          obeyMuteSwitch: false,   // 即使用户打开了静音开关，也能继续发出声音。
+          success: function (e) {
+            console.log(e)
+            console.log('play success')
+          },
+          fail: function (e) {
+            console.log(e)
+            console.log('play fail')
+          }
+        })
+        innerAudioContext.src = wexMP3
+        innerAudioContext.onPlay(() => {
+          console.log('开始播放')
+        })
+        innerAudioContext.onError((res) => {
+          console.log(res.errMsg)
+          console.log(res.errCode)
+        })
+        setTimeout(() => {
+          //定时清理destroy这个context。不然这个context就算stop了，内存还是被占用。
+          innerAudioContext.stop();
+
+          innerAudioContext.destroy();
+
+          innerAudioContext = null;
+
+        }, 10000);
 
-  // 摇一摇
-  const [times, startShake, onShakeEnd] = useShake()
-  useEffect(() => {
-    if (times >= 1) {
-      run()
-
-      //添加音效
-      const innerAudioContext = Taro.createInnerAudioContext()
-      innerAudioContext.autoplay = true// 是否自动开始播放，默认为 false
-      innerAudioContext.loop = false  // 是否循环播放，默认为 false
-      Taro.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
-        obeyMuteSwitch: false,   // 即使用户打开了静音开关，也能继续发出声音。
-        success: function (e) {
-          console.log(e)
-          console.log('play success')
-        },
-        fail: function (e) {
-          console.log(e)
-          console.log('play fail')
-        }
-      })
-      innerAudioContext.src = wexMP3
-      innerAudioContext.onPlay(() => {
-        console.log('开始播放')
-      })
-      innerAudioContext.onError((res) => {
-        console.log(res.errMsg)
-        console.log(res.errCode)
-      })
+
+      }, 2000)
 
 
     }
 
-  }, [times])
+  }, [state, times])
 
   onShakeEnd(() => {
     // 摇一摇结束
@@ -92,7 +106,7 @@ const IndexPage = (props) => {
     Taro.showToast({
       title: '游戏结束',
       icon: 'none',
-      duration: 2000
+      duration: 5000
 
 
     }).then(e => {
@@ -101,6 +115,7 @@ const IndexPage = (props) => {
         setBtnDisable(false)
         console.log(" 摇一摇结束")
         setbuttonTitle(false)
+        setstate(false)
 
 
       })
@@ -152,6 +167,11 @@ const IndexPage = (props) => {
         modRef.current = 'countdown'
         startCount(3)
         setBtnDisable(true)
+
+        // startShake(() => {
+        //   console.log('kaissssssssssssssssss',);
+        // })
+
       }
     }
 
@@ -178,10 +198,13 @@ const IndexPage = (props) => {
       if (count === 0) {
         modRef.current = 'shake'
         startShake()
+        setNum('Go!')
+
       }
     }
   }, [count])
 
+
   return (
     <View className='page-wrapper page-index'>
       <Counter className='shake-bg' value={num} />

src/utils/shake.js

@@ -19,21 +19,21 @@ export default function Shake() {
     //如果这次摇的时间距离上次摇的时间有一定间隔 才执行
     const diff = 20;
     if (nowTime - shakeData.lastTime > diff) {
-     var diffTime = nowTime - shakeData.lastTime; //记录时间段
-     shakeData.lastTime = nowTime; //记录本次摇动时间，为下次计算摇动时间做准备
-     shakeData.x = acceleration.x; //获取 x 轴数值，x 轴为垂直于北轴，向东为正
-     shakeData.y = acceleration.y; //获取 y 轴数值，y 轴向正北为正
-     shakeData.z = acceleration.z; //获取 z 轴数值，z 轴垂直于地面，向上为正
-     //计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度
-     var speed = Math.abs(shakeData.x + shakeData.y + shakeData.z - shakeData.lastX - shakeData.lastY - shakeData.lastZ) / diffTime * 10000;
-     //console.log(speed)
-     if (speed > shakeData.shakeSpeed) { //如果计算出来的速度超过了阈值，那么就算作用户成功摇一摇
+      var diffTime = nowTime - shakeData.lastTime; //记录时间段
+      shakeData.lastTime = nowTime; //记录本次摇动时间，为下次计算摇动时间做准备
+      shakeData.x = acceleration.x; //获取 x 轴数值，x 轴为垂直于北轴，向东为正
+      shakeData.y = acceleration.y; //获取 y 轴数值，y 轴向正北为正
+      shakeData.z = acceleration.z; //获取 z 轴数值，z 轴垂直于地面，向上为正
+      //计算 公式的意思是 单位时间内运动的路程，即为我们想要的速度
+      var speed = Math.abs(shakeData.x + shakeData.y + shakeData.z - shakeData.lastX - shakeData.lastY - shakeData.lastZ) / diffTime * 10000;
+      //console.log(speed)
+      if (speed > shakeData.shakeSpeed) { //如果计算出来的速度超过了阈值，那么就算作用户成功摇一摇
         next();
       }
 
-     shakeData.lastX = shakeData.x; //赋值，为下一次计算做准备
-     shakeData.lastY = shakeData.y; //赋值，为下一次计算做准备
-     shakeData.lastZ = shakeData.z; //赋值，为下一次计算做准备
+      shakeData.lastX = shakeData.x; //赋值，为下一次计算做准备
+      shakeData.lastY = shakeData.y; //赋值，为下一次计算做准备
+      shakeData.lastZ = shakeData.z; //赋值，为下一次计算做准备
     }
   }
 

src/utils/shape-shifter.js

@@ -14,6 +14,7 @@
 
 
 const S = {
+
   init: function (conf) {
     S.Drawing.init(conf);
     S.ShapeBuilder.init(conf);
@@ -23,18 +24,64 @@ const S = {
     });
   },
   performAction: function (value) {
+    console.log("🚀 ~ file: shape-shifter.js ~ line 27 ~ value", value)
+    const a = new Date()
+    console.log(a);
     const fast = true;
     S.Shape.switchShape(S.ShapeBuilder.letter(value), fast);
+    // let currentAction
+    // let interval
+
+    // function timedAction(fn, delay, max, reverse) {
+    //   clearInterval(interval);
+    //   currentAction = max;
+    //   fn(currentAction);
+
+    //     interval = setInterval(function () {
+    //       currentAction = currentAction - 1;
+    //       fn(currentAction);
+
+    //       if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
+    //         clearInterval(interval);
+    //       }
+    //     }, delay);
+    // }
+    // switch ('countdown') {
+    //   case 'countdown':
+    //     value = parseInt(value) || 10;
+    //     value = value > 0 ? value : 10;
+
+    //     timedAction(function (index) {
+    //       if (index === 0) {
+    //         if (sequence.length === 0) {
+    //           S.Shape.switchShape(S.ShapeBuilder.letter(''));
+    //         } else {
+    //           performAction(sequence);
+    //         }
+    //       } else {
+    //         S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
+    //       }
+    //     }, 1000, value, true);
+    //     break;
+
+    //   default:
+    // }
   }
+
+
 };
 
 S.Drawing = (function () {
   let canvas,
-      context,
-      renderFn,
-      requestFrame = function(callback) {
-                      setTimeout(callback, 1000 / 60);
-                    };
+    context,
+    renderFn,
+    requestFrame = function (callback) {
+      setTimeout(callback, 1000 / 100); //气泡分散集合 用到的时间
+    };
+
+
+
+
 
   return {
     init: function (conf) {
@@ -70,9 +117,29 @@ S.Drawing = (function () {
       context.closePath();
       context.fill();
     }
+
+
   }
 }());
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 S.Point = function (args) {
   this.x = args.x;
   this.y = args.y;
@@ -91,7 +158,7 @@ S.Color = function (r, g, b, a) {
 
 S.Color.prototype = {
   render: function () {
-    return 'rgba(' + this.r + ',' +  + this.g + ',' + this.b + ',' + this.a + ')';
+    return 'rgba(' + this.r + ',' + + this.g + ',' + this.b + ',' + this.a + ')';
   }
 };
 
@@ -132,10 +199,10 @@ S.Dot.prototype = {
 
   _moveTowards: function (n) {
     let details = this.distanceTo(n, true),
-        dx = details[0],
-        dy = details[1],
-        d = details[2],
-        e = this.e * d;
+      dx = details[0],
+      dy = details[1],
+      d = details[2],
+      e = this.e * d;
 
     if (this.p.h === -1) {
       this.p.x = n.x;
@@ -186,10 +253,12 @@ S.Dot.prototype = {
     this.p.z = Math.max(1, this.p.z - (d * 0.05));
   },
 
+
+
   distanceTo: function (n, details) {
     let dx = this.p.x - n.x,
-        dy = this.p.y - n.y,
-        d = Math.sqrt(dx * dx + dy * dy);
+      dy = this.p.y - n.y,
+      d = Math.sqrt(dx * dx + dy * dy);
 
     return details ? [dx, dy, d] : d;
   },
@@ -209,10 +278,10 @@ S.Dot.prototype = {
 
 S.ShapeBuilder = (function () {
   let gap = 13,
-      shapeCanvas,
-      shapeContext,
-      fontSize = 500,
-      fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
+    shapeCanvas,
+    shapeContext,
+    fontSize = 500,
+    fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
 
   function fit({ width, height }) {
     shapeCanvas.width = Math.floor(width / gap) * gap;
@@ -224,13 +293,13 @@ S.ShapeBuilder = (function () {
 
   function processCanvas() {
     let pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data,
-        dots = [],
-        x = 0,
-        y = 0,
-        fx = shapeCanvas.width,
-        fy = shapeCanvas.height,
-        w = 0,
-        h = 0;
+      dots = [],
+      x = 0,
+      y = 0,
+      fx = shapeCanvas.width,
+      fy = shapeCanvas.height,
+      w = 0,
+      h = 0;
 
     for (let p = 0; p < pixels.length; p += (4 * gap)) {
       if (pixels[p + 3] > 0) {
@@ -250,7 +319,7 @@ S.ShapeBuilder = (function () {
       if (x >= shapeCanvas.width) {
         x = 0;
         y += gap;
-        p += gap * 4 * shapeCanvas.width;
+        p += gap * 4 * shapeCanvas.width; //数字分散程度
       }
     }
 
@@ -276,12 +345,12 @@ S.ShapeBuilder = (function () {
   return {
     init,
     letter: function (l) {
-      let s = 0;
+      let s = 0.;
 
       setFontSize(fontSize);
       s = Math.min(fontSize,
-                  (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, 
-                  (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
+        (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
+        (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
       setFontSize(s);
 
       shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
@@ -295,10 +364,10 @@ S.ShapeBuilder = (function () {
 
 S.Shape = (function () {
   let dots = [],
-      width = 0,
-      height = 0,
-      cx = 0,
-      cy = 0;
+    width = 0,
+    height = 0,
+    cx = 0,
+    cy = 0;
 
   function compensate() {
     let a = S.Drawing.getArea();
@@ -323,7 +392,7 @@ S.Shape = (function () {
 
     switchShape: function (n, fast) {
       let size,
-          a = S.Drawing.getArea();
+        a = S.Drawing.getArea();
 
       width = n.w;
       height = n.h;
@@ -338,7 +407,7 @@ S.Shape = (function () {
       }
 
       let d = 0,
-          i = 0;
+        i = 0;
 
       while (n.dots.length > 0) {
         i = Math.floor(Math.random() * n.dots.length);
@@ -380,7 +449,7 @@ S.Shape = (function () {
 
           dots[i].s = false;
           dots[i].e = 0.04;
-          dots[i].move(new S.Point({ 
+          dots[i].move(new S.Point({
             x: Math.random() * a.w,
             y: Math.random() * a.h,
             a: 0.3, //.4
@@ -400,3 +469,8 @@ S.Shape = (function () {
 }());
 
 export default S;
+
+
+
+
+