使用JavaScript動畫使用箭頭鍵移動矩形

Question

我試圖在畫布元素中移動一個矩形，並沒有任何運氣。 到目前為止這是我的代碼。 我想在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>

我已經在這幾個小時了，沒有運氣。 如果有人可以幫助我，我會很感激，並盡快完成。

Answer 1

您的代碼存在很多問題，我最終認為重新制作一個簡單的版本會讓您更容易看到。 如果你真的想堅持你的版本，請檢查任何瀏覽器控制台的錯誤，你會看到我看到的問題。 有些函數尚未可用onload ，沒有key變量，但有一個Key變量。 關於變量和功能范圍，還有其他問題。

這是一個新版本供您查看： http ： //codepen.io/antibland/pen/ONwEBE

這不是我最好的工作，但它是朝着正確的方向邁出的一步。 您應該使用requestAnimationFrame來重繪，而不是setInterval 。 它的性能要高得多（如果你感興趣，可以在這里更多）。

在我的演示中，使用了一個真正的<canvas>元素。 添加較小的矩形。 我認為你打算使用真正的畫布，因為你在代碼中包含了myCanvas變量。 如果沒有，請道歉。 無論哪種方式，您可能都希望在那里添加邊界檢查，以防止小矩形移動到牆外。

祝好運！

使用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