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

Question

I'm trying to move a rectangle in a canvas element, and haven't had any luck. 我试图在画布元素中移动一个矩形，并没有任何运气。 This is my code so far. 到目前为止这是我的代码。 I want to do it in PURE JavaScript, not jQuery or any other library. 我想在PURE JavaScript中做，而不是jQuery或任何其他库。

My 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: 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>

I've been at this for hours and haven't had any luck. 我已经在这几个小时了，没有运气。 I would appreciate it if someone could help me, and get this done soon. 如果有人可以帮助我，我会很感激，并尽快完成。

Answer 1

There were a lot of issues with you code and I eventually thought it would be easier to remake a simple version for you to look at. 您的代码存在很多问题，我最终认为重新制作一个简单的版本会让您更容易看到。 If you really want to stick with your version, please check any browser console for errors and you'll see the issues I'm seeing. 如果你真的想坚持你的版本，请检查任何浏览器控制台的错误，你会看到我看到的问题。 Some functions aren't yet available onload , there is no key variable, yet there is a Key variable. 有些函数尚未可用onload ，没有key变量，但有一个Key变量。 There were other issues, too, regarding variable and function scope. 关于变量和功能范围，还有其他问题。

Here's a new version for you to look at: http://codepen.io/antibland/pen/ONwEBE 这是一个新版本供您查看： http ： //codepen.io/antibland/pen/ONwEBE

It's not my finest work, but it's a step in the right direction for you. 这不是我最好的工作，但它是朝着正确的方向迈出的一步。 Instead of setInterval , you should be using requestAnimationFrame to do the redraw. 您应该使用requestAnimationFrame来重绘，而不是setInterval 。 It's much more performant (more on that here if you're interested). 它的性能要高得多（如果你感兴趣，可以在这里更多）。

In my demo, a real <canvas> element is used. 在我的演示中，使用了一个真正的<canvas>元素。 The smaller rectangle is added to it. 添加较小的矩形。 I figured you intended to use the real canvas since you included a myCanvas variable in your code. 我认为你打算使用真正的画布，因为你在代码中包含了myCanvas变量。 If not, apologies. 如果没有，请道歉。 Either way, you'll probably want to add bounds checking in there, to keep the small rectangle from moving beyond the walls. 无论哪种方式，您可能都希望在那里添加边界检查，以防止小矩形移动到墙外。

Good luck! 祝好运！

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-23 07:41:28

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-23 07:41:28

解决方案1
0 已采纳 2016-04-23 07:41:28