Pokemon Simulator: A Ruby on Rails App
Your teachers never straight up tell you, “You’ll never finish that.” They say, “Get the requirements done first.” That should always be your first sign that you probably aren’t going to get everything done you plan. I remember describing my plan to my cohort lead and he gave me the same exact look I gave countless art students as they pitched projects I knew would have them sacrificing their entire social schedule, or not completing. My goal was to build:
A rails based Pokemon game you could sign up for using facebook or google, that used the PokeAPI, that let you capture Pokemon in a gamified scenario, create teams, buy items from shops, look up and friend other users, battle their pokemon, play a canvas game to earn money, and have a live messaging system between users. I still have 5 days left, let me tell you where I am in this project and how I got there. :)
The first thing I did was worked on a semi-responsive index page, login/signup, and layout with a navigation bar for the site. I remember thinking I was going to crush through it because I had made a signup form in Sinatra, and then stumbling through the entire thing quite hard. Especially when it came to the third party authentication. All it took was one html tag contained in the wrong tag to lead to HOURS of debugging. Luckily I had a fantastic cohort lead who was able to help me troubleshoot it.
After that I worked on the ability to make Pokemon. But a Pokemon game where you just type in a name and have that Pokemon is no fun. So I got a little creative. I incorporated Javascript an a little styling to create a capture the Pokemon screen.
Let’s talk about how this is done.
In the controller, every time the page loads I’m creating a new random Pokemon through the API. Then I’m saving the info I need to create a Pokemon in my database to variables that I can access in my view.
Then in Javascript, I have an array of failed capture messages that displayed if your Pokeball throw fails. A little logic to get the level of the Pokemon, then it establishes the difficulty to catch the Pokemon based on the level / 2. It chooses a random number between 0 and the level of the Pokemon divided by 2, and if that number is 0 it’s going to hide the throw Pokeball button, failed capture message, show the capture form, and change the styling of the continue searching button so it doesn’t slide when the throw pokeball button vanishes. If your throw fails, it will display a fail message at random, and ensure that everything is displaying properly.
When the capture form displays here is what is happening in the view.
It’s using those variables from the controller and passing them through hidden fields, you only have to enter a nickname, (or none) and it will create a pokemon in the database for you when you submit your form. It’s as simple as that.
Another fun bit of code I did was the scope method for sorting Pokemon.
You can very quickly end up with a LOT of Pokemon so I’m using a partial to create a mini navbar that loop’s through the types of Pokemon that the user has (so there are no types that the user doesn’t own in that navbar.)
These two bits of code work together. The controller passes the param the user is asking the website to sort the Pokemon by to the model, and the model returns just the Pokemon that the user asked for. Or in English. First my website is creating the navbar by looking at all the types of Pokemon and showing the user a list of types that they own. Then when the user selects the type, the website is showing them just that type of Pokemon, despite that fact that I never made those individual pages. It’s a small bit of code that packs a powerful punch. Let’s talk about teams!
Currently you can make, view, and delete teams. You can also view other users teams. But I don’t currently have a battle system. It was a bit of a challenge getting the relationship, and figuring out how to get the Pokemon into that join table. But I did manage to do it with a loop which I was pretty happy with. Someday hopefully soon you will be able to battle them!
When it comes to items, currently you can buy, and own Pokeballs. But this is another one that has an interesting bit of code. User_items is a join table, so when you purchase an item, you input how many you want, and it should update the users current quantity if they already own that item or create it if they don’t. It should also take money from the user. The end result was this beast.
At this point you can search for, and view users, and their Pokemon/teams. But I really need to get some additional styling in there before I am happy enough to show screenshots of that. The end goal for that is friend requests, messaging, and battles!
If you are thinking… What about the game? Well… I’m so glad you asked!
Whack a Diglett is a fully functional html5 canvas javascript whack-a-mole style game. It’s pretty simple, but personally a lot of fun. Nothing about it is in the project requirements but I am wrapping up this blog with a link to this game and I hope you have a lot of fun playing it! :D
And here is a link to the source code for Pokemon Simulator if you’d like to check it out :)
