Building an Asteroid Video Game with D3.js

It’s hard to believe that Week 2 at Hack Reactor is already finished! I constantly go between feelings like I’ve been here for several months or several days, but definitely not 2 weeks. Keeping track of what day of the week it is has also proven to be a challenge. For example, yesterday I got to my local gym at 6 am only to realize that it doesn’t open on Saturdays until 8 am!

On a different note, the material at Hack Reactor has gotten progressively more interesting. This week we built a Dance Party game in jQuery using various CSS animations, explored how to design an algorithm to the classic N-Queens problem, and got introduced to the awesome data visualization libary D3.js.

What is D3.js?

D3 is a popular JavaScript library that stands for Data Driven Documents that allows manipulating DOM tree nodes (elements on a web page) using data. Prior to technology like D3, most data was visualized using bar charts, line graphs and pie charts. These tools date back to the late seventeenth hundreds. D3’s biggest appeal is that it allows to visualize large and complex data sets in the browser. With D3, you can create interactive charts and graphs that display dynamic data in ways that haven’t been done before.

D3.js Sprint

Having come from a data analytics background, the D3 sprint has been my favorite so far. We took some creative liberties and built an Interstellar themed video game where you have to move around Yoda’s head to avoid collisions with the falling asteroid. It was really amazing to see how easily we could bind data to the DOM nodes using D3.

Below is the high level picture of our code:

Step 1. Create the Board

Using D3 methods, append the SVG (Scalable Vector Graphics) element to the tag and set the height and width parameters of the video game frame.

Step 2. Create the Enemy Objects

D3’s method .selectAll() allows us to grab all svg ‘circle’ elements on the page and apply certain properties to them. The .data() operator takes in DOM nodes returned by .selectAll() and binds the data passed in. We then set the class, radius and the x and y coordinates of each enemy node with the data supplied from the createEnemies function. And lastly, we set the image attribute of our enemy circles to a picture of an asteroid.

Step 3. Create the Player

In the step above, .enter() took the selection returned by data() and created new DOM nodes for each missing item in the data array. Since our game only has one player, we don’t need to use the .enter() operator and instead we just set the player’s x and y coordinates.

Step 4. Making the enemies collide

To put it all together, this step grabs all the existing enemy asteroids and binds the new x and y coordinates generated by the createEnemeies function using the data(). Now every time we call the move() function, our enemy objects will move around on the screen.

Final Thoughts

This sprint made it apparent that D3’s ‘secrete sauce’ was the ability to loosely bind data to DOM elements. Without having to explicitly specify the quantity or type of data, D3.js is able to elegantly attach dynamic data with DOM elements to create amazing visual effects.

For those of you learning how to code, I put together a curated list of resources that I used to learn how to code which can be found at breakingintostartups.com

Sign up for the Breaking Into Startups newsletter here for further guidance.

If you enjoyed this post, please share it with your friends! ❤ Also, I would love to hear about your stories in the comments below.