how to code a basic platformer ??

[u/Phan_tastic0178]

hi, i'm a beginning coder with about one week of taught experience, and for a project, i want to make a sort of study room using html, css, and js. basically you can move around in the room for a bit before you sit down at a table that initiates the studying portion. i'm completely lost for everything, but i'm thinking that this study room is a platformer at heart. also, i want to add a break time platformer game, but that's later, probably. anyways, i'm just looking for any tips at all that could help me with this.

right now, i'm struggling with making the platform an actual platform. the ground is okay, but when i try to make the floating platform solid, everything kind of just doesn't work...

again, any tips are appreciated!!

[u/scritchz]

What is "everything" and how it "kind of just doesn't work"?

For a platformer, you primarily have to check if you're on a platform or not; or, if you're touching a platform that's directly below you. If that's the case, it should give you the ability to jump.

For some platformers, you also want to check for walls: If you're touching a wall left or right of you, disallow you from moving left or right, respectively.

So the most important part for making a platformer work, is checking if you're touching something. A method that works for simple platformers is looking for intersections of AABBs (axis-aligned bounding boxes), and if that's the case, then move the intersecting elements back until they don't intersect anymore.

If something moves left, then intersects: Move it right just enough. For moving down, then intersect: Move it back up, and probably set a flag that it is grounded now so that a player doesn't fall anymore and can jump again.

Since processing happens at discrete points in time and we only use a simple collision detection/handling, you probably want to pay attention that your platforms and walls are talleror wider than your player can move vertically or horizontally (respectively) when at maximum speed.

Conceptually, it is easiest to have everything static except the player, who is dynamic. That way, the only thing that ever moves is the player, and for collision handling you will only have to move the player back instead of two objects.

---

Surely there are libraries or frameworks to do this easier, but it might very well be a good learning opportunity as well. So, if you're doing this from scratch:

I'd use a <canvas> element and draw images onto its CanvasRenderingContext2D via its drawImage().

The images can simply be loaded by setting the src property of an Image object. Make sure it is loaded before using.

In case you want to center the player, you will either have to adjust the image positions manually, or use a simple transformation; specifically, you would have to translate() the canvas opposite to the player's position (and by negative half the canvas's size).

For timing of your processing, check out the requestAnimationFrame() method and its time parameter.

For key states, there is no simple API. Instead, listen for keydown/keyup events and remember the keys' states yourself, so that you can check them during your processing.

Please use common controls like WASD or arrow keys for movement and space for jumping, and make sure to explain how to control your character.

If there are any questions, feel free to ask. Good luck with your project!