自走模式：以随机间隔、施加一个大小随机的力

html/document.js

@@ -1,3 +1,5 @@
+const htmlEl = document.documentElement;
+
 let device = String(navigator.userAgent.match(/steam|macos/i)).toLowerCase();
 
 if(
@@ -6,7 +8,7 @@ if(
     (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
 ) device = 'ios';
 
-document.documentElement.setAttribute('data-device',device)
+htmlEl.setAttribute('data-device',device)
 
 
 
@@ -24,7 +26,7 @@ const params = new Proxy(new URLSearchParams(window.location.search), {
 });
 
 if(params.alpha){
-    document.documentElement.setAttribute('data-alpha',params.alpha);
+    htmlEl.setAttribute('data-alpha',params.alpha);
 }
 
 
@@ -61,7 +63,7 @@ const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
 
 const resize = _=>{
-    width = Math.min(document.documentElement.offsetWidth,800);
+    width = Math.min(htmlEl.offsetWidth,800);
     height = 800;
 
     canvas.width = width;
@@ -279,7 +281,7 @@ const canOrientation = !!(
     typeof window.DeviceOrientationEvent['requestPermission'] === 'function'
 );
 
-document.documentElement.setAttribute('data-can-orientation',canOrientation);
+htmlEl.setAttribute('data-can-orientation',canOrientation);
 
 const getOrientationPermission = onOver=>{
     if (!canOrientation) return onOver();
@@ -288,58 +290,69 @@ const getOrientationPermission = onOver=>{
         // console.log({permissionState})
         if(permissionState !== 'granted') return //alert('获取权限失败');
 
-        document.documentElement.setAttribute('data-permission-state',true);
+        htmlEl.setAttribute('data-permission-state',true);
         onOver();
     });
 };
+
+
+const onDeviceOrientation = (e)=> {
+    const { alpha, beta, gamma, acceleration } = e;
+
+    // console.log( { alpha, beta, gamma });
+
+    or = -gamma / 2;
+    // or = or * (alpha > 180?-1:1);
+    or = Math.min(maxR,or);
+    or = Math.max(-maxR,or);
+};
 const setOrientationListener = _=>{
     getOrientationPermission(_=>{
         if(window.DeviceOrientationEvent){
-            let lastPower;
-            let lastOriUnix = 0;
-            window.addEventListener('deviceorientation', (e)=> {
-                const { alpha, beta, gamma, acceleration } = e;
-                const unix = +new Date();
-                // if((unix - lastOriUnix) < 50) return;
-
-                // console.log( { alpha, beta, gamma });
-
-                or = -gamma / 2;
-                // or = or * (alpha > 180?-1:1);
-                or = Math.min(maxR,or);
-                or = Math.max(-maxR,or);
-                // console.log({or})
-                // out.innerHTML = JSON.stringify({ alpha, beta, gamma },0,2);
-                return;
-
-                lastOriUnix = unix;
-                const power = Math.max(
-                    // alpha,
-                    beta,
-                    gamma
-                );
-
-                // console.log(e,beta,gamma);
-                if(lastPower === undefined){
-                    lastPower = power;
-                }
-                const g = power - lastPower;
-                const gg = Math.abs(g * 0.5);
-                if(Math.abs(v.w) < gg){
-                    v.w = (v.w<0?-1:1) * (Math.abs(v.w) + gg);
-                }
-                lastPower = power;
-
-            });
+            window.addEventListener('deviceorientation', onDeviceOrientation );
         };
     });
 };
 
-// setOrientationListener();
+let magicForceTimerHandle = undefined;
+let magicForceFlag = false;
 
+const magicForce = _=>{
 
-document.querySelector('.bed').addEventListener('click',e=>{
-    e.preventDefault();
+    // 0.1 probability to Switch Character
+    if(Math.random() < 0.1){
+        switchValue();
+    }else{
+        // Add random velocities in the vertical and horizontal directions
+        v.t = v.t + (Math.random()-0.5)*150;
+        v.w = v.w + (Math.random()-0.5)*200;
+    }
+
+
+    // Set a variable delay between applying magic powers
+    magicForceTimerHandle = setTimeout(
+        magicForce, 
+        Math.random()*3000+2000
+    );
+};
+const triggerMagicLinkEl = document.querySelector('.trigger-magic-link');
+const triggerMagic = _=>{
+    // Flip the status flag
+    magicForceFlag = !magicForceFlag;
+
+    htmlEl.setAttribute('data-magic-force',magicForceFlag);
+    triggerMagicLinkEl.setAttribute('data-active',magicForceFlag);
+
+    clearTimeout(magicForceTimerHandle);
+
+    // Clear the timer or start a timer based on the new flag
+    if (magicForceFlag)
+        magicForceTimerHandle = setTimeout(magicForce, Math.random()*1000+500);
+};
+
+// setOrientationListener();
+
+const switchValue = _=>{
     el.classList.toggle('chisato');
 
     if(el.classList.contains('chisato')){
@@ -349,7 +362,13 @@ document.querySelector('.bed').addEventListener('click',e=>{
         v = deepCopy(Values['takina']);
         history.replaceState({},'','?v=takina');
     }
+}
+
+document.querySelector('.bed').addEventListener('click',e=>{
+    e.preventDefault();
+
+    switchValue();
 })
 
 
-window.addEventListener('resize',resize);
+window.addEventListener('resize',resize);

html/document.less

@@ -16,7 +16,8 @@ html{
 
     &[data-alpha="true"]{
         background: none;
-        footer{
+        footer,
+        .ctrl-box{
             display: none;
         }
     }
@@ -32,8 +33,9 @@ body{
     height: var(--app-height);
 }
 a{
-    color: #FFF;
+    color: #a4c5e1;
     text-decoration: none;
+    cursor: pointer;
 }
 .app{
     display: block;
@@ -102,6 +104,28 @@ canvas{
     }
 }
 
+
+.ctrl-box{
+    position: absolute;
+    bottom:0;
+    left:0;
+    font-size: 12px;
+    line-height: 20px;
+    padding: 4px 4px;
+    a{
+        padding:0 4px;
+    }
+}
+.trigger-magic-link{
+    &:before{
+        content: 'Auto';
+    }
+    &[data-active="true"]{
+        background: #182562;
+    }
+}
+
+
 footer{
     position: absolute;
     bottom:0;
@@ -113,7 +137,6 @@ footer{
 
     a{
         display: block;
-        color: #a4c5e1;
         span{
             opacity: 0.5;
         }
@@ -129,29 +152,23 @@ button{
     border-radius:4px; 
     cursor: pointer;
 }
-.set-orientation-box{
+.set-orientation-link{
     display: none;
-    div&{
-        box-shadow: 0 0 10px rgba(0,0,0,.1);
-        position: absolute;
-        bottom:0;
-        left:0;
-        right:0;
-        background: rgba(23,37,98,.9);
-        // margin: 20px;
-        // border-radius:8px;
-        padding:20px;
-        text-align: center;
+}
+[data-text]{
+    &:before{
+        content: attr(data-text);
     }
 }
 
 html[data-can-orientation="true"]{
-    .set-orientation-box{
+    .set-orientation-link{
         display: block;
     }
 }
 html[data-permission-state="true"]{
-    .set-orientation-box{
+    .set-orientation-link{
         display: none;
     }
-}
+}
+

html/index.html

@@ -15,8 +15,11 @@
             <div class="bed"></div>
         </div>
     </div>
+    <div class="ctrl-box">
+        <a class="set-orientation-link" onclick="setOrientationListener()">陀螺仪</a>
+        <a class="trigger-magic-link" onclick="triggerMagic()"></a>
+    </div>
     <footer>
-        <a class="set-orientation-box" onclick="setOrientationListener()">陀螺仪</a>
         <a href="/" target="_blank">lab</a>
         <a href="https://weibo.com/1197780522/M2xbREtGI" target="_blank">微博</a>
         <a href="https://github.com/itorr/sakana" target="_blank">GitHub</a>
@@ -29,13 +32,10 @@
             卜卜口
         </a>
     </footer>
-    <!-- <div class="set-orientation-box">
-        <button onclick="setOrientationListener()">申请陀螺仪权限</button>
-    </div> -->
     <!-- <pre id="out"></pre> -->
     <script src="document.js"></script>
     <div style="display:none">
         <img src="chisato.png">
     </div>
 </body>
-</html>
+</html>