Command and Conquer – Programming an RTS game in HTML5 and Javascript

After writing my first HTML5 game I decided to take on a more challenging project.
My latest project is a recreation of the original Command and Conquer entirely in HTML5 and Javascript.
Command and Conquer is the grand-daddy of all Real Time Strategy games and is probably the game that made the genre popular. My friends and I spent countless hours playing the original as well as subsequent sequels (Tiberian Sun, Red Alert).
Check out the demo video.

You can play the actual game here. Command and Conquer – HTML5 version
This project was a lot more challenging than my previous game, Breakout. In hindsight, I might have wanted to take smaller steps and make a tower defense game instead of jumping directly into an RTS.
Creating even this simple version of the game covered a lot of things.

1. Using images to recreate the sidebar and game interface
2. Using mouse input for unit selection, panning, attacking and user input
3. Using images as sprites for unit and building animation
4. A lot more sounds for units and buildings
5. Using a finite state machine for handling unit commands, movement, attacking etc.
6. Using path finding (A*) to navigate around obstructions like buildings, mountains and trees
7. Using hidden canvas’s for things like fog of war and image manipulation

Obviously because of the size of the project, trying to do the whole thing in under a month all by myself wasn’t the smartest idea. I ended up spending lots of 18 hour work days during this time.
The project is far from complete and there is still some polishing up to do. However, since the underlying engine has been designed to use ‘units’, ‘buildings’, and ‘levels’, expanding the game and creating tons of levels and adding all the vehicles should be fairly simple.
Please do check out the demo and let me know what you think. Command and Conquer – HTML5 version. Any comments, feedback (including bugs), is appreciated.

Check out the demo here. Switch on “DEBUG MODE” to see how it works. This is still a work in progress. Any comments or feedback (including bugs), is appreciated.
Check out some of the HTML5 games I have written. If you are just starting out with game programming, check out my earlier tutorial on developing a simple Breakout game in HTML5.
Related articles:

1. Javascript Game Development with HTML5 Canvas – Breakout released
2. HTML5 Game Development Tutorial: Breakout Part III – Collisions, Scoring and Sound
3. HTML5 Game Development Tutorial: Breakout Part I – Introduction to Canvas

If you liked reading this, please click on the Like button below and share it with your friends. Also, if you have any feedback or questions, please leave me a comment below. I’d really appreciate it.
 
Source Aditya Ravi Shankar