Find the Tardis Day 3

This is good, it’s day three and we’re still striding through. [all you people who’re thinking, ‘what is she talking about it’s just the third day’ well humans, sticking to something for more than two days is a huge accomplishment for me. I remember my mother once gave me an award for studying for three days straight. Yup, it’s just white[Arab] people problems… Guys, I need to work on the intros better I either complain or gloat about keeping it up. Let’s just get to it.

My siblings and I love competing. Everything turns into a competition in this house [even the mundane things]. The one that stuck with me is ‘Where’s Waldo’ We used to time ourselves and compare [fact: I used to beat them all the time. Always looking for places to gloat]. When searching for an idea for the next project, I came across an image of Waldo. And that lightbulb moment came. Why not do a game! besides game dev is what made me fall in love with coding in the first place. So okay we’ll do a game. Now let’s be a bit realistic, since it’s a single day, and I don’t have all day to work on it, we’ll make it simple. let the user try to find something, and record their time. What is the theme though?  So in the spirit of MECC why not have a convention theme! I love conventions and Doctor Who. So let’s mix them up!

In this day, I decided to focus more on the logic side, rather than on the design, that is why I didn’t generate my own art for this. I manipulated them, but the original source isn’t mine. After a bit of googling. I decided to use a cool 8-bit convention background. (It’s pretty rad!) I would love to add the name of their creator, but I don’t know who s/he is.

Now on to the coding bit, which is simple, just adding a background image, and a div with some styling. But you know what…Guess . . . IT’S RESPONSIVE!

Can we all take this moment to finally congratulate this stubborn brain of mine who finally thought of a mobile-first approach! [literally clapping for myself].

Now the coding bit wasn’t that hard. I used the DOM to target elements, and get the browser width and height. change the location, and display property of the Tardis whenever it’s been clicked. So the basic idea is to calculate the user’s reaction time. search for the Tardis amongst the crowd, click on it and you get your reaction time, along with your score. Finally, if you want to end the game, you get your average reaction time. Now it’s time to test it out.

… I wait and wait. Nothing appears :/ I made a timer function that randomly generates the Tardis, but it’s not generating. It’s that moment in an engineers life where they debug their code [sidenote: check out the origin of the phrase debug it’s funny] So I checked the console and

That is weird… I know for a fact that it’s not null. I check and check again with no luck. It’s that time again, where we ask the gods of code [the stack overflow community] And lord and behold there’s the solution. Yours truly added the script to the head of the document.

So basically it runs the script before the page actually loads, thus making it null. A quick fix is adding the script to the bottom of the body and bam! it works!

The Tardis appears and you can play! Check it out here. I know it’s simple but you can play it if your board and test your reaction time with your friends. Tell me who wins.

Happy coding 🙂

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 *