Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

My Browser Based HTML5 Platformer game (made from scratch)


Recommended Posts

Hi all! Today I'd like to present you a game I've been working on this summer. I haven't had a lot of time so the game is very uncomplete but there also are a lot of things done. First of all, I'd like to quickly introduce the canvas element for those who don't know about it.

>! The HTML canvas element is used to draw graphics, on the fly, via scripting (usually JavaScript). There are some methods for drawing paths, images, squares or cercles, but once you draw something, you can't erase it. This means that if you want some element to move you will have to clear all the canvas and then redraw everything onto it again. Also, there isn't an easy way to create buttons or some things like in VB, for example. You have to program everything, or use some libraries instead.
>! Now, I'm going to explain what's my project about. My project is an HTML5 game created with the canvas element and javascript. I'm newbie at programming and javascript is the first language I've learned. Actually, I'm doing this game as a school final project, and that's why I'm taking it seriously. At the moment, I'm avoiding the use of any library so I'm doing all by myself. I'm sure there are lots of things that could be better done in my codes (and I often have to rewrite some code), but I'm doing it for learning and because I want to have control over every piece of code in my game so I can solve the bugs with no problem. When I finish the game, I'll try to use something like Phonegap or similar to make the game playable in mobile devices, but that's not part of the project.
>! The game is a platformer game. There are levels that you have to pass with the caracter, each level being more difficult. Well, that's what I'm planning to do. At the moment I'm still program the level scene and its logic. The maps are being done similar to eclipse (with an 512x512 image) and the tiles are 16x16\. Tiles can have some attributes, like moving, dissapearing when the player is on them, spikes or some more I'm still coding. I'm also planning on creating simple enemies and simple weapons, and if everything works good bosses will be make too. There will be the option to upgrade the player's attributes such as Acceleration, Max Speed, Jump Speed, Hp… and also the option to change character (each character can have different height and width and different attributes). Well... I think I've talked too much. Here's a video of a test map so you can see what's done. Ignore the annoying video recorder logo that didn't allow me to crop the screen to the game. Also, the graphics are all free graphics obtained from the internet because I'm very bad at that.
>! https://www.youtube.com/watch?v=e-0dvwfFmUw
The video recorded didn't record the audio. Also, I know it's an ugly map. It's just for testing.
I'd appreciate anyone who wants to help me with the graphics of the game (characters, tilesets and UI). Thanks for reading this and suggestions will be accepted!
Link to comment
Share on other sites

  • 1 month later...
Hi! I added some new features. The game level now looks more like a game and I added items (potions,money…) and a little hud. If anyone is interested in helping with the UI and hug graphics just let me know... I'm planing on adding enemies and weapons know, and also some special items like jetpack or things like that. Here's a video if someone is interested in the project.

I've also created a map editor for all my maps. It works pretty good and is easy to use. I might take a video showing it in the future.
The game works on mobile devices with a little twerk but I'll focus on the navigator game before transforming it into a mobile game.
I can also offer little help with HTML5 game programming. Feel free to send me a PM with advice for the game or asking for advice if needed.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...