Hello I need help with this assignment, I will leave the instructions and respective codes underneath,thank you in advance$\mathrm{.}1.$Modify your WorldModel class as follows:Remove all parameter variables from the constructor and the properties for any Snakes and Views. Instead initialize properties allSnakes and allViews to empty Arrays.Also, remove the setters for the original properties and instead include methods addSnake$($s$)$ and addView$($v$)$ that append s and v to the Array of IWorldViews and Snakes, respectively.Remove the Snake getter and replace it with a getter for allSnakes. This will be changed later to use iterators because there's no need to maintain an ordering of the Snakes. $($E$.$g$.,$ we may use a set, which has no order to store Snakes.$)$In the update method, call move on each Snake in allSnakes instead of on the single one. Similarly, call update on each view in allViews, passing the reference to this WorldModel as before$\mathrm{.}2.$Remove the arguments that you pass to the WorldModel constructor when you create a new WorldModel and instead call the newly added methods addSnake and addView with your Snake and IWorldView$\mathrm{.}3.$Add a method equals$($p$)$ to your Point class that returns true exactly when this Point's x and y coordinates are the same as p$\text{'}$s$.$ This is necessary because two Points q and p might have the same coordinates but when compared with $==($or $===)$ would evaluate to false $($e$.$g$.,$ new Point$(1,2)==$ new Point$(1,2)$ will be false, they are stored at different memory locations.$)4.$Modify your Snake class as follows:Add startPosition and size parameter variables to your constructor, which will represent the initial head position of the Snake $($as a Point$)$ and its length, respectively.Also in the constructor, rename the currentPosition property currentParts and set it to an ARRAY which contains a single Point startPosition. Use a for loop to add a new Point to this Array size$-1$ times. The Points should appear consecutively in either the x or y directions. These added Points will represent its tail.Change the getter for its position accordingly so that it returns the position of the Snake's head $($first item in currentParts Array$).$Modify the move method so the tail follows the head as follows: Use a for loop to iterate over each one of its parts excluding its head. Start the for loop at the last index of the Array of Points and proceed to count down by $1.$ Set each element in the Array to be the Point at the index one before it$.$ This way, the back of the tail moves to the second to last tail point, the second to last tail point moves to the third to last tail point, the third to last tail point moves to the fourth to last tail point, etc. The point is $($pun partially intended$)$ that each part of the tail moves forward to the previous place of the one in front of it$.$ Finally, the head $($item at index $0$ of the Array$)$ needs to be set to a new Point based on the Snake's direction. If you did the previous assignment, this is already done; you just need to set the $0$th item in the Array to what you previously set the position to be$.$Add a method didCollide$($s$)$ that returns true exactly when this Snake's head collides with s$,$ which may be itself! this Snake collides with a different Snake s when its position $($the position of its head$)$ equals the position of some Snake part of s$.$ It collides with itself exactly when its head is at the same Point as one of its tail parts $($HINT: this.allParts.slice$(1)$ returns all non$-$head parts, those from index $1$ onward$).$ Note that Snake collisions are not symmetric meaning Snake A could collide with Snake B without B colliding into A $($I$.$e$.,$ when the head of A hits the tail of B$)5.$Modify the display method of your CanvasView class so that you draw each part of each Snake $($this will involve nested loops of some sort: forEach and$/$or for to iterate over all parts of w$\text{'}$s snakes.$)6.$In the update method of the WorldModel class, create a temporary Array $($local variable$),$ initially empty, in which you will store a list of Snakes that collided. Iterate over every pair of Snakes to see if they collided. If a Snake collides with another one AND IT'S NOT ALREADY IN THE ARRAY, add a reference to it in this temporary Array. Then go through every Snake in this temporary Array and remove it from this.allSnakes. The reason for creating this Array instead of removing them as you see they collide is twofold: one if A and B collide head$-$on$,$ then you need to remove them both. But if A is removed, then when checking if B collided with any other Snake, the answer may be no since A was already removed. The other reason is that removing items from an Array when you're iterating over it can cause you to skip over items as indices are shifted.WorldModel:import Snake from $"./$Snake$"$;import CanvasWorldView from $"./$CanvasWorldView$"$;import IWorldView from $"./$IWorldView$"$;class WorldModel $\{$ private snake: Snake; private width$\_$: number; private height$\_$: number; private worldView: IWorldView $|$ null $=$ null; constructor$($snake: Snake, width: number, height: number$)\{$ this.snake $=$ snake; this.width$\_=$ width; this.height$\_=$ height; $\}$ update$($steps: number$)\{$ this.snake.move$($steps$)$; if $($this$.$worldView $!==$ null$)\{$ this.worldView.display$($this$)$; $\}\}$ getSnake$()$: Snake $\{$ return this.snake; $\}$ get width$()$: number $\{$ return this.width$\_$; $\}$ get height$()$: number $\{$ return this.height$\_$; $\}$ set view$($worldView: IWorldView $|$ null$)\{$ this.worldView $=$ worldView; $\}\}$export default WorldModel;Snake:import display from $"./$display$"$;import Point from $"./$Point$"$;$//$ place your code on line $5$ above the export statement belowclass Snake $\{$ private currentPosition: Point; private currentDirection: number; constructor$()\{$ this.currentPosition $=$ new Point$(0,0)$; this.currentDirection $=1$; $\}$ turnLeft$()\{$ this.currentDirection $=($this$.$currentDirection $+3)\%4$; $\}$ turnRight$()\{$ this.currentDirection $=($this$.$currentDirection $+1)\%4$; $\}$ move$($distance: number$)\{$ if $($this$.$currentDirection $===0)\{$ this.currentPosition $=$ new Point$($ this.currentPosition.x$,$ this.currentPosition.y $-$ distance, $)$; $\}$ else if $($this$.$currentDirection $===1)\{$ this.currentPosition $=$ new Point$($ this.currentPosition.x $+$ distance, this.currentPosition.y$,)$; $\}$ else if $($this$.$currentDirection $===2)\{$ this.currentPosition $=$ new Point$($ this.currentPosition.x$,$ this.currentPosition.y $+$ distance, $)$; $\}$ else if $($this$.$currentDirection $===3)\{$ this.currentPosition $=$ new Point$($ this.currentPosition.x $-$ distance, this.currentPosition.y$,)$; $\}\}$ turn$()\{$ this.currentDirection $*=-1$; $\}$ get currentposition$()$: Point $\{$ return this.currentPosition; $\}$ get currentdirection$()$: number $\{$ return this.currentDirection; $\}\}$export default Snake;CanvasWorldView:import IWorldView from $"./$IWorldView$"$;import WorldModel from $"./$WorldModel$"$;class CanvasWorldView implements IWorldView $\{$ private scalingFactor: number; private worldCanvas: HTMLCanvasElement; private context: CanvasRenderingContext$2$D; constructor$($scalingFactor: number$)\{$ this.scalingFactor $=$ scalingFactor; this.worldCanvas $=$ document.createElement$("$canvas$")$; this.context $=$ this.worldCanvas.getContext$("2$d$")!$; document.body.appendChild$($this$.$worldCanvas$)$; $\}$ display$($worldModel: WorldModel$)\{$ this.worldCanvas.width $=$ WorldModel.width $*$ this.scalingFactor; this.worldCanvas.height $=$ WorldModel.height $*$ this.scalingFactor; const snake $=$ WorldModel.getSnake$()$; this.context.fillStyle $=$ "green"; this.context.fillRect$($ snake.getX$()*$ this.scalingFactor, snake.getY$()*$ this.scalingFactor, this.scalingFactor, this.scalingFactor, $)$; $\}\}$export default CanvasWorldView;IWorldView:import WorldModel from $"./$WorldModel$"$;interface IWorldView $\{$ display$($worldModel: WorldModel$)$: void;$\}$export default IWorldView;