Day 29 – Whack a Mole

hippoToday was a lot tweaking! First I thought, “holes with css, I know how to do that!” I created a bunch of circular divs and worked on getting an image to appear and disappear randomly. I couldn’t find a mole so I used a hippo!

So cute, right? Once I got the hippo to appear and disappear randomly, I had to make the animation for the hippo to pop out of the hole. This is when I realized I would have to split the holes into two. More divs!

cute-hippos

There were 4 parts: the top oval, the bottom oval, the hippo, and the container. They’re so cute, they look like lions! I thought it was funny to have their ears sticking out but later decided to push them down lower. To hide the hippos’ bodies, I created a hider div in each container.
hide-hipposI put a border around the hider div just so it would be easier to tweak the dimensions. And finally, switching the hippos to moles! Since the mole images were a different shape, I tweaked the dimensions of the container and the hider.
mole-hiderThe final product: the moles pop up with more frequency on each level! I realized there was a bug with my javascript: sometimes the moles would disappear instead of dropping back down. This was because of the way I had used seTimeout to remove the “up” state of the mole after a set time. I need to read more about javascript objects to code similar problems in a more elegant manner.

Whack

Day 29 – Whack a Mole

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s