How can I make a player teleport?

Hi! I am using javascript to code my 2d platforming game and I wanted to know how you can make someone teleport about 100 pixels away from their current position.

For example if I press space wherever the person is currently standing it would basically just shift over a 100 pixels. But if something is in between the 100 pixels like a wall it will pass through it.

Does anyone know how to do this in Javascript?

For a basic teleport effect, you can simply translate the player forward.

But you mention that you want the player to teleport beyond objects that are in their way. To do that, you could cast a ray from the player’s initial position, to the target position. If an object is hit, you find the first clear area beyond the object, to where the player can stand again.

One basic method to do this, would be to fire a ray from 1 meter beyond the original target, back to the player’s position, then 2 meters, then 4 (doubling the distance every time), until the distance from where the ray is fired to the first object that is hit, is high enough for the player to fit there.

You could also come up with different or more complex solutions, to make sure you don’t teleport through multiple objects.

[edit] Another method for finding a place beyond the object:
Fire a ray from within the object in the direction the player is teleporting in, ignoring that first obstacle, then fire a ray back towards to the original player position, to ensure there is enough room for the player to fit there.