Share your repls and programming experiences

← Back to all posts
Canvas Platformer - HTML Canvas Game Engine
mwilki7 (1134)

I have been working on this for about a year and have finally brought it into a semi-playable state.

This is for creating your own levels or adapting the source code to fit your own game.

Known Issues:

• The tileset is blank squares - I don't know the fix for this other than hit refresh a few times
• Level loading is messed up sometimes (you'll see it in the first level), trying to fix this
• This is not meant for mobile, (1080p screen may be required) since I got too far in the HTML design that it was too late to turn back. Also resizing the canvas doesn't seem like a feasible option.

The Editor

The Tileset


• Select a tile and drag it on the screen to duplicate the block
• Press ESCAPE or Right Click to cancel
• Click an existing tile to move it
• Click an existing tile and press DELETE to delete an existing tile

Layers


You can organize your objects into different layers to make them appear distant with a different scrolling speed, or change the order in which they appear.
You must have at least one layer to put objects into, and it must be selected before you place any objects in the game.

Player


Controls with the arrow keys, space-bar to jump
you can even use the up-arrow since I haven't come up with hazards yet.

Level Settings


Change the size of the level or the background color

Things I have on the roadmap:

• In-game UI elements (health bars, HUD)
• Enemies
• Items
• Particle effects
• Interactible objects (doors, ladders, level transitions)
• A better level loading system (65k lines for a simple level is a bit much)
• Maybe my own music

Sources:

Source code - I programmed just 99% everything here (there are some functions that have a link to the page I got it from)
Tileset/Artwork - https://opengameart.org/content/generic-platformer-tiles
Stickfigure - I made the stick figure (and I'm proud of my stick figure >:()
Sounds - I made the sounds using audacity

Comments
hotnewtop
DynamicSquid (4897)

This makes me even more jealous of fullstack devs

mwilki7 (1134)

@DynamicSquid fullstack devs would laugh at my UI design though lol, the html portion of this project was infuriating, how anyone has a good handle on CSS deserves a nobel prize

DynamicSquid (4897)

@mwilki7 yeah, css is a mess, but the ui's not that bad, and the backend is awesome!

JosephSanthosh (1182)

What is a fullstack dev and a dev? @DynamicSquid

DynamicSquid (4897)

@JosephSanthosh
frontend = html css and js
backend = more complicated js, or other langs like python

fullstack = you can do both

StringentDev (224)

oh i am a fullstack then because i do python and html,css and a bit of js. @DynamicSquid

potatojs (846)

full stack devs needs to be REALLY good at what they're doing :) like cookie for example
@Lethdev2019

DynamicSquid (4897)

@Lethdev2019 well, a fullstack dev can combine all those as well. they can make a website with actually functionality

StringentDev (224)

i did. PIE and i also use electron @DynamicSquid

DynamicSquid (4897)

@Lethdev2019 oh okay, then you're a fullstack dev!

StringentDev (224)

before i saw this, i thought i was not a fullstack dev. @DynamicSquid

potatojs (846)

wait but..
i did that to!
so i am a full stack dev???
wow i'm gonna put it in my pr
@DynamicSquid

DynamicSquid (4897)

@potatojs why are you guys shocked about being a fullstack dev lol? it's nothing special, it's just a type of coder. game dev, software engineer, data scientist, ML, etc. fullstack is just another type lol

potatojs (846)

i know but it's cool!
full stack dev!
@DynamicSquid

RolandJLevy (1083)

Hi @mwilki7, great work! very cool game 👍

[deleted]

@mwilki7 This game is awesome! Pls join my team bro!

HiPeople844 (19)

I dont get how this works, when i use the arrow keys it moves the screen not the guy

mwilki7 (1134)

@HiPeople844
You will have to click the "Edit Mode" button to get it to transition to Play Mode

ironblockhd (432)

Woah its crazy how much effort went into this

EthanCulp (38)

And I thought the engine I made was good... Lmao