Javascript Game Engine with CSS


Download to try the demo version at: here.

Here is the link to a review site covering HTML5 games:

This is a free game engine developed for programming browser based games.  It uses the Javascript  and CSS (Cascading Style Sheets) to dress up the page.  They run pretty reliably together.  Use this engine to create your own game.  This project is intended for beginners, wanting to learn how to program video games.  Better if you're a web designer that knows some CSS.

CSSGAMEENGINE is being developed at:

Visit for latest releases and more graphics.

CSS/Javascript Game engine.  Upload the folder to your webspace and open index.html
Or unzip and open index.html

"q" for backflip
"w" for jump
"e" for jump forward
"a" backpedal
"d" walk
"z" block

"g" soft punch
"h" hard punch
"b" soft kick
"n" hard kick

Attacks can be performed in air.

The only target is Juggernaut for now.
Check back for updates.

This game engine was developed with my intent to demonstrate multi-threading simulation using Javascript.
To demonstrate how one thread can lock another thread, block Juggernaut's punch by pressing z right before he strikes.  Juggernaut's grey appearance was put in intentionally to show that the thread is put to sleep while an instance() function is invoked to carry out additional algorithm before the thread wakes up.

One aspect of game programming is control over animation.  This engine uses threads for animation by looping through frames, each frame being a single thread of execution, enabling us to have more control over animation.  Therefore we can coordinating two entities running independently by locking both or either of them by their id's.  For example, a character can block a punch from another character, which "locks" in place independent frames from two mutual entities running concurrently in their own time zones, by using their thread id's. There we can invoke instance() function to inject additional algorithm before having the two halted threads (or the entire game) to proceed.  That's the general idea of programming a game with this CSSGAMEENGINE.

Javascript is event driven so you can program images to move across the screen just by changing the coordinates in css, x and y and the browser will do this for us. On our part we're just basically changing the CSS stuff like top:1px; and left:1px; with position:absolute;
That's how it's done mainly, but this engine coordinates threaded animation frames along with the speed of coordinates changing.

Take a look at the frame sequence of Juggernaut punching...

It's actually one large image in gif format, 2313 pixels wide.  Each frame is exactly 257 pixels wide. So adding 9 of them side by side in sequence comes to 2313 pixels wide in total.

Background and foreground and character overlaps are managed by setting z-index.

Still being developed further is the thread management of this engine so that the game will be more responsive to keyboard or any other device input.

Programming games with this engine is still at an experimental stage, however there is good result.  

CSSGAMEENGINE is free software, you may download and modify it for your need as long as the code retains credits to me.  Thanks!

All Marvel characters are property of Marvel.