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

Using JavaScript Animation to Move Rectangle With Arrow Keys

本文关键字：移动 JavaScript 动画 使用      更新时间：2023-09-26

我正在尝试在画布元素中移动矩形，但没有任何运气。这是我到目前为止的代码。我想用PURE JavaScript来做，而不是jQuery或任何其他库。

我的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>

我已经在这里待了几个小时，没有任何运气。如果有人能帮助我，并尽快完成这项工作，我将不胜感激。

你的代码有很多问题，我最终认为重新制作一个简单的版本让你看看会更容易。如果您真的想坚持使用您的版本，请检查任何浏览器控制台是否有错误，您将看到我看到的问题。有些函数尚不可用onload，没有key变量，但有一个Key变量。关于变量和函数范围，还有其他问题。

这是一个新版本供您查看：http://codepen.io/antibland/pen/ONwEBE

这不是我最好的作品，但对你来说，这是朝着正确方向迈出的一步。而不是setInterval，你应该使用requestAnimationFrame来重绘。它的性能要高得多（如果您有兴趣，请在此处详细介绍）。

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

祝你好运！

相关文章：