luistavares

JavaScript - Movimentando 2 DIVs ao mesmo tempo

Oct 6th, 2017
125
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <title>Manipulando CSS</title>
  4.         <style>
  5.             #box1{
  6.                 width: 50px;
  7.                 height: 50px;
  8.                 background-color: green;
  9.                 border-radius: 50px;
  10.                 position: absolute;
  11.                 top: 0px;
  12.                 left: 0px;
  13.             }
  14.             #box2{
  15.                 width: 50px;
  16.                 height: 50px;
  17.                 background-color: blue;
  18.                 border-radius: 50px;
  19.                 position: absolute;
  20.                 top: 0px;
  21.                 left: 200px;
  22.             }
  23.         </style>
  24.         <script>
  25.             var map = {}; // Teclas ao mesmo tempo
  26.        
  27.             var x1 = 0;
  28.             var y1 = 0;
  29.             var x2 = 200;
  30.             var y2 = 0;
  31.            
  32.             document.onkeydown = document.onkeyup = function (e) {     
  33.                 map[e.keyCode] = e.type == 'keydown';
  34.            
  35.                 // Tratando movimento da primeira DIV
  36.                 if (map[38]) {     
  37.                     y1 = y1 - 20;
  38.                     document.getElementById('box1').style.top = y1 + 'px';
  39.                 }
  40.                 else if (map[40]) {            
  41.                     y1 = y1 + 20;
  42.                     document.getElementById('box1').style.top = y1 + 'px';
  43.                 }
  44.                 else if (map[37]) {            
  45.                     x1 = x1 - 20;
  46.                     document.getElementById('box1').style.left = x1 + 'px';
  47.                 }
  48.                 else if (map[39]) {            
  49.                     x1 = x1 + 20;
  50.                     document.getElementById('box1').style.left = x1 + 'px';
  51.                 }
  52.            
  53.                 // Tratando movimento da segunda DIV
  54.                 if (map[87]) {     
  55.                     y2 = y2 - 20;
  56.                     document.getElementById('box2').style.top = y2 + 'px';
  57.                 }
  58.                 else if (map[83]) {            
  59.                     y2 = y2 + 20;
  60.                     document.getElementById('box2').style.top = y2 + 'px';
  61.                 }
  62.                 else if (map[65]) {            
  63.                     x2 = x2 - 20;
  64.                     document.getElementById('box2').style.left = x2 + 'px';
  65.                 }
  66.                 else if (map[68]) {            
  67.                     x2 = x2 + 20;
  68.                     document.getElementById('box2').style.left = x2 + 'px';
  69.                 }
  70.             }
  71.         </script>
  72.     </head>
  73.     <body>
  74.         <div id='box1'></div>  
  75.         <div id='box2'></div>  
  76.     </body>
  77. </html>
RAW Paste Data