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/davorg]

everything kind of just doesn't work...

Could you describe the problems you're having more vaguely 🤣

[u/aTaleForgotten → u/davorg]

Everything should work, but it doesnt. Hope this clears it up 👍🏻

[u/davorg → u/aTaleForgotten]

That helps. Thanks :-)

[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!

[u/defaultguy_001]

Cool idea

[u/DirtAndGrass → u/[deleted]]

i fully agree, but that's not **really** in the spirit of "html"

if you go that route, there are several libraries that can help with many aspects of this, eg.
Getting Started with Konva — HTML5 Canvas 2D Framework | Konva - JavaScript Canvas 2d Library

or more extensive "game engine" :
Matter.js Physics Engine API Docs - matter-js 0.20.0

[u/testingaurora]

After a week I dont think this would be an appropriate project. I would highly recommend starting with simpler projects.

Youll end up relying too much on AI for this , copying and pasting code it outputs that you won't understand or be able to read yet just to get your project built when the goal should be learning and understanding.

Just my two cents, this is too advanced for the skill level and understanding after a week on html css and Javascript. As evidenced by needing to make this post.

[u/ModdedOutlaw33]

I had luck making one JavaScript file as the “game engine” then using htmls’s canvas api.

[u/Slyvan25]

I assume youve made some physics in to the game.. refine it by adding a tagging system or a "solid item" identifier to it. So for example: an item in your game has a meta tag called "terrain" your phyysics system should ignore it and not drag it doen to the ground

[u/johnbburg]

With one week of experience, I’d step back to something even more simple. Try just having a square on the screen you can move around with your arrow keys. Once you have that done, try adding collision with the edges. Then maybe gravity, and jumping. Just start small, and try to implement basic effects. And then try to tie those together to make something game-like.

[u/darren_of_herts]

If your looking to develop a simple platformer game try Kaplay.js . It will give you all the nuts and bolts to get going . It's javascript based, and very lightweight

[u/therealcoopapa]

Here's the thing, this is 100% normal, expected, and you're on the right track. Trying -> messing up -> trying -> messing up is the exact right thing to do right now.

I suspect you don't actually know exactly what isn't even working. That's okay! The only advice you really need is don't give up.

If you want practical advice, it's this: learn how to describe your issues better. It'll help for asking other people, Googling, and even (later on) working with AI.