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.
- Using images to recreate the sidebar and game interface.
- Using mouse input for unit selection, panning, attacking and user input
- Using images as sprites for unit and building animation, and using sprite sheets for better performance
- A lot more sounds for units and buildings
- Using a finite state machine for handling unit commands, movement, attacking etc.
- Using path finding (A*) to navigate around obstructions like buildings, mountains and trees
- 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.
I used to switch between playing the original Tiberian Dawn in a Wine window on my Mac and my JS version on the browser to make sure my version looked EXACTLY like the original. I spent a LOT of time going through C&C forums to understand how to reverse engineer the Tiberium Dawn files to extract the building/unit sprites and audio and reading up on unit specs to figure out how to make the units behave exactly like the original.
Every little thing took time – things like selecting single units, multiple units, being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; Figuring out a decent fog of war implementation; Allowing for building construction, dependencies (Power Plant needed for Refinery, which is needed for Factory), building placement (buildings cannot be constructed on top of other buildings); Depth sorting when drawing so units could move behind buildings and trees.
The next big headache was smooth unit movement. I wanted to do better than the original game, and spent a lot of time going through Starcraft 2 videos to see if I could get a smoother movement closer to the way SC2 handles it. Pathfinding using A* can do some of the work, but gives a clunky movement and causes units to take behave badly/take longer routes when going through bottle necks. I decided to mix A* with a repelling force/steering behavior to improve it. It still has some bugs I need to work out.
I had to fine tune the way units behaved (during patrolling, guarding, attacking). Even the fact that a MCV couldn’t attack and turned into buildings.
Harvesting was a whole different pain in the ass since my collision detection and steering code meant my harvester was initially afraid to return to the refinery 
.
While a lot of people have been giving me props for just getting this project out, one of the things that I am proud of is that I completed the first version in around 3 and a half weeks, all by myself.
For people who have been criticizing this project, I’ll say this – “I did this, entirely on my own, unpaid, in three and a half weeks – including one week where I had a fever. Give me a break. It isn’t that bad ”.
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.
NOTE: This game has got a lot of attention from online media and FB/Twitter/Google+. The extra traffic brought my server down on its knees and got my account temporarily suspended. This forced me to optimize the game using sprite sheets so it could handle requests more efficiently. You can read more about the whole story here – HTML5 Game Development: Using sprite sheets for better performance (and protecting your server)
After lots of feedback, I’ve specifically researched and worked on improving the pathfinding of the game. Check out the Pathfinding, Collision Detection & Steering Demo. This is a demonstration of the improved unit pathfinding and movement/steering strategies used in RTS games. Units use A* to plot a path and avoid collision using a ‘soft collision’ radius. They also ask static units to move aside.
Here is a video demonstrating all the features of the new pathfinding code.
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.
—–
Command and Conquer – Source Code Released
Command And Conquer on Github
This code started out as a simple fun project. I learned a lot while doing this. And I think it was a cool proof of concept…
But it can be so much more. It can be a complete game, with better AI, multiplayer, better optimized code, and structured so people can contribute more easily- coders add code, level designers design levels…. Instead of one person trying to do everything – badly .
It would mean completely rewriting some of my crappy code (that I don’t think I can even look at any more – like pathfinding, level handling, using sprite sheets) and maybe designing with the bigger vision in mind.
I don’t think I have the courage or energy to try to do that on my own. But I think if a few of us got together, we could do something really cool with this.
For now… Here is the code.. Be gentle… I wrote the code in under a month, working 18 hour days, with a fever during a week in between. (Yes… that’s my excuse anytime you look at the code and go WTF????)
After taking a look, if you still want to work together, let me know…