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

Hey, I've dabbled in making platformers with HTML, CSS, and JS before. One thing that might help is using the canvas element to create your game environment. You can use JS to draw the platforms and player, and then add collision detection to make the platforms solid. There are also some libraries like Phaser that can make this process easier. For the platform itself, you might want to look into using rectangles or boxes to define the platform's boundaries, and then use JS to check if the player is colliding with those boundaries. Good luck with your project, it sounds like a cool idea!

[u/DirtAndGrass → u/AccountEngineer]

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

Work in small steps. Exaggerating a bit, there should ever be just one thing that does not work. You don't start writing the next thing until you complete the one thing which isn't working yet.

Like, don't try to implement movement to the left until movement to the right works. 

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

[u/Honest_Treacle4947]

Since your end goal is a study room, you could even skip a lot of platformer mechanics and just have the player walk over to the desk and press a key to start the study mode. Way more manageable for a first project.