I need to complete an angry birds clone game. Cannot include gif, however included some pictures to try and demonstrate behavior that code needs to output.

Javascript, using p5,js libraries (matter.js, p5.min.js, p5.sound.min.js), VS Code with brackets extension.

3 objects need be created - propeller system, tower of boxes and a slingshot

1. Creating a propeller system

Step 1: Amend the setupPropeller() function in physics.js to setup a static body of type rectangle at location (150, 480) of size (200, 15), similar to how the ground is created. Use the global variable propeller for this. The initial angle is equal to the global variable angle which we provided. Add the propeller to the world.

Step 2: In the drawPropeller() function set the angle of the propeller equal to the global variable angle. Set the angular velocity equal to the global variable angleSpeed already provided for you. Update the variable angle by angleSpeed. This will make sure the propeller actually moves at a rate of angleSpeed between frames. Draw the propeller using the drawVertices() helper function just like in the drawGround() function. In sketch.js, amend the keyPressed() function so that when the left arrow is pressed, the angle speed is incremented by 0.01. Do the opposite when the right arrow is pressed. If youve done things right when you start your sketch you should be able to control the propeller on screen using the left and right arrows.

Step 3: When b is pressed a bird is created wherever the mouse is by calling the setupBird() function. Study that function. At the moment the program does not draw birds. Amend the drawBirds() function to loop over the birds array and draw them using the drawVertices() helper function. Use the isOffScreen() function to check if the bird has left the screen and, if it has, remove it from the physics world using the removeFromWorld() helper function provided and from the array. Remember to also decrement your for-loop counter in order not to break your code! Pressing b should now create a new bird where the mouse is which flies away upon impact with the moving propeller.

2. Creating a tower of boxes

Step 4: Amend the setupTower() function to create a tower of boxes as shown in the picture above. Tower should be six boxes high, three boxes wide. Each box should be of size 80x80 pixels. (Hint: Create a nested for loop and push bodies of type rectangle on the boxes array provided). Also push a random shades of green onto the colors array. Well use those colors to draw the boxes later. Remember to add the boxes to the world.

Step 5: In the drawTower() function loop over the boxes array and draw each box using the drawVertices() helper function. Remember to use the random colors you created inside the colors array. You should now see a tower of boxes in different shades of green like in the image above.

3. Creating a slingshot

Step 6: Amend the setupSlingshot() function to initialise the global variable slingshotBird as a body of type circle in a similar place as shown in the image above. Give the circle zero friction and a restitution of 0.95. Set the mass of the slingshotBird as ten times its original mass, just like we have done for each of the birds in the setupBird() function.

Initialise also the global variable slingshotConstraint as a constraint that behaves and looks like the one shown above. Give it a stiffness of 0.01 and damping of 0.0001.

Remember to add both the bird and the constraint to the world and make sure they appear where they are in the image above.

Step 7: Amend the drawSlingshot() function and use the drawVertices() and drawConstraint() helper functions to draw the slingshot bird and slingshot constraint. If youve done things right you should now be able to control the slingshot with the mouse. Drag to extend, release mouse to release bird. Pressing r resets the slingshot.

Question:

2 files are provided - sketch.js and physics.js. Please assist with outstanding code - you will see in files below where code is requested

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

sketch.js

>>>>>>>

// Example is based on examples from: http://brm.io/matter-js/, https://github.com/shiffman/p5-matter

// add also Benedict Gross credit

var Engine = Matter.Engine;

var Render = Matter.Render;

var World = Matter.World;

var Bodies = Matter.Bodies;

var Body = Matter.Body;

var Constraint = Matter.Constraint;

var Mouse = Matter.Mouse;

var MouseConstraint = Matter.MouseConstraint;

var engine;

var propeller;

var boxes = [];

var birds = [];

var colors = [];

var ground;

var slingshotBird, slingshotConstraint;

var angle=0;

var angleSpeed=0;

var canvas;

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

function setup() {

canvas = createCanvas(1000, 600);

engine = Engine.create(); // create an engine

setupGround();

setupPropeller();

setupTower();

setupSlingshot();

setupMouseInteraction();

}

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

function draw() {

background(0);

Engine.update(engine);

drawGround();

drawPropeller();

drawTower();

drawBirds();

drawSlingshot();

}

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

//use arrow keys to control propeller

function keyPressed(){

if (keyCode == LEFT_ARROW){

//your code here

}

else if (keyCode == RIGHT_ARROW){

//your code here

}

}

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

function keyTyped(){

//if 'b' create a new bird to use with propeller

if (key==='b'){

setupBird();

}

//if 'r' reset the slingshot

if (key==='r'){

removeFromWorld(slingshotBird);

removeFromWorld(slingshotConstraint);

setupSlingshot();

}

}

//**********************************************************************

// HELPER FUNCTIONS - DO NOT WRITE BELOW THIS line

//**********************************************************************

//if mouse is released destroy slingshot constraint so that

//slingshot bird can fly off

function mouseReleased(){

setTimeout(() => {

slingshotConstraint.bodyB = null;

slingshotConstraint.pointA = { x: 0, y: 0 };

}, 100);

}

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

//tells you if a body is off-screen

function isOffScreen(body){

var pos = body.position;

return (pos.y > height || pos.xwidth);

}

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

//removes a body from the physics world

function removeFromWorld(body) {

World.remove(engine.world, body);

}

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

function drawVertices(vertices) {

beginShape();

for (var i = 0; i

vertex(vertices[i].x, vertices[i].y);

}

endShape(CLOSE);

}

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

function drawConstraint(constraint) {

push();

var offsetA = constraint.pointA;

var posA = {x:0, y:0};

if (constraint.bodyA) {

posA = constraint.bodyA.position;

}

var offsetB = constraint.pointB;

var posB = {x:0, y:0};

if (constraint.bodyB) {

posB = constraint.bodyB.position;

}

strokeWeight(5);

stroke(255);

line(

posA.x + offsetA.x,

posA.y + offsetA.y,

posB.x + offsetB.x,

posB.y + offsetB.y

);

pop();

}

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

physics.js

>>>>>>>>

function setupGround(){

ground = Bodies.rectangle(500, 600, 1000, 40, {

isStatic: true, angle: 0

});

World.add(engine.world, [ground]);

}

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

function drawGround(){

push();

fill(128);

drawVertices(ground.vertices);

pop();

}

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

function setupPropeller(){

// your code here

}

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

//updates and draws the propeller

function drawPropeller(){

push();

// your code here

pop();

}

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

function setupBird(){

var bird = Bodies.circle(mouseX, mouseY, 20, {friction: 0,

restitution: 0.95 });

Matter.Body.setMass(bird, bird.mass*10);

World.add(engine.world, [bird]);

birds.push(bird);

}

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

function drawBirds(){

push();

//your code here

pop();

}

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

//creates a tower of boxes

function setupTower(){

//you code here

}

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

//draws tower of boxes

function drawTower(){

push();

//your code here

pop();

}

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

function setupSlingshot(){

//your code here

}

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

//draws slingshot bird and its constraint

function drawSlingshot(){

push();

// your code here

pop();

}

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

function setupMouseInteraction(){

var mouse = Mouse.create(canvas.elt);

var mouseParams = {

mouse: mouse,

constraint: { stiffness: 0.05 }

}

mouseConstraint = MouseConstraint.create(engine, mouseParams);

mouseConstraint.mouse.pixelRatio = pixelDensity();

World.add(engine.world, mouseConstraint);

}

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

index.html

>>>>>>>>

1