topical media & game development

talk show tell print

basic-javascript-12-Question-2.htm / htm



  <html>
  <head>
  <style type="text/css">
      #floatingDiv {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 50px;
          height: 50px;
          background-color: navy;
      }
  </style>
  <script type="text/javascript">
  
  var floatingDiv;
  var screenWidth;
  var screenHeight;
  
  var horizontalMovement = Math.ceil(Math.random() * 5);
  var verticalMovement = Math.ceil(Math.random() * 5);
  
  function startTimer() {
      floatingDiv  = document.getElementById("floatingDiv");
      screenWidth  = document.body.clientWidth;
      screenHeight = document.body.clientHeight;
      
      window.setInterval("moveDiv()", 10);
  }
  
  function moveDiv() {
      var currentLeft = floatingDiv.offsetLeft;
      var currentTop  = floatingDiv.offsetTop;
  
      if (currentTop < 0) {
          verticalMovement = Math.ceil(Math.random() * 5);
      } else if ( ( currentTop + floatingDiv.offsetHeight ) > screenHeight ) {
          verticalMovement = -(Math.ceil(Math.random() * 5));
      }
  
      if (currentLeft < 0) {
          horizontalMovement = Math.ceil(Math.random() * 5);
      } else if ( ( currentLeft + floatingDiv.offsetWidth) > screenWidth ) {
          horizontalMovement = -(Math.ceil(Math.random() * 5));
      }
  
      floatingDiv.style.left = currentLeft + horizontalMovement + "px";
      floatingDiv.style.top = currentTop + verticalMovement + "px";
  }
  </script>
  
  </head>
  <body onload="startTimer()">
      <div id="floatingDiv"></div>
  </body>
  </html>


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.