Cell Warz an adventure in HTML5 game development (Part 2)

Cell Warz v2.0
Epic battle ensue as the cells duke it out! (okay its not THAT exciting…)

TLDR: Here is a link to the game / Here is a link to the code

After showing part one of Ship Warz to a friend he recommended that I change it to Cell Warz. The erratic movement of the particles were much more indicative of mindless cells than of ships. So I have officially changed the name.

Continuing my dive into HTML5 & JavaScript game development Cell Warz is much improved since the last post. Here are a couple of feature adds/improvements:

  • Round cells rather than square ‘ships’
  • A currency system for creating cells, called protein
  • Collision detection between enemy cells
  • Health points for cells
  • A ‘flow’ checkbox to influence the cells to move to the enemy side

So far it is coming along pretty well. The code is not very DRY but I will address that further down the line. So far I haven’t used any jQuery and so it is all raw JavaScript with the HTML5 Canvas element. I’d like to start introducing jQuery in the next versions.

Let’s get started some simple stuff for now. I will talk about collision detection among the cells. Collision detection is fairly easy with circular objects. All you need to do is calculate the distance between the center points of each cell and see if the the cell’s radius’ added together are less than the distance. Here is an example from Cell Warz:

//this is a helper function to calculate distance
function calcDistance(x1, x2, y1, y2) {
    return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));

var detectCellCollision = function(){
    for (var cellId in cells) {
            //if it's the current cell
            if (cell != this.id) { 
                //get the distance and store it
                var distance = calcDistance(cells[cellId].x, this.x, cells[cellId].y, this.y); 

                //see if the cells are touching by seeing id distance is less than the radius of both cells combined
                if (distance < this.size + cells[cellId].size) { 
                    //the cells are touching, check to see if they are on the same team or not
                    if (cells[cellId].team != this.team){ 
                        //collision with enemey cell, do damage to eachother
                        cells[cellId].health -= this.getDamage();
                        this.health -= cells[cellId].getDamage();
                    else {
                        //collision with friendly cell, absorb it

As you can see from the above code snippet, it if fairly simple to detect the collisions. All you really need is the:

if (distance < this.size + cells[cellId].size)

I will admit that this way of collision detection will not work for larger scale games. The reason is that currently I am getting each cell to check against every other cell in the game to see if it is touching it. This could be very CPU intensive once the cell counts start getting in the 1,000’s because it will need to calculate exponentially for more and more cells.. I’m following the YAGNI principal right now though. I will develop a more robust system for collision detection when it is needed.

That sums up this post for now. If you’d like an explaination of anything let me know and I will write up a post just for you! 🙂

Here is a link to the game
Here is a link to the code

Leave a Reply

Your email address will not be published. Required fields are marked *