Project 1
Published: 2022-11-15 03:56:23

Hello World! Mahipal here to talk about how I used random numbers in my very first Coding Project!

My topic today is on Event Listeners! Man, what an interesting concept for a non-coder like me to pick up on. I never realized that when I’m mindlessly scrolling a page or clicking on random links, my actions are being tracked and something specific becomes the outcome.

So, the first really cool event listener I leaned was the basics, making a button ‘clickable’. I wanted to give my users a heads up on how much time is left in the day and then show a random beer suggestion BUT only if they were ready! 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brqnasee97unyvue182x.png)

Now obviously under the hood I had some logic in place to see what the current time is and to be able to determine how many hours are left in the day. Once I had that down, I was able to show a random Beer suggestion from my reference. The important thing was that it’s all controlled by the click of this “I’m Thirsty” button!

So the next event listener I ended up implementing was connected to pressing a key. Now obviously we can use our keyboard to type things out, like this blog. But we could actually use different keys to have different actions executed. Now my project was a beginner one, so nothing fancy, but a user could press any key to get a random beer suggestion AND they could would get a menu of items that can be paired well with this beer suggestion. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqorp091vquttdj75xkb.png)

The final event lister I implemented was a touch event listener. So this one was a bit tricky at first, because when I started to implement it, I was on my laptop, so testing was a breeze. But then my laptop battery died and I switched over to my desktop where things went downhill because I didn’t have a touchscreen. So then I thought, what if other people fall into this scenario? I have to think about things like different users coming to my webpage from different machines, so they should all be able to access things that users with touch screen would be able to do. So as a backup for this scenario, I ended up having a button that would execute the same logic a user with touch screen would experience. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zzlx1nok0s2e6ouxbaw.png)

So event listeners, yeah pretty cool to get a good grasp on. Ok my webpage was very much a beginners attempt at event listeners, but let’s break apart a basic computer game which could utilize event listeners.

Checkout this Brick Breaker Game Screenshot:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a9iamso4z85kwrwj9md.png)

So the goal of the game is pretty straightforward, you want to use your blue paddle to bounce your red ball into the purple bricks at the top. When the ball makes contact, the brick disappears and they all have to be gone for the next level.

So let’s start with our paddle. The left and right key generally can be used from the keyboard. So we could have event listeners tagged specifically to the left and right keys, and have the paddle move one position in that respective direction. The paddle shouldn’t be moving vertically, but rather just horizontally. So we could configure our up and down keys to maybe call the ‘Game Over’ function because an illegal move was played. 

Say we want to implement a magic explosion which can take out a mass number of bricks when activated. So using a click event listener (which can be activated after a certain achievement is unlocked), when the user clicks on any one specific brick, we could have logic that would not only get rid of that break, but one more bring in all directions around the originally clicked brick. This same logic could be accomplished using the touch event listener, similar to how I used in my project!