添加在适当区间松手时的语音效果

.gitignore

@@ -1,3 +1,7 @@
 参考/*
 what2.md
 录制动画.psd
+
+# compile from less
+# > lessc html/document.less > html/document.css
+document.css

html/document.js

@@ -47,6 +47,29 @@ const Values = {
     }
 };
 
+
+const voiceButton = document.querySelector('.set-voice');
+
+const Voices = {
+    chisato: new Audio('chinanago.mp3'),
+    takina: new Audio('sakana.mp3'),
+
+    isMute: false
+};
+
+Voices.takina.volume = Voices.chisato.volume = 0.8;
+Voices.takina.muted = Voices.chisato.muted = true;
+
+const toggleVoiceMute = () => {
+    Voices.isMute = voiceButton.getAttribute('data-active') !== 'true';
+    voiceButton.setAttribute(
+        'data-active',
+        Voices.isMute
+    );
+    Voices.takina.muted = Voices.chisato.muted = Voices.isMute;
+};
+
+
 let runing = true;
 
 const deepCopy = v=> JSON.parse(JSON.stringify(v));
@@ -230,12 +253,16 @@ el.onmousedown = e=>{
     const _downPageX = pageX;
     const _downPageY = pageY;
 
+    // 确保通过用户触发事件获得 audio 播放授权
+    Voices.takina.muted = Voices.chisato.muted = Voices.isMute;
+
     document.onmouseup = e=>{
         e.preventDefault();
         document.onmousemove = null;
         document.onmouseup = null;
 
         runing = true;
+        playVoice();
         run();
     };
     document.onmousemove = e=>{
@@ -261,11 +288,15 @@ el.ontouchstart = e=>{
     const _downPageX = pageX;
     const _downPageY = pageY;
 
+    // 确保通过用户触发事件获得 audio 播放授权
+    Voices.takina.muted = Voices.chisato.muted = Voices.isMute;
+
     document.ontouchend = e=>{
         document.ontouchmove = null;
         document.ontouchend = null;
 
         runing = true;
+        playVoice();
         run();
     };
     document.ontouchmove = e=>{
@@ -283,6 +314,34 @@ el.ontouchstart = e=>{
         move(x,y);
     };
 };
+
+
+
+const playVoice = () => {
+    if (Voices.isMute) return;
+    // console.log({ r: v.r, y: v.y })
+
+    if (el.classList.contains('chisato')) {
+        if (
+            // 'nice chin~a~na~go~' 经验值
+            Math.abs(v.r) <= 4
+            && Math.abs(v.y) >= 20
+        ) {
+            console.log('nice chin~a~na~go~');
+            Voices.chisato.play();
+        };
+    } else {
+        if (
+            // 'nice sakana~' 经验值
+            v.r >= Values.takina.r
+            && (Math.abs(v.y) <= 12 || v.r >= 3 * Math.abs(v.y))
+        ) {
+            console.log('nice sakana~');
+            Voices.takina.play();
+        };
+    };
+};
+
 const canOrientation = !!(
     window.DeviceOrientationEvent 
     && 

html/document.less

@@ -120,17 +120,21 @@ canvas{
     font-size: 12px;
     line-height: 20px;
     padding: 4px 4px;
+    overflow: hidden;
+    width: 50px;
     a{
+        float: left;
         padding:0 4px;
+        margin-top:2px;
         border-radius:2px;
+        &[data-active="true"]{
+            background: #182562;
+        }
     }
 }
 .trigger-magic-link{
     &:before{
-        content: 'Auto';
-    }
-    &[data-active="true"]{
-        background: #182562;
+        content: '自动';
     }
 }
 
@@ -161,6 +165,18 @@ button{
     border-radius:4px; 
     cursor: pointer;
 }
+
+.set-voice {
+    cursor: pointer;
+
+    &.voice-mute {
+        text-decoration: line-through;
+        // &::before, &::after {
+        //     content: '\00a0';
+        // }
+    }
+}
+
 .set-orientation-link{
     display: none;
 }

html/index.html

@@ -17,6 +17,7 @@
     </div>
     <div class="ctrl-box">
         <a class="set-orientation-link" onclick="setOrientationListener()">陀螺仪</a>
+        <a class="set-voice" onclick="toggleVoiceMute()">静音</a>
         <a class="trigger-magic-link" onclick="triggerMagic()"></a>
     </div>
     <footer>