HTML + Javascript for (non-HTML) game’s level editor and why you should give it a try.

For my upcoming casual puzzle game Achtzehn I need an external level editor. It should mostly be operated by myself and maybe a second, chosen person – so it doesn’t need to be fancy or even beautiful. It just has to work, without much hassle.

Normally, I would choose the language of my game’s framework, i.e. C++ or Python. But for Achtzehn, it doesn’t have to be that complex. I just need to be able to place some blocks, define the grid and travel through time 🙂 Yeah… that think about time I just told you – it’s simple. To create logical and solvable puzzles, I need to be able to simulate every step of the game’s main algorithm accordingly. Effectively what the game itself does, but in a manual, step-by-step manner. So basically, the main script needs to be converted into the language I choose for my level editor. But as the script is pretty straightforward and simple, it’s no problem to do. So there’s basically no need for a specific programming language or tool / framework to implement the level editor. That being said plus the simplicity of my needs, I decided to go for building the whole editor using HTML5 and plain Javascript. No frameworks. Just good ol’ vanilla JS.

Why HTML and Javascript makes sense

While you’d normally expect things like HTML and Javascript to be used somewhere within browsers and websites or webapps, it totally makes sense to lift up the thoughts a bit and reconsider the way we think about our tools and programming languages. Every programming language is just a tool in your huge box, waiting to be used within the right context. HTML was made for structuring documents in the WWW – of course – but that doesn’t mean it’s restricted to that. I always think of applications and use cases. So, why not use the tools that work for you and your project?

Documents written in HTML are generally viewed through a web browser. And everything inside the document is rendered by the web browser. Meaning, no struggle setting up your own renderer. No need to deal with viewports, platforms, architectures etc. Because that’s all the browsers work. And the browser’s very talented in displaying things, like images, buttons and forms. Basically everything the level editor’s gonna need. Using some basic CSS we can transform the HTML document into a vivid, cross-plattform GUI application with elements like buttons, sliders, input fields. Without even touching a framework or drawing library.

What does it look like?

First steps with the HTML and JS level editor for Achtzehn

You’re able to define the grid size, place some blocks and items and simulate the game’s algorithm. All that in under 400 lines of Javascript. To be honest it’s not the best looking or most elegant level editor, but it does it’s job and was made quickly.