DOM-based RTS Engine

2008-08-01

A Command and Conquer engine in JS

Update Nov. 2011:

Aditya Ravi Shankar created a version that uses canvas blitting instead of DOM manipulation.

Your unfinished C&C demo inspired me to give it a shot. My version uses HTML5/Canvas and works in Chrome/Firefox.

  1. http://www.adityaravishankar.com/projects/games/command-and-conquer/

  2. http://www.adityaravishankar.com/2011/11/command-and-conquer-programming-an-rts-game-in-html5-and-javascript/


This was a very ambitious project to fully recreate the first C&C game and introduce in-game objects for expansion by user scripting. I envisioned an SDK type end-result as the final piece. The sparks flew in late 2007 and main implementation had begun by the time summer 2008 hit.

There were a multitude of intermediate problems that needed to be solved: question of creating / converting terrain maps, accurately modelling the damage and movement of units in the original game, extracting all the frames of all the game pieces, and handling animations, to name a few.

Prior to the wide-spread adoption of the canvas tag, the most efficient way of manipulating hordes of sprites required for an RTS game was via the DOM image elements. Development stopped after about a week of intensive coding. As the first moderately large Javascript project, I felt the brunt of ill-planning and subsequently burnt out.

This is what I eventually had working before burning out:

- Terrain blocks construction and movement of vehicles
- Mobile construction vehicle unit / all non-turreted vehicles
- Construction tech-tree prerequisites
- Usable nuclear super-weapon
- Structural damage and destruction
- Unit and building selection, with healthbar
- Basic construction interface
- Fire and smoke animations

The Game Engine

Click inside the iframe to interact with the engine.