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

Chronos patch v1.2

Loyal beta testers,

I want to first start off by saying THANK YOU so much for taking the time to play/test Chronos. Your feedback has been invaluable to the development of Chronos and I will continue to strive to build the game that YOU want to play.
In an effort to level the playing field I have wiped the database clean, ready for a fresh start. Everyone will start back at level one and you will need to re-create your accounts (sorry! I will try to find a better way of doing this in the future).
Some key features to this patch:
  1. New movement system based off of Fuel/Instant Warp.
    • You will notice a Green/Red bar to the left of your captains portrait that will indicate how much Fuel you currently have.
    • If you have enough fuel to instantly warp to your destination it will use the fuel and you will instantly be teleported to the location. Otherwise it will use all the fuel you can to get you as close as possible and then being the normal travel speed after that (30 seconds per unit)
  2. Scout Probes
    • Right click on a location to bring up the menu and click on “Deploy Scout Probe” this will send out a scout probe for 100 metal that will reveal the surrounding area. These scout probe move much quicker than your fleet (5sec/unit) and reveal a large area surrounding it. You can click on the “Radar Range” button at the bottom left to reveal the borders of your radar (you may have to zoom out to see them)
    • Scout probes only last for 24 hours so be sure to use them wisely
  3. Timers to indicate movement time.
    • These timers will count down to the completion time of the ‘Warp’ for the fleet or the deployment of the scout probe
  4. Several other bug fixes have been rolled up into the patch as well. I will post some specifics on the forums if anyone is interested.
As always, please keep in mind that this is a Beta (perhaps just a late Alpha even) so there are plenty of bugs! Please feel free to email the bugs to me directly or report them on the forums over at www.lukepammant.com/forums. You can also post suggestions/requests here.
Thank you all, once again, for your patience and for taking the time to play Chronos! Now get out there, man your battle stations, and conquer!
Sincerely – your benevolent, magnificent, omnipotent creator of the universe,
Luke

First patch to Chronos

Last night I was up wee hours patching Chronos. I had fixed many bugs, added features, and re-structured some of the base level classes. As with any patching process I tested and tested until I was certain everything would go well. I apparently was mistaken…

When performing the data migration I over looked the fact that on my local development machine I was rebuilding the database every time I made a change. This cause an issue do to the “re-structuring” part that I had mentioned above. Long story short – I had to go through the database and find the missing bits of information that was not accounted for in the migration and fix it myself. I also had to re-link several foreign key relationships.

Lesson to learn here:

  1. Do no count on Entity Framework Code First Migrations for everything. While this tool is amazing it would be worth taking a look into how it works and adding custom code to do the re-linking upon deployment
  2. Deployment late at night can be both a good thing and a bad thing. Good thing is that no one was playing when I broke everything! Bad thing is that I was up late fixing silly mistakes.

 

New features added to Chronos

  1. Player based leader boards
  2. Structures that can deal damage and participate in defense of asteroids/planets
  3. Personal allegiances and enemies
  4. Ship prerequisites. (i.e. You need a level 2 hanger to build a bomber, etc.)
  5. You are limited to the amount of asteroids you can have by your player level. One asteroid per level, one planet per 5 levels.

That sums it up for now. Patch notes can be found on the Chronos Forums. Stay posted for more updates on Chronos!


Chronos Beta is up!

ChronosTitle

Hello everybody! It’s been a very long time since my last post. I have been busy programming a browser base resource management game. Think Clan Wars meets Kings Age meets OGame but in HTML5/JavaScript on the client side and C#/MVC/EntityFramework on the back end.

At long last I have a beta of Chronos up and running!

I mostly took this project on as a personal learning experience since I had recently been promoted in my day job to a developer and honestly didn’t know the first thing about development!

The game has come a long way since my first alpha test and I feel that it is now a playable Beta. I would appreciate any questions/comments/critiques! There is a lot more that I would like to do with it but the first thing that needs to be done is to make it FUN! Please feel free to post on the Chronos Forums. I will be updating the forums regularly with bug fixes and features. I will also make an attempt to update this blog seeing as how Chronos is basically my life outside of work.

You can sign up and play the Chronos Beta at http://chronos.vitalsigns.biz.


Some music that I’ve come to love lately

I just sent my dad this email and I figured I’d share with the world some of my favorite music right now!

First and foremost – If you have not heard Korn (ft. Skrillex) – Narcissistic Cannibal you need to do that first! Such a great song! Korn and Skrillex are both such talented artists and when they come together they are amazing.

Pretty Lights – I Can See It In Your Face  – I cant help but want to dance to this one at about 2:30 into it! (Pretty Lights is a Colorado band I think)
Pretty Lights – Finally Moving - this one takes some popular riffs and segments of popular songs – great chill beat though
The Glitch Mob – A Dream Within A Dream - i LOVE The Glitch Mob, I had to pick only a few of their songs but these 3 are my favorites.
The Glitch Mob – Fortune Days
The Glitch Mob – We Can Make The World Stop
If you like those 3 you could try Animus Vox, Bad Wings, We Swarm, and Starve the ego feel the soul by The Glitch Mob

On a more rock note there are these songs which are pretty catchy that i think you’d like:
Volbeat – Still Counting - great beat and pretty funny :)
Halestorm – I Miss The Misery – Great beat, the girls like it too


Planetside 2 anyone?

What is Planetside 2? It is an MMOFPS (massively multilayer online first person shooter). I’m sure you’ve heard of World of Warcraft. Well take the amount of people playing in one server on there and put them in a futuristic FPS and you have PS2! Its a lot like a futuristic Battlefield 3 on steroids. Better yet – Its FREE! Free to download and Free to play! You can choose to pay a monthly fee if you want some nifty exp boosts. Or you can buy Station Cash to exchange for weapons in game. But by no means do you need to do so. Anything available to a paying player will be available to the hard working free player.

You have 3 races duking it out on 3 different continents trying to gain territory in a tug-of-war style land grab. Personally I’ve fallen in love with the Vanu Sovereignty. Their no-bullet drop on sniper rifles is amazing. Upgrade to the one head-shot kill V10 and you have yourself a deadly sniper!

There are 5 different classes, 3 different types of air vehicles and 4 different land vehicles. Each race also has a unique vehicle.

My favorite part thus far is flying. I’ve pimped out my Scythe and gotten some upgrades. The Light PPA with night vision will demolish any infantry on the screen. Night vision makes them stick out like a sore thumb. Nothing can escape. Check out some quick gameplay I recorded the other night:

 

I’ve been playing Planetside 2 during the closed beta and  I gotta say that its come a long ways! My buddy and I used to play the first Planetside way back in the day but it was laggy and once they started releasing expansion packs for it it really went down hill.

If you haven’t had a chance to check out Planetside yet I highly suggest you do!

www.planetside2.com

If you DO choose to play you can find me owning the skies on the server Genudine. Send me a friend request – my name is LukeP.

 


Welcome

Hello and welcome to my blog. If you are here you most likely know me, or want to know who I am. Well, if the later is the case then you are in the right place. I will strive to keep this blog updated with my personal achievements general progress reports.