JS/HTML5 Top-Down Game Engine

[AaronJY]

I started working on a 2D, top-down game engine in JS/HTML5 yesterday evening and I've gotten pretty far with it over the past 24~ hours. I've not programmed a game using JS/HTML5 before however so this whole OO-JavaScript aproach is new to me. Regardless, I feel I'm doing a pretty good job so far (especially with the math -wink-).

I've opted not to use available JS libraries online (other than jQuery of course) so I'm petty much building everything myself. The game utilizes HTML5's canvas element for drawing content on your screen, jQuery's AJAX functions to interact with my web server and PHP for server-side stuff (basically anything I'm unable to do through JavaScript).

What I've currently got:

• Level editor. It can currently load a saved level file up and you can edit it using the tiles given on the tileset panel.
• Tile engine. I'm happy with the way it is right now, but I'm sure I'll end up adding to it in the future. Right now it just holds functions 2 that convert cell positions to tile positions and vice versa and an object for tile groups while will be used later to sort tile ID's into different types.
• Levels. You're able to load a given level stored on the web server and it'll parse the data and draw it on the canvas.
• Tiles.
• Tileset. I'm not on about the tileset image (which currently showcases the peak of my graphic design talent (i.e. it's shit)). It holds an image object for the tileset image and holds several functions that converts tile ID's to different positions and all that.
• Player. The player class isn't done and has hardly been touched, but that's just because I'm not ready to work on it yet.

I hope to add features such as AI, entities, level NPC support and some other bits and bobs soon. I'll keep this thread updated with media showcasing development progress. For now, here's a video of the tile editor I've literally just finished.

Find the src attached.

 

[AaronJY]

Update #1

Made some updates to the level editor. It's not finished yet (and I've managed to spot a couple of bugs while making this update so I've got that to work on now too) but it's getting there.

New features

• Saving levels. You can now save a level using the level editor by clicking "Save Level" in the panel to the right. You'll be prompted with a dialog box asking for a level name, and the level will be saved in the levels folder.
• Changing the size of tiles in the engine doesn't mess up the editor anymore.
• Switching tilesets. You can switch to any tileset that's saved under the tilesets folder.

Known Bugs

• There's something wrong with my (incredibly long) function for converting the position of your mouse relative to the tileset container to a tile ID on the tileset.

 

[AaronJY]

In regards to the issue I'm having with converting tileset co-ordinates to a tile ID, I'm not too sure what's causing the problem. Initially I thought it might have something to do with the position of your mouse relative to the div containing the image, but I'm pretty sure that's not what's causing it.

I'm planning on removing the HTML div container and use a custom method of scrolling so I won't have to deal with converting global mouse co-ordinates to relative co-ordinates.

 

[Yuuki]

You have my respect,i could never program any kind of game.

 

[AaronJY]

Keep doing what you're doing and challenging yourself and you'll get there eventually

 

[AaronJY]

Update #2

Thanks to some help from a friend the tileset functions that were playing up are now working properly. It was down to the math (unsurprisingly) but everything looks good to go now. I'm now going to swiftly work on loading saved levels and then that should be it for the level editor for the time being.