Question

所以，伙计们，我在玩面向设备的游戏。这是https://sublime.glitch.me/ 除了if条件之外，其他一切都进行得很好。如果您可以在移动设备上查看网页，则会看到png根据设备方向移动。

但是我不希望它离开屏幕，这是我需要的条件。我尝试通过if条件使evt.gamma不大于35或小于-35。

但是，显然，我所拥有的没有用。很抱歉，我的编码知识不好，我是设计师，而不是开发人员，有人可以帮帮我吗？

(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-52746336-1');ga('send','pageview');
    var isCompleted = {};
    function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
      }



      var fixed = 2;
      var h5logo  = document.getElementById("h5logo");
      var timestamp = document.getElementById("timestamp");
      var alpha = document.getElementById("alpha");
      var beta = document.getElementById("beta");
      var gamma = document.getElementById("gamma");
      

      /* // [START devori] */
      if (window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', deviceOrientationHandler, false);
        document.getElementById("doeSupported").innerText = "";
      }
      
      /* // [END devori] */

      var deviceOrientationData;

      function deviceOrientationHandler(evt) {
        deviceOrientationData = evt;
        
        try {
          timestamp.innerText = new Date(evt.timeStamp);
          alpha.innerText = evt.alpha.toFixed(fixed);
          beta.innerText = evt.beta.toFixed(fixed);
          gamma.innerText = evt.gamma.toFixed(fixed);
          
          
          if(evt.gamma<-35){evt.gamma=-35}
          if(evt.gamma>35){evt.gamma=35}
          
          var trans = " translate("+ ((evt.gamma+20) * 2)+"px, "+ ((evt.beta-90) * -3)+"px) " ;
          
          
          h5logo.style.webkitTransform = trans;
          h5logo.style.transform = trans;
         
          
        } catch (ex) {
          document.getElementById("doeSupported").innerText = "NOT";
        }
      }

.h5logo {
        width: 40vh;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position:absolute;
        z=index:10;
         }

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
   
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"> . 
    </script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title></title>

    </head>
    <body>
    
    
    <div role="main" class="container">
      
      <img src="https://cdn.glitch.com/8da575e7-c6aa-48cb-bb49-3a708f8c28fc%2Fpreview.png?1535142774062"  style="display: block; position: absolute; margin-left:auto; margin-right:auto; z-index:-2">
      <img id="h5logo" src="https://cdn.glitch.com/8da575e7-c6aa-48cb-bb49-3a708f8c28fc%2Fhand.png?1535129311138" class="h5logo">
      <h1 style="position:absolute; z-index:-1; transform: rotate(90deg) translate(20%,-60%);">
      sublime
      </h1>
      <p>
        <b>alpha:</b> <span id="alpha"></span><br>
        <b>beta:</b> <span id="beta"></span><br>
        <b>gamma:</b> <span id="gamma"></span><br>
      </p>

      <p>
         <span id="timestamp" ></span>
      </p>

      </div>
     
    </body>
    </html>

行不起作用，翻译工作正常，只是if条件。非常感谢你们。

if(evt.gamma<-35){evt.gamma=-35}
if(evt.gamma>35){evt.gamma=35}
var trans = " translate("+ ((evt.gamma+20) * 2)+"px, "+ 
((evt.beta-90) * -3)+"px) " ;

Answer 1

所有事件属性，包括route都是只读的，因此您需要将gamma和-35分配给新变量。参见documentation。

示例：

使用Math方法的简单示例：

let newGamma = evt.gamma;

if(evt.gamma < -35){
  newGamma = -35;
}
else if(evt.gamma > 35){
  newGamma = 35;
}

var trans = " translate(" + ((newGamma + 20) * 2) + "px, " + ((evt.beta - 90) * -3) + "px) ";

如果条件不适用于设备方向

1 个答案: