I need to complete an asteroids game clone and complete it with realistic movement, gravity and collision detection checks.

Most of code is created (see below). Use p5.js libraries, Javascript, VS code with Brackets extension. I am providing steps that needs be completed and in code will it indicate where the code needs be added.

I have included the following code: bulletSystem.js, spaceship.js, sketch.js, asteroidSystem.js, index.html.

THANK you!

ps - unfortunately cannot attach gif file

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

bulletSystem.js

>>>>>>>>>>>>

class BulletSystem {

constructor(){

this.bullets = [];

this.velocity = new createVector(0, -5);

this.diam = 10;

}

run(){

this.move();

this.draw();

this.edges();

}

fire(x, y){

this.bullets.push(createVector(x,y));

}

//draws all bullets

draw(){

fill(255);

for (var i=0; i

ellipse(this.bullets[i].x, this.bullets[i].y, this.diam, this.diam);

}

}

//updates the location of all bullets

move(){

for (var i=0; i

this.bullets[i].y += this.velocity.y;

}

}

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

spaceShip.js

>>>>>>>>>>>>>

class Spaceship {

constructor(){

this.velocity = new createVector(0, 0);

this.location = new createVector(width/2, height/2);

this.acceleration = new createVector(0, 0);

this.maxVelocity = 5;

this.bulletSys = new BulletSystem();

this.size = 50;

}

run(){

this.bulletSys.run();

this.draw();

this.move();

this.edges();

this.interaction();

}

draw(){

fill(125);

triangle(this.location.x - this.size/2, this.location.y + this.size/2,

this.location.x + this.size/2, this.location.y + this.size/2,

this.location.x, this.location.y - this.size/2);

}

move(){

// YOUR CODE HERE (4 lines)

}

applyForce(f){

this.acceleration.add(f);

}

interaction(){

if (keyIsDown(LEFT_ARROW)){

this.applyForce(createVector(-0.1, 0));

}

if (keyIsDown(RIGHT_ARROW)){

// YOUR CODE HERE (1 line)

}

if (keyIsDown(UP_ARROW)){

// YOUR CODE HERE (1 line)

}

if (keyIsDown(DOWN_ARROW)){

// YOUR CODE HERE (1 line)

}

}

fire(){

this.bulletSys.fire(this.location.x, this.location.y);

}

edges(){

if (this.location.x

else if (this.location.x>width) this.location.x = 0;

else if (this.location.y

else if (this.location.y>height) this.location.y = 0;

}

setNearEarth(){

//YOUR CODE HERE (6 lines approx)

}

}

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

sketch.js

>>>>>>>

var spaceship;

var asteroids;

var atmosphereLoc;

var atmosphereSize;

var earthLoc;

var earthSize;

var starLocs = [];

//////////////////////////////////////////////////

function setup() {

createCanvas(1200,800);

spaceship = new Spaceship();

asteroids = new AsteroidSystem();

//location and size of earth and its atmosphere

atmosphereLoc = new createVector(width/2, height*2.9);

atmosphereSize = new createVector(width*3, width*3);

earthLoc = new createVector(width/2, height*3.1);

earthSize = new createVector(width*3, width*3);

}

//////////////////////////////////////////////////

function draw() {

background(0);

sky();

spaceship.run();

asteroids.run();

drawEarth();

checkCollisions(spaceship, asteroids); // function that checks collision between various elements

}

//////////////////////////////////////////////////

//draws earth and atmosphere

function drawEarth(){

noStroke();

//draw atmosphere

fill(0,0,255, 50);

ellipse(atmosphereLoc.x, atmosphereLoc.y, atmosphereSize.x, atmosphereSize.y);

//draw earth

fill(100,255);

ellipse(earthLoc.x, earthLoc.y, earthSize.x, earthSize.y);

}

//////////////////////////////////////////////////

//checks collisions between all types of bodies

function checkCollisions(spaceship, asteroids){

//spaceship-2-asteroid collisions

//YOUR CODE HERE (2-3 lines approx)

//asteroid-2-earth collisions

//YOUR CODE HERE (2-3 lines approx)

//spaceship-2-earth

//YOUR CODE HERE (1-2 lines approx)

//spaceship-2-atmosphere

//YOUR CODE HERE (1-2 lines approx)

//bullet collisions

//YOUR CODE HERE (3-4 lines approx)

}

//////////////////////////////////////////////////

//helper function checking if there's collision between object A and object B

function isInside(locA, sizeA, locB, sizeB){

// YOUR CODE HERE (3-5 lines approx)

}

//////////////////////////////////////////////////

function keyPressed(){

if (keyIsPressed && keyCode === 32){ // if spacebar is pressed, fire!

spaceship.fire();

}

}

//////////////////////////////////////////////////

// function that ends the game by stopping the loops and displaying "Game Over"

function gameOver(){

fill(255);

textSize(80);

textAlign(CENTER);

text("GAME OVER", width/2, height/2)

noLoop();

}

//////////////////////////////////////////////////

// function that creates a star lit sky

function sky(){

push();

while (starLocs.length

starLocs.push(new createVector(random(width), random(height)));

}

fill(255);

for (var i=0; i

rect(starLocs[i].x, starLocs[i].y,2,2);

}

if (random(1)

pop();

}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

asteroidSystem.js

>>>>>>>>>>>>>>>

class AsteroidSystem {

//creates arrays to store each asteroid's data

constructor(){

this.locations = [];

this.velocities = [];

this.accelerations = [];

this.diams = [];

}

run(){

this.spawn();

this.move();

this.draw();

}

// spawns asteroid at random intervals

spawn(){

if (random(1)

this.accelerations.push(new createVector(0,random(0.1,1)));

this.velocities.push(new createVector(0, 0));

this.locations.push(new createVector(random(width), 0));

this.diams.push(random(30,50));

}

}

//moves all asteroids

move(){

for (var i=0; i

this.velocities[i].add(this.accelerations[i]);

this.locations[i].add(this.velocities[i]);

this.accelerations[i].mult(0);

}

}

applyForce(f){

for (var i=0; i

this.accelerations[i].add(f);

}

}

//draws all asteroids

draw(){

noStroke();

fill(200);

for (var i=0; i

ellipse(this.locations[i].x, this.locations[i].y, this.diams[i], this.diams[i]);

}

}

//function that calculates effect of gravity on each asteroid and accelerates it

calcGravity(centerOfMass){

for (var i=0; i

var gravity = p5.Vector.sub(centerOfMass, this.locations[i]);

gravity.normalize();

gravity.mult(.001);

this.applyForce(gravity);

}

}

//destroys all data associated with each asteroid

destroy(index){

this.locations.splice(index,1);

this.velocities.splice(index,1);

this.accelerations.splice(index,1);

this.diams.splice(index,1);

}

}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

index.html

>>>>>>>>>>>