Wie man Objekte vom Rand der Leinwand abprallen lässt

Question

Ich versuche, ein HTML/JavaScript-Spiel zu machen, aber ich muss eines meiner Objekte vom Rand der Leinwand abprallen lassen, anstatt abzulaufen.

Hier ist mein Code: http://pastebin.ca/3594744

, wenn Sie „image_link“ im Code zu sehen, es ist nur ein Platzhalter für Bild-Links, die für urheberrechtliche entfernt wurden

Answer 1

Sie haben die richtige Idee. Ihr Objekt hat eine x & y-Position, die jedes Bild um die entsprechende x- oder y-Geschwindigkeit erhöht/verringert. Jetzt müssen Sie nur noch erkennen, wenn Ihr Objekt mit den Grenzen der Leinwand kollidiert ist, und die Geschwindigkeit in der jeweiligen Richtung negieren, um das Objekt in die entgegengesetzte Richtung zu schicken.

Hier einige Pseudo-Code:

// Called each frame to update the position of the object. 
updatePosition(): 
    handleCollision() 
    updatePosition() 

// Detects a collision with a wall, calculating the bounce offset, and new velocity if applicable. 
handleCollision(): 
    // Detect collision with right wall. 
    if (object.x + object.width > canvas.width) 
    // Need to know how much we overshot the canvas width so we know how far to 'bounce'. 
    overshootX = (object.x + object.width) - canvas.width 
    object.x = canvas.width - overshootX - object.width 
    velocityX = -velocityX 

    // Repeat the same algorithm for top, left, and bottom walls.