JCGE — A Vanilla JS 2D Game Engine, 5 Years in the Making…
0 reactions
JCGE — A Vanilla JS 2D Game Engine, 5 Years in the Making
I started building JCGE about 5 years ago as a lightweight 2D game engine using nothing but vanilla JavaScript and HTML5 Canvas — no frameworks, no bundlers, no dependencies. Just a single `<script>` tag and you're running. I updated it significantly around 3 years ago, adding features like tweens, particle systems, isometric maps with A\* pathfinding, collision helpers, a camera system with shake and zoom, and more. But life got the better of me and I never found the time to fully complete it.
Recently I picked it back up, modernized the codebase, and added a visual editor built with Vite, React, and Electron. The editor lets you visually compose scenes, manage layers, place game objects, configure cameras, paint isometric tilemaps, and export playable games — all without writing boilerplate.
One thing I want to highlight: the engine is intentionally **not rigid**. If you look at the demo examples, some of them use the engine's built-in systems (scenes, game objects, sprites, particles, tweens), while others drop down to raw canvas `ctx` calls — drawing shapes, gradients, and custom visuals directly alongside engine features. The cutscene demo, for instance, renders procedural skies, animated stars, and mountain silhouettes using plain `ctx.beginPath()` / `ctx.fillRect()` calls, while still leveraging the engine's scene lifecycle, easing functions, and game loop. The tower defense and shooter demos do the same — mixing engine abstractions with raw canvas where it makes sense. That's by design. The engine gives you structure when you want it, but never locks you out of the canvas.
It's not a finished product and probably never will be "done," but it's fully functional, tested (273 unit tests across engine and editor), and hopefully useful to anyone who wants a simple, hackable 2D engine without the overhead of a full framework.
Docs & demos: https://slient-commit.github.io/js-canvas-game-engine/
#js #technology #programming #dev
I started building JCGE about 5 years ago as a lightweight 2D game engine using nothing but vanilla JavaScript and HTML5 Canvas — no frameworks, no bundlers, no dependencies. Just a single `<script>` tag and you're running. I updated it significantly around 3 years ago, adding features like tweens, particle systems, isometric maps with A\* pathfinding, collision helpers, a camera system with shake and zoom, and more. But life got the better of me and I never found the time to fully complete it.
Recently I picked it back up, modernized the codebase, and added a visual editor built with Vite, React, and Electron. The editor lets you visually compose scenes, manage layers, place game objects, configure cameras, paint isometric tilemaps, and export playable games — all without writing boilerplate.
One thing I want to highlight: the engine is intentionally **not rigid**. If you look at the demo examples, some of them use the engine's built-in systems (scenes, game objects, sprites, particles, tweens), while others drop down to raw canvas `ctx` calls — drawing shapes, gradients, and custom visuals directly alongside engine features. The cutscene demo, for instance, renders procedural skies, animated stars, and mountain silhouettes using plain `ctx.beginPath()` / `ctx.fillRect()` calls, while still leveraging the engine's scene lifecycle, easing functions, and game loop. The tower defense and shooter demos do the same — mixing engine abstractions with raw canvas where it makes sense. That's by design. The engine gives you structure when you want it, but never locks you out of the canvas.
It's not a finished product and probably never will be "done," but it's fully functional, tested (273 unit tests across engine and editor), and hopefully useful to anyone who wants a simple, hackable 2D engine without the overhead of a full framework.
Docs & demos: https://slient-commit.github.io/js-canvas-game-engine/
#js #technology #programming #dev
| 1,000 mlx | |
| 1 | |
| 0 |