IoT-Gadgets-Logo-272-90

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

By
Ash
 - 
Nov 28, 2011

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

IoT-Gadgets-Logo-272-90

About us

IoT Gadgets is dedicated to bring you all the Internet of Things IoT news that pertains to gadgets. Simple. We love for you to join us on this journey.

Contact us: [email protected]

FOLLOW US

crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram