使用JavaScript动画通过箭头键移动矩形

我正试图在画布元素中移动一个矩形，并且没有任何运气。这是我的代码到目前为止。我想在PURE JavaScript中做，而不是jQuery或任何其他库。使用JavaScript动画通过箭头键移动矩形

我的javascript：

window.onload = beginningMovement; // load beginning movement 

    function beginningMovement() { 
     var elem = document.getElementById("rectangle"); 
     var pos = 0; 
     var id = setInterval(frame, 8); 
     function frame() {    
     if (pos == 203) { 
      clearInterval(id); 

      //Color funcs 
      setTimeout(black, 0); 
      setTimeout(lightgray, 500); 
      setTimeout(black, 1000); 
      setTimeout(lightgray, 1500); 
      setTimeout(black, 2000); 
      setTimeout(lightgray, 2500); 

      function black() { 
      var color = document.getElementById('container').style.backgroundColor = "black"; 
      } 

      function lightgray() { 
      var color = document.getElementById('container').style.backgroundColor = "lightgray"; 
      } 
      //End of color funcs 


     } else { 
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.middle = pos + 'px'; 
     } 
     } 
    } 

    //Arrow switching 
    var X = 40; 
    var Y = 20; 

    function switchKey(event) { 
     Key = event.keyCode; 

     myCanvas.fillstyle = "white"; 
     myCanvas.filRect(X, Y, 50, 50); 
    } 

    switch(key) { 
     case 37: X -=5; 
     break; 
     case 37: Y -=5; 
     break; 
     case 37: X +=5; 
     break; 
     case 37: Y +=5; 
    } 

    myCanvas.fillstyle = "blue"; 
    myCanvas.filRect(X, Y, 50, 50);

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style type="text/css"> 

     #container { 
      width: 450px; 
      height: 400px; 
      border: 5px solid black; 
      background: lightgray; 
     } 

     #rectangle { 
      height: 50px; 
      width: 150px; 
      background: cyan; 
      margin-left: 150px; 
      margin-top: 160px; 
      position: absolute; 
     } 

    </style> 
    </head> 
    <body onkeyup="switchKey(event)"> 
     <div id="container"> 
      <div id="rectangle"> 

      </div> 
     </div> 
    </body> 
    </html>

我已经在这几个小时，还没有任何运气。如果有人能够帮助我，我会很感激，并尽快完成。

来源

2016-04-22 TheOrtus

有很多问题与你的代码，我最终认为它会更容易重拍一个简单的版本供您查看。如果您确实想要坚持使用您的版本，请检查所有浏览器控制台是否存在错误，然后您会看到我所看到的问题。某些功能尚未提供onload，没有key变量，但有一个Key变量。还有其他问题，关于变量和功能范围。

这里有一个新的版本，你看看：http://codepen.io/antibland/pen/ONwEBE

这不是我最好的作品，但它是在你的正确方向迈出的一步。而不是setInterval，您应该使用来重绘。它更高性能（如果你感兴趣的话，更多关于here）。

在我的演示中，使用了一个真实的<canvas>元素。较小的矩形被添加到它。我想你打算使用真正的画布，因为你的代码中包含一个myCanvas变量。如果没有，道歉。无论哪种方式，您可能都希望在那里添加边界检查，以防止小矩形移出墙壁。

祝你好运！

来源

2016-04-23 07:41:28

使用JavaScript动画通过箭头键移动矩形

回答

相关问题