Step I: First, create a canvas of width 800 and height 600.
Step II: Then create four new files and named it as Ground.js, Division.js, Plinko.js and Particle.js.
Step III: Now, in Ground.js, create a class and name it as Ground and make it a static body.
Step IV: In Division.js, it will be similar tp Ground .js, but it should be taller than its wider so you can copy the codes from Ground.js and paste it in Division.js and change the name of class to Division.
Step V: In Plinko.js, create a Plinko class with every plinko being a circular body of radius 10.
Step VI: In Particle.js, create a Particle class with every particles being a circular body of radius 10. Add a color property for the particle in the constructor then use this color property in the display() method.
Step VII: Now add all these files in index.js.
Step VIII: Now, in Sketch.js, first create a world and engines using matter.js and at the same time, create a ground also.
Step IX: Then create three arrays named particles, plinkos and divisions. Similarly, create a variable divisionHeight and assign its value to 150.
Step X: Now, in setup() function, create multilple divisions using for loop.
Step XI: In draw() function, use for loop to display multiple divisions.
Step XII: Similarly, in setup() function, use for loop to display plinkos also. You have to write four for loops to create four rows.
Step XIII: Same as you displayed divisions using for loop, display plinkos also. The for loop will be same but the name should be different.
Step XIV: In draw() function only, create a new particle after every 60 frames.
Step XV: Same as you displayed plinkos using for loop, display particles also. The for loop will be same but the name should be different.
Step XVI: Check your game that is it working properly or not.
Here this part ends.
In the next part, we will add scoring system.
Video:-
0 Comments: