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

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
This entry was posted in Game Programming, Programming and tagged game, game development, HTML5, javascript, pathfinding, programming, real time strategy by Adi. Bookmark the permalink.

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

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.