Inspiration

Spongebob might’ve been an odd choice for a western themed creation, but it was actually the first exposure I had to anything ‘western’ since immigrating to America! As a result, I immediately thought of that episode as my inspiration for this hack. I feel it incorporates many aspects of the genre, such as bad guys, a small town in turmoil, friendly companions, and a heroic Sheriff who saves the day. With these elements, I wanted to create something that put the user in the shoes of the hero, where the only way to get farther is to ‘make tough choices’ and ‘listen to the town’s citizens’.

What it does

At the start, the game asks you to click any keyboard key to begin. Then, it’ll prompt the player to enter their name - or by default, their score will be saved under the name ‘Mystery’. This is a pun on being anonymous and a reference to the beloved seahorse from the show. After this, the game will begin on Day 1. A random tile with a character will flash and a random quote belonging to them will play. These audio cues are randomized (4 possible sounds per character) to provide more challenge and avoid repetition. Then, it's the player’s turn to choose the character tile which was selected by the game. In this sense, it's like Simon says. However, when it's the game’s turn again, it’ll only play one tile, while the player must remember and choose all the previous tiles as well as the new one. For every round won, the player (Sheriff) will hold off Plankton (villain) for another day. Once the player loses, they’ll be redirected to a loss page which displays their score, and the news that Plankton has taken over Bikini Bottom. On this page, there’s also a sorted leaderboard of the top Sheriffs (players) and the amount of days they were able to survive. After the player sees this, they can click the golden ‘Play Again’ button and challenge themselves to get further!

How I built it

On the front-end, I used 4 divs and some CSS to represent the tiles and chose western versions of Spongebob characters to fill them. I then went through different soundboards such as soundboard.com to find western/iconic lines for the characters. I used audiotrimmer.com to edit them down to 1.5 seconds long or less. On the back-end, I used Javascript and jQuery to provide the input and output functionality. This handles user clicks, randomized tile selection, audio playback, animating the tiles, checking for success/failure, and getting/setting the player’s name and score to local storage. On loss, I used CSS to animate the Spongebob bubbles as a loading screen. Lastly, the leaderboard gets created by retrieving the scores array from local storage and sorting it, before jQuery uses it to generate a table.

Challenges I ran into

I had several challenges throughout this hack. One of my main ones was using local storage properly. At first, I was saving the player’s name and score but each time the page loaded, the new data would override the existing data. I eventually learned to overcome this (more below). The other problems I had came with CSS and trying to properly place divs in correct spots to use all available screen space. I didn’t want players to have to scroll down, I wanted everything to fit well on their screen. This carried on to animating the bubbles for the transition page since sometimes it would force the player’s page to expand and force scrolling. The bubbles also took a long time to get right since if they were too big, they’d be overcropped by their parent div, and if too small, they would repeat and look wrong in general. Overall though, I’m glad I added them since it's another link to the show. The last major challenge I had was making sure the game didn’t get repetitive or irritating. Originally, I didn’t have intentions of playing audio cues, but once I learned about the audio object, I soon found myself hearing Sandy’s “YEEEHAWWWW” 5 times in a row. Pseudo-random number generators try their best, but I didn’t want players to have to go through that too. As a result, each character has 4 possible sounds they can play instead of just 1 (thanks again pseudo-randomness).

Accomplishments that I'm proud of

I’m proud of learning about Javascript’s higher order array functions, such as sort which can take in any sorting algorithm given by the user. I’m also extremely proud of making this game responsive for many PCs. I used this Statistic database to find the most common screen resolutions and used media queries and chrome developer tools to resize my elements and avoid any scrolling on my game. Lastly, I’m proud of registering my first domain with domain.com!!

What I learned

I learned so many things that I didn’t keep track of it all, but the main things were the html audio object, local storage, and generating content quickly with jQuery. As I said above, I didn’t plan on using any audio for my game as I had no knowledge of it, but it was simple and intuitive to use and wrap up inside a function. I now think the inclusion of this feature was much needed in my game. For local storage, I learned how to save user data and retrieve it via arrays to continue their experience beyond a single session. This was also very intuitive and I know I’ll be using it all the time now. As for jQuery, I’ve never used it to generate elements before. I’ve only used it to change attributes and do some quick animations. Thanks to a google search and tweaking some stackoverflow answers, I was able to create my leaderboard table in 5 lines!

What's next for Best Of The West

In the short term, I’d like to add ranks for the top 5, 10, and 20 scores - like special Sheriff badges. In the long term, I wish to make this game even more responsive so that it can be played on mobile devices and tablets. I also wish to add more sets of western themed cartoons, allowing the player to choose their experience. My last and most ambitious goal though, is to transfer it to a NodeJS back-end. This way, I’ll be able to connect the game to a database such as MongoDB so that there can be a global leaderboard shared across all devices.

Built With

Share this project:

Updates