Picking Apart Particle Systems

Particle Systems are interesting. They can be complicated, or very simple, all depending on how much effort you wish to put into it They can look anything like this from Giladlotan, to this from Mr. Speaker . They can be created quite simply with HTML5 and JavaScript using objects. First,create a basic canvas, prepare it for drawing, and have a draw loop set up . If you don't know how to do this, simply Google it, there's plenty of great tutorials. Secondly, you create the object.

function particle(x,y) {
this.x=x;
this.y=y
}

Now we have our basic particle. This will be used several times throughout the code. We then need to create an array to store the information. At the top of your code, insert this: var particles = []; This initializes an empty array of particles. When run, it does nothing special. so let's add some particles to the array.


particles.push(new particle(0,0));
particles.push(new particle(50,50));
particles.push(new particle(100,100));
particles.push(new particle(100,100)); This will still do nothing, this is because we never draw the particles. Let's change the particle code a bit to function properly.


function particle(x,y) {
   this.x=x;
   this.y=y;
   this.draw=function() {

      context.fillRect(this.x,this.y,5,5)

   }
} This is then called by the draw method using the following code:
for(var i=0;i<particles.length;i++) {
    particles[i].draw();
}
Then, you have some dots on the screen. So let's move them. Create an update function in the particle class and call it every update.
this.update=function() {
   this.x+=9.8
               //constant rate of gravity
}
Voila. We have ourselves a very simple particle control system. Add some more, using a while loop, a for loop, or a mousemove event, add a background, and some particle images, and you get something like this:

Simple Galaga Clone

I've been working a lot with html5 and javascript recently, and created a little galaga clone.  Here it is:
(use arrow keys to move and 'X' to shoot)
NEW VERSION!
Changelog:

• Fixed flickering bugs
• Re-added explosions and shrapnel.
• Added new boss on level 100.
• Added a special surprise after level 100(Trust me, It's worth it.)

Known Bugs:

• Boss fights crash the game. Simply refresh the browser to fix this until the next boss. I apologize for the inconvenience, I'm working on it.

Initial Post

Hello, My name is Dylan! I like pizza, coding, and long walks on the beach(just kidding!) This blog will probably be mostly about my coding projects and ideas. I really appreciate all feedback. Feel free to download any of my programs I post(just don't steal them and take credit).