I have never made a graphical JavaScript game before and this has been fun and challenging to develop. I first read the spec carefully and wrote down all that was required in a list of objectives. Under each objective I wrote pseudo code to transition from planning to implementation. The first thing I've done was researched different ways of creating HTML/JavaScript games. I came across websites with different solutions but they mostly recommended using HTML5's <canvas> element.

I followed a tutorial from the Mozilla Development Network website that teaches me how to create a 2D Breakout game using pure Javascript (https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) step by step. This tutorial helped me learn the basics of using Canvas, how to use JavaScript to create, render and manipulate shapes (rectangles, circles or text) on the canvas and how to trigger methods in certain events depending on state. It also taught me how to use keydown and mousemove event listeners to control the paddle. I was taught to use the requestAnimationFrame() method to render my shapes and text to the canvas rather than the setInterval() method because it helps the browser render the game smoother rather than a fixed framerate that is a required parameter for setInterval().

Some of the problems I have faced was writing the logic for the collision detection when the ball hits the net or the goal keeper. I had to think about the balls current position and if its in the same x and y position of the paddle or goal. Another challenge I had to face was adding a delay between attempts.The ball kept shooting immediatly when the ball collides with the net or goalkeeper and the feedback text ('Missed!' or 'Saved!') only appeared for a split second. This is the only problem where I had to turn to Stackoverflow. To solved this problem I had to set a state if the ball is shooting or not shooting. It will delay the requestAnimationFrame() to delay by 3 seconds of currentTime (which is the name of the current timestamp of the requestAnimationFrame()).