Wie aktualisiere ich die Arbeitsfläche und rufe asynchrone Methoden innerhalb der setInterval-Funktion auf?

Okay, hier ist ein besseres Beispiel aus: https://www.w3schools.com/graphics/tryit.asp?filename=trygame_component_move ... Meine Frage ist, wie ich das rote Rechteck zuerst nach oben bewegen, indem ich myGamePiece.moveUp() aufrufen; und nachher nach rechts durch den Aufruf von myGamePiece.moveRight() ;? weil es im Moment gleichzeitig passiert.Wie aktualisiere ich die Arbeitsfläche und rufe asynchrone Methoden innerhalb der setInterval-Funktion auf?

Danke.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
 
    <style> 
 
     canvas { 
 
      border:1px solid #d3d3d3; 
 
      background-color: #f1f1f1; 
 
     } 
 
    </style> 
 
</head> 
 
<body onload="startGame()"> 
 
<script> 
 

 
    var myGamePiece; 
 

 
    function startGame() { 
 
     myGamePiece = new component(30, 30, "red", 10, 250); 
 
     myGameArea.start(); 
 
    } 
 

 
    var myGameArea = { 
 
     canvas : document.createElement("canvas"), 
 
     start : function() { 
 
      this.canvas.width = 480; 
 
      this.canvas.height = 270; 
 
      this.context = this.canvas.getContext("2d"); 
 
      document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
      this.interval = setInterval(updateGameArea, 20); 
 
     }, 
 
     clear : function() { 
 
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
     } 
 
    } 
 

 
    function component(width, height, color, x, y) { 
 
     this.width = width; 
 
     this.height = height; 
 
     this.x = x; 
 
     this.y = y; 
 
     this.update = function(){ 
 
      ctx = myGameArea.context; 
 
      ctx.fillStyle = color; 
 
      ctx.fillRect(this.x, this.y, this.width, this.height); 
 
     }; 
 

 
     this.moveUp = function() { 
 
      if(this.y > 50) { 
 
       this.y -= 1; 
 
      } 
 
     }; 
 

 
     this.moveRight = function() { 
 
      if(this.x < 400) { 
 
       this.x += 1; 
 
      } 
 
     } 
 
    } 
 

 
    function updateGameArea() { 
 
     myGameArea.clear(); 
 
     myGamePiece.moveUp(); 
 
     myGamePiece.moveRight(); 
 
     myGamePiece.update(); 
 
    } 
 
</script> 
 
<p>The red square moves one pixel to the right, 50 times per second.</p> 
 
</body> 
 
</html>

Quelle

2017-04-17 bady

Warum rufen Sie Intervall jedes Intervall? Stattdessen setze 'setInterval (update, 1000/fps);' wobei fps eine gewünschte Framerate ist. und entferne "interval()" von Update-Funktion. Könnten Sie auch genauer mit Ihrer Frage sein? –

Ich stimme dem @TomaszRadwaski zu. Und wir wissen nicht, was du machen willst. Bitte sei klarer. –

Ich habe es jetzt bearbeitet, ich möchte, dass die Methoden moveUp und moveRight asynchron aufgerufen werden. Und ich möchte, dass sie mehrfach verwendet werden, z. B. rufen Sie die moveUp-Methode auf, um 50px nach oben zu bewegen, und durch erneutes Aufrufen sollte das Objekt wieder 50px von der neuen Position auf der Zeichenfläche nach oben verschoben werden. – bady

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <style> 
    canvas { 
     border: 1px solid #d3d3d3; 
     background-color: #f1f1f1; 
    } 
    </style> 
</head> 

<body onload="startGame()"> 
    <script> 
    var myGamePiece; 

    function startGame() { 
     myGamePiece = new component(30, 30, "red", 10, 250); 
     myGameArea.start(); 
    } 

    var myGameArea = { 
     canvas: document.createElement("canvas"), 
     start: function() { 
     this.canvas.width = 480; 
     this.canvas.height = 270; 
     var onclick = document.createAttribute("onclick"); 
     onclick.value = "getMousePosition(event)"; 
     this.canvas.setAttributeNode(onclick); 
     this.context = this.canvas.getContext("2d"); 
     document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
     this.interval = setInterval(updateGameArea, 20); 
     }, 
     clear: function() { 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
     } 
    }; 

    function component(width, height, color, x, y) { 
     this.targetx = undefined; 
     this.targety = undefined; 
     this.width = width; 
     this.height = height; 
     this.x = x; 
     this.y = y; 
     this.update = function() { 
     ctx = myGameArea.context; 
     ctx.fillStyle = color; 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
     }; 

     this.moveUp = function() { 
     this.y -= 1; 
     }; 

     this.moveRight = function() { 
     this.x += 1; 
     }; 

     this.moveDown = function() { 
     this.y += 1; 
     }; 

     this.moveLeft = function() { 
     this.x -= 1; 
     }; 
    } 

    function updateGameArea() { 
     myGameArea.clear(); 
     if (myGamePiece.targetx && myGamePiece.targetx) { 
     if (myGamePiece.targetx < myGamePiece.x) { 
      myGamePiece.moveLeft(); 
     } else if (myGamePiece.targetx > myGamePiece.x) { 
      myGamePiece.moveRight(); 
     } else if (myGamePiece.targety < myGamePiece.y) { 
      myGamePiece.moveUp(); 
     } else if (myGamePiece.targety > myGamePiece.y) { 
      myGamePiece.moveDown(); 
     } else { 
      myGamePiece.targety = undefined; 
      myGamePiece.targetx = undefined; 
     } 
     } 
     myGamePiece.update(); 

    } 

    function getMousePosition(event) { 
     var x = event.clientX; 
     var y = event.clientY; 
     var coords = "X coords: " + x + ", Y coords: " + y; 
     console.log(coords); 
     myGamePiece.targetx = x; 
     myGamePiece.targety = y; 
    } 
    </script> 
    <p>The red square moves one pixel to the right, 50 times per second.</p> 
</body> 

</html>

Was verstand ich, ist, dass Sie dies tun wollen. Bewege einen nach oben, dann einen nach rechts, dann einen nach oben und dann nach rechts. So können Sie das tun. Kleine Unterschiede. EDIT: Ich habe falsch verstanden. Ich bearbeite den Code jetzt. EDIT2: Hinzugefügt die Funktionalität, die Sie gefragt haben. EDIT3: AKTUALISIERTER CODE, um es dorthin zu bewegen, wo die Maus klickt. Warnung. Aufgrund der Art und Weise, wie das Objekt auf dem Bildschirm gerendert wird, bewegt sich das Objekt nicht genau in der Mitte, wo Sie hin möchten. Ich empfehle p5.js Framework zu verwenden, um Canvas und nicht reines Javascript zu behandeln. Suchen Sie auf youtube nach "the coding train" für Tutorials.

Quelle

2017-04-17 23:59:14 itsundefined

Es ist fast die Lösung, aber ich möchte die Methode moveUp mehrmals aufrufen. Zum Beispiel sollte das Objekt in der Lage sein, zweimal zu bewegen ... zuerst von der Startposition aus, indem es moveUp zum ersten Mal aufruft und danach von der neuen Position, indem es moveUp erneut aufruft. – bady

Ich habe den Code vor 30 Sekunden bearbeitet. Versuche es noch einmal. Ich bin dieselbe Person, die die andere Antwort gegeben hat. – itsundefined

Danke, das habe ich gesucht. – bady

Wenn Sie es separat wollen bewegen, sollten Sie zwei verschiedene setInterval * haben. Ansonsten werden sich die Dinge so schnell ändern, dass es so aussieht, als wäre es zur gleichen Zeit passiert.

Eine andere mögliche Lösung ist x und y Animation nach bestimmten Ereignissen, wie Tastendruck oder Mausbewegung.

Ich schlage vor, Sie auch bei window.requestAnimationFrame()

Quelle

2017-04-17 22:01:20 bribeiro

Was meinst du mit zwei verschiedenen setInterval? Ich schaute window.requestAnimationFrame() auf, aber ich konnte keine Lösung für mein Problem finden ... schau dir das zweite Beispiel von w3schools an, dann wirst du mein Problem verstehen. Vielen Dank. – bady

Zunächst einmal einen Blick darauf werfen, was Sie suchen SetTimeout und nicht Intervall da das, was Sie im Wesentlichen tun Intervall() oft ruft. Wenn Sie das Objekt nicht wollen, diagonal zu bewegen, sollten Sie zwei getrennte Funktionen erstellen, die ihre eigenen Timer haben

Quelle

2017-04-17 23:12:36 itsundefined

Können Sie mir bitte ein Beispiel geben oder den Beispielcode ändern? – bady

Was möchten Sie tun? Move x nach 2 Sekunden um 1, dann nach 2 Sekunden um 1 und dann nach 2 Sekunden x um 1 und so weiter? – itsundefined

Könnten Sie das zweite Beispiel ändern, das ich von w3schools gegeben habe? Ich möchte die moveUp() -Methode, um die Y-Position des Rect jede Sekunde um 1 zu ändern, bis es 50 erreicht und danach die moveRight() -Methode, um X-Position jede Sekunde um 1 zu ändern, bis es 400 erreicht. Danke. – bady

Wie aktualisiere ich die Arbeitsfläche und rufe asynchrone Methoden innerhalb der setInterval-Funktion auf?

Antwort

Verwandte Themen