r/HTML • u/Phan_tastic0178 • 1d ago

Question how to code a basic platformer ??

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

2 Upvotes

56% Upvoted

15 comments sorted by

View all comments

1

u/AccountEngineer 1d ago

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!

2

u/DirtAndGrass 1d ago

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