CM2030 Graphics Programming

Asteroids Clone

Play Asteroid Clone

Continue to supporting documentation

The Brief

The goal of this application was to explore the concept of applying physical properties such as, gravity and acceleration to an animation. By implementing simple physics functions, and applying them to elements within the game, a basic physics engine was created. This allowed objects within the game to respond more realistically. For example, the ship continues to move in any direction once started. This is like the effect that a lack of friction in space causes. Applying these force responses to actions, creates for a more enjoyable playing experience as it adds to the illusions built by the game. This project was one part of four that served as the midterm submission for CM2030 Graphics Programming.

The experience

The user's goal in the Asteroids clone is to survive as long as possible. The user controls a ship and tries to destroy all the falling asteroids before they hit the planet. Control of the ship's movement is done by pressing the directional arrow keys, and firing the weapon systems by pressing spacebar. If the ship touches an asteroid or the planet surface, the game ends and must be restarted.

Building Blocks

There were four main components developed which were essential for this game to function:

1. Collision detection
2. Bullet management
3. Asteroid management
4. Ship management

	
		//helper function checking if there's collision between object A and object B
		function isInside(locA, sizeA, locB, sizeB){
			if(dist(locA.x, locA.y, locB.x, locB.y) < ((sizeA/2)+(sizeB/2))) 
			{
				return true;
			}
			else 
			{
				return false;
			}
		}
	

In addition to collisions, movement of asteroids and the players ship was fundamental to the game overall. For the player to have the sensation that the ship was realistically travelling in space, force vectors were applied in an additive fashion to the ship. This meant that the ship accelerated from zero to max speed and conversely decelerated at a steady pace. It also meant that the ship maintained speed and direction as if the ship was truly exposed to the lack of friction in space.

	
		//addativly applys the current force vectors to the ship
		move(){
			this.velocity.add(this.acceleration);
			this.location.add(this.velocity);
			this.acceleration.mult(0);
			this.velocity.limit(this.maxVelocity);
		}
		//called to apply the new acceleration added
		applyForce(f){
			this.acceleration.add(f);
		}
		//applys the acceleration vector in the direction pressed by the player
		interaction(){
			if (keyIsDown(LEFT_ARROW)){
			  this.applyForce(createVector(-0.1, 0));
			}
			if (keyIsDown(RIGHT_ARROW)){
			  this.applyForce(createVector(0.1, 0));
			}
			if (keyIsDown(UP_ARROW)){
			  this.applyForce(createVector(0, -0.1));
			}
			if (keyIsDown(DOWN_ARROW)){
			  this.applyForce(createVector(0, 0.1));
			}
		}
	

	
		//applys the planets gravity and friction to the ship
		setNearEarth(){
			this.gravity = createVector(0,0.05);
			this.acceleration.add(this.gravity);
		
			//applys friction as a subtractive force of the ships current velocity
			this.friction = this.velocity.copy();
			this.friction.mult(-1);
			this.friction.normalize();
			this.friction.mult(0.03);
			this.acceleration.add(this.friction);
			
		}
	

	
		//function that calculates effect of gravity on each asteroid and accelerates it
		calcGravity(centerOfMass)
		{
			//iterates the array of asteroids
			for (var i=0; i < this.locations.length; i++)
			{
				var gravity = p5.Vector.sub(centerOfMass, this.locations[i]);
				gravity.normalize();
				gravity.mult(.001);
				this.applyForce(gravity);
			}
		}
	

The subtle additions that applied force vectors created, were far more compelling for generating motion, then other forms of motion generation.

Tech Stack

JavaScript

Core programming language used in desiging this application.

p5.js

JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else.

HTML 5

HTML 5 is the standard markup language for documents designed to be displayed in a web browser.

CSS 3

Style sheet language for describing the presentation of documents written in HTML.

User Interaction

The user interacts with the experience, by controlling the ships direction with the arrow keys, and firing its gun system to destroy asteroids with the spacebar. This continues until an asteroid collides with the planet, or the player crashes.

Conclusion

This application was effective at showcasing the value of applying physical forces to game elements and animations. It made for compelling game play by adding interesting challenges, despite the simplicity of the games rules. This project was the second of four worked on as the midterm submission for the mandatory course Graphics Programming.