Verwenden von JavaScript-Animation zum Verschieben von Rechteck mit den Pfeiltasten

Ich versuche, ein Rechteck in einem Canvas-Element zu verschieben, und hatte kein Glück. Das ist bisher mein Code. Ich möchte es in PURE JavaScript, nicht in jQuery oder einer anderen Bibliothek machen.Verwenden von JavaScript-Animation zum Verschieben von Rechteck mit den Pfeiltasten

Mein 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>

Ich habe stundenlang auf diese und haben kein Glück gehabt. Ich würde es begrüßen, wenn mir jemand helfen könnte, und das bald erledigen.

Quelle

2016-04-22 TheOrtus

Es gab eine Menge Probleme mit Ihnen Code und ich dachte schließlich, es wäre einfacher, eine einfache Version für Sie neu zu erstellen. Wenn Sie wirklich bei Ihrer Version bleiben möchten, überprüfen Sie bitte die Browser-Konsole auf Fehler und Sie werden die Probleme sehen, die ich sehe. Einige Funktionen sind noch nicht verfügbar onload, es gibt keine key Variable, aber es gibt eine Key Variable. Es gab auch andere Probleme hinsichtlich des Variablen- und Funktionsumfangs.

Hier ist eine neue Version für Sie sehen: http://codepen.io/antibland/pen/ONwEBE

Es ist nicht meine beste Arbeit, aber es ist ein Schritt in die richtige Richtung für Sie. Anstelle von setInterval sollten Sie requestAnimationFrame verwenden, um das Neuzeichnen durchzuführen. Es ist viel leistungsfähiger (mehr zu diesem here, wenn Sie interessiert sind). In meiner Demo wird ein echtes <canvas> Element verwendet. Das kleinere Rechteck wird hinzugefügt. Ich dachte, Sie wollten die echte Leinwand verwenden, da Sie eine myCanvas Variable in Ihren Code eingefügt haben. Wenn nicht, entschuldigt. In jedem Fall werden Sie wahrscheinlich Grenzen hinzufügen wollen, um das kleine Rechteck daran zu hindern, sich über die Wände hinaus zu bewegen.

Viel Glück!

Quelle

2016-04-23 07:41:28

Verwenden von JavaScript-Animation zum Verschieben von Rechteck mit den Pfeiltasten

Antwort

Verwandte Themen