Breakout Day 9

Hello there. Missed me? [I doubt it]. It’s been a while since I last posted. I guess life takes a toll on you [I’m not making excuses it’s just the truth] also the projects I’m trying out aren’t as simple as a one day project. [I need to think simple though]. The intros started to go back to awkward sorry about that. Moving on…

Truth be told, I didn’t love to code during college. I hated feeling stupid and that’s how those classes made me fee [and those console errors made me turn mental] so I avoided it.  Fast forward to my masters in computer science [the irony] I took a game dev course just because I loved to play games, but that was the turning point. The moment I fell in love with programming, and science altogether. The reason I mention this is that it’s been a year or so since I last developed a game. it’s been apps/crawlers, and websites. So I wanted to go back to developing a game, with no framework at all. So I did. of course I chose an easy game ‘Breakout’. This was the first Time I used the canvas element. And boy it was fun!

[It gave me ideas for future projects] Anywho, I was following Mozilla’s tutorial. I loved the step process because it truly makes you understand what’s going on. Especially understanding the timing functions in Javascript. So started the development process by drawing a ball on the screen and moving it

Cool! But I need to keep it in the frame and not have it go off screen so world colliders are needed so a function was added to check if the ball collides with any of the walls and if so changes its direction.

After that the paddle was added, movement detection, game lose state whenever the ball hits the bottom edge, add the bricks, brick and ball collision, and finally the winning state. I know I rushed things over but for a more detailed reasoning on how the game was made, you can check out Mozilla’s tutorial here.

Now that the game is all finished up, I wanted to give it my own design so I changed the brick color, fill, and stroke, now it looks somewhat like this

It’s fine, but as I said it’s also a UI test for me. It got me thinking, won’t it look better if it was on a Gameboy screen. Yes, yes it would! So I fired illustrator and started working on designing a flat Gameboy. it was difficult [again the pen to is crap] but I think it turned out fine, Buuut my lovely designer sister’s perfectionism got to me. she pointed out some problems which were

As you can see the right edge is off it looks weird also another problem was the

battery. She said it looks like it off makes it a bit lighter. After some more time struggling with illustrator, the final result looks acceptable as you can see for yourself 🙂

Alright now comes the difficult part mounting the canvas on top of the image. Now this took some time and playing around with positioning and z-indexes as you can see it was truly frustrating

Finally, after some time, I got it to work and it looked good! I was so excited I showed it Adwa! ‘Adwa, Adwa look, look it’s finally positioned right and working properly!’

Adwa looked at it and then said ‘okay, cool. But it would be better if the ball changed color based on the brick that it hits’ Damn it Adwa! Why can’t you just for once say ‘cool! On to your next project’ [sigh],  the problem is, I take her comments seriously so I work on what she suggested and crap she’s right it looks better that way :p and thus here’s the final look of how the game looks like

You can check it out for yourself here. Tell me what are your thoughts? Share with me your scores. Also, have you developed any games? do you have any game ideas?


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *