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
                        this.absorbCell(cells[cellId]);
                    }
                }
            }           
        }
}

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


Ship Warz an adventure in HTML5 game development (Part 1)

ShipWarz V1.0
After 15 minutes of waiting… one “ship” finally made it over to the other side!

After passing my Microsoft Exam 70-480 (HTML5, CSS, JavaScript) I decided to dabble around a bit more with JavaScript the new canvas HTML5 element.

I have always wanted to create a space battle particle simulation using PFlow in 3d Studio Max when I was in college but I’d never gotten around to it. I figured that I could go ahead and create something similar with HTML5 canvas. After following this brilliant tutorial on particles in canvas with JavaScript I decided to extend my new found knowledge!

Thus, without further ado, I present to you, a simple particle system that make red and green squares that jiggle around randomly. They also make explosions if they hit the side wall… no, they don’t battle each other… yet!

Click here for Ship Warz V1.0
Click here for the code in JSFiddle

Future plans are:

  1. Create collision detection so they can engage in epic battles!
  2. Add variants of ship types
  3. Add an objective
  4. Anything else people think would be fun