JavaScript Project

This is a video showing a complete solution (Links to an external site.)

Requirements

1. There are four spawn points for the rectangles, and these points serve as the upper left corner of the rectangle when they first appear. See this page for how to draw a rectangle (Links to an external site.). See diagram below for details, spawn points 0 – 3 are shown.
2. Rectangles have a maximum width and/or height of 90 pixels
3. Rectangles have a minimum width and/or height of 45 pixels
4. When spawned, the rectangles should have an equal probability of moving in any direction
5. There is no gravity, rectangles bounce off all of the walls
6. Rectangles must touch the wall before they bounce off of it.
7. Rectangles must touch the top, left, right and bottom walls on their top, left, right and bottom sides respectively.
8. Every 4th rectangle should spawn from a different spawn point. The first rectangle should come from spawn point 0, the 2nd from spawn point 1, 3rd from spawn point 2, and fourth from spawn point 3. The fifth should come from spawn point 0, sixth from spawn point 1, and so on.
9. Spawn points 0 and 3 have an X value of ¼ the canvas width
10. Spawn points 1 and 2 have an X value of ¾ the canvas width
11. Spawn points 0 and 1 have a Y value of ¼ the canvas height
12. Spawn points 2 and 3 have a Y value of ¾ the canvas height
13. Use constants in your code, for example, const spawnPoints = 4 verses putting the number 4 everywhere you need it.
14. Do not use duplicated code. If there are, for example, the same 3 lines of code in multiple places, make a function, put the code in a single place and call your function.