5 Feb 2016

It has been a while since I made any updates to the blog. Life has been busy, and often I come home from class with a bunch of homework that needs to be completed. Granted, I could have used the weekends for updates. Oh well. Let’s talk about what happened in Week 3.

Week 3 was especially hectic, and stressful. It was the week we had to work on our first project, and I went a little overboard with what I wanted to make for my game. While others chose to make simple visual novels and time-based challenges, I chose to recreate Bomberman. I didn’t think it was difficult at the time, in fact I thought it was pretty straightforward…. that was until the day I started working on the project.

So what did I learn? Well firstly I found out (the hard way) why games have “game loops”, or frames per second. There are several reasons for this. For instance, imagine what would happen if you held down two keys at a time on a word document – the computer would only register and print out one letter at a time, so in the instance of Bomberman, it would be impossible to move a character diagonally on a map as it means holding down A and W to move North-West. Likewise, it would be impossible for two players to play Bomberman if only one character could move at a time. Also when a key is held down, only one letter will be registered within the first 2 seconds, before the computer registers that the key has been held down, which causes player movements to stutter. How a game loop counteracts this is that it creates a set interval timer that refreshes a set number of milliseconds, depending on how many frames per second you would like the game to run for. For instance, 60fps would be 1000ms/60 which would set the interval at 17ms, so every 17 milliseconds the computer would check if a key has been pressed down, and if a key has been released. If keydown is true, then the character would move, else if the keyup for that key is true, the character would would stop moving and keydown will become false. This way, the computer is able to register for multiple keys being pressed simultaneously.

Another challenge was making sure the characters were able to detect collisions based on their surroundings. To do this, I constructed an array of arrays in the Javascript file that defined the basic map setup. It looked like this:

Screen Shot 2016-02-14 at 10.38.01 PM.png

Here, ‘R’ stands for Rock (which is impassable and indestructible), ‘E’ stands for Empty space (which characters can pass through), and ‘A’ stands for a cell that randomly generates either a Wooden block (that can be destroyed) or an Empty space. Hence when the game starts, ‘A’ would change into either ‘W’ or ‘E’, which would in turn be reflected in the CSS.

I then created a player constructor function that identified the CSS positional values of the top, right, bottom and left borders of the character based on their starting position on the map.  For instance, player 1’s default starting position is on the upper-left empty cell on map (or (1, 1) in the array). Given that all cells are equal sizes (40 square pixels), and there’s a Rock above and to the left of the empty space that player 1 starts in, player 1’s starting border values would be Top-border: +40px from top, and Left-border: +40px from left. Given the character size is 30 square pixels, Bottom-border would be +70px from top, and Right-border: +70px from left. If player 1 moves right, its left and right border values would increase and the game loop would continuously check before every single pixel movement whether the character’s right-border is divisible by 40 (i.e. reaches +80px). If it does, the game loop needs to check whether or not the character cell to the immediate right is an Empty space. If it is a Rock or Wooden block, obviously the character wouldn’t be able to transition into that cell, but if it is an Empty space, the character would be allowed to transition. When this happens, p1 would be present in 2 arrays in the Javascript map, an ‘original cell’ and a ‘new cell’. When p1’s borders are fully within one of the cells, the other cell would become an Empty space, ‘new cell’ would render false, and the cell that p1 is in would become an ‘original cell’, hence completing the player transition.

I encountered a lot more challenges during the development of the game, for instance, the creation of bomb objects was tricky because their explosions also needed to detect for collisions, and having them detonate off of each other was particularly noteworthy. But the above were some of the more immediate challenges that come to mind when I was developing my game.

What are some aspects that come to your mind when you think about developing a game like Bomberman?

WDI Week 1 Reflection

18 Jan 2016

Last week was the first week of WDI. By the end of it on Friday afternoon, it felt like a very long week. Everybody was clearly knackered after Friday when we had drinks, and went home early. Although the hours of class are very tolerable (9-5), the activities that happened after class made it tiring.

During the week, we covered the basics of using the CLI, HTML, CSS and JavaScript in class, and implemented them in the lab exercises (which is a fancy term for saying homework). These lab exercises are killer, and require a lot of time for individual research. On Tuesday, our lab exercise was to replicate a 2-page website from scratch using HTML. On Wednesday, our lab exercise was to replicate a fancy landing page from scratch using HTML and CSS. On Thursday, we learned about bootstrap (not really how to use it), and our lab exercise was to recreate a homepage that looks the same as Our lab exercise involved solving some challenging JavaScript problems using string and array methods. I used the weekend to read up about bootstrap and the documentation.

I suppose the reason I (almost) died was because I stupidly decided to watch movies and go drinking on Monday, Tuesday, and Thursday. I would go home past midnight having not put in sufficient hours for the lab exercises, and then sleep around 2:30am rushing to catch up (even though I am too tired to remember anything I had done). It’s stupid and I really need to prohibit having social activities during the weekdays if I want to make the most of WDI. I need to dedicate at least 5 hours to doing lab exercises & gym after school and follow my plan! This will be my goal for the rest of the week.

WDI Commencement

13 Jan 2016

Monday marked the beginning of the 12-week General Assembly Web Development Immersive Program. Here’s what happened:

The morning session was an orientation of sorts. Stephanie Martin walked us through a list of do’s and don’ts, calendar dates, and general administrative stuff like hours and so forth. Afterwards up until lunchtime, it was the “Install Fest”, where we installed a bunch of programs including:

  • XCode – Coding kit for iOS and Mac stuffs
  • iTerm2 – a ‘cooler’ version of terminal
  • OMZsh – a config file for shell programs
  • Ruby & Rails
  • Homebrew

We then had an hour break for lunch. After that, class started. Our instructor was Willie Tong, who characterized himself as an old school coder and a big Star Wars fan. I think he teaches quite well, and he’s also very patient with our class (who I feel is not tech-savvy at all, to a frustrating extent). Our teaching assistant (TA) was Denis, who used to work at the Genie startup, and who rather understandably does NOT show as much patience with our class. Denis was a graduate of last year’s WDI, so it’s good that he can explain things clearly to a bunch of absolute newbies.

Class was about the command-line-interface, basically a run-through of what we had already learned in our fundamentals (work we had to do prior to yesterday). There’s definitely a lot more that I’m interested in learning about with regards to UNIX. I guess the key takeaway today was to always read the manual/documentation.

Yesterday, things started to pick up. We went through HTML & CSS basics, and did some practices in class including playing a CSS selector game ( We also learned about Chrome Dev Tools, which is a highly effective way of editing CSS for the website. Basically upon saving the HTML code, the idea is to use Dev Tools (command+alt+i) to tweak the CSS on your website, and THEN copy the stylesheet into your code. This would be much more efficient than constantly refreshing the page after making saves. We spent the day going through problems and familiarizing ourselves with the different HTML tags and CSS style options, but the key takeaway was definitely that you should use DevTools all the time to learn how (cool) webpages are structured (code-wise).

Acclimatization and the importance of routine

So a few days have passed and it seems that I haven’t been able to fully acclimatize with the new habits I set myself for New Year.  Especially the following:

  1. Get out of bed before 9:30am
  2. Daily planning

The reasons for the first problem are two-fold. Firstly, I sleep way too late, for some reason or another I am not able to sleep before 2am. To be able to get out of bed before 9:30am, I have to sleep before 1am, which means I have to get ready for bed around midnight. Secondly, I take a really long time to get out of bed, which could be a result of sleeping way too late. Either way, it seems necessary that I wake up around 9am if I want to get out of bed at 9:30am, because I’ve had to go through this “waking-up process” for a while now.

The second problem is a result of not knowing HOW to use the daily planner that I bought for myself, as well as not knowing WHEN to use it. I say I will plan during breakfast, but I believe that during breakfast my mind is blank about what needs to be done during the day, or what I have to do. I just write “study”. I believe the planning needs to be more detailed. What exactly do I need to study? Which chapters of which course? What do I need to work out at the gym? Etc. Also, I believe the planning needs to be done spread out during the day. I should have the planner at all times, just like a school diary I suppose. I think it should be used as a notebook rather than a planner, so I have recorded notes of what needs to be done during the day, instead of just saying, yeah I’ll do it when I have time.

It seems that a routine is necessary for me to maintain the good habits I want to keep. WDI begins next week. It starts at 9am and ends at 5pm. On top of that there is up to 5 hours of homework that needs to be done, and I need to go to the gym.  My routine should look something like this:


Screen Shot 2016-01-04 at 3.19.10 PM

Chapter 1: New Beginnings

01 Jan 2016

Today marks the first day of 2016. A quarter of my life has almost ended, and now it is all history. The prologue to my life is finished.

From today onwards, it is Chapter 1. Time to get real. It is the first day of the rest of my life.

Here’s to new beginnings, new habits and a fresh start:

  • Regular work schedule = Get out of bed before 9:30am
  • Daily planning during breakfast (brown journal)
  • Regular reflection (blog)
  • Gymming regularly