This site is a "Card Pack Opening Simulator and Gallery." Open cards by clicking the "Open Pack" button, view your "Collection" by clicking on "Collection". Cheat and view all the cards by clicking "Cards." Click a card to zoom in on it. You can download this site and use it offline to see all the cards.
Mobile TCGs are pretty popular, especially in Asia. I was introduced to the genre through Cygame's very popular "Rage of Bahamut." I peeked at a few others, but they're all basically the same. The gameplay is... actually, nonexistent. You acquire cards by clicking buttons a few times every hour (or by paying money to open packs of cards.) You then choose some number of cards to fight other players... but the fighting is a one shot calculation of whose cards have better stats. You improve your cards stats by clicking more buttons (or by paying more money.)
Despite that, the games bring in a lot of money. The social aspect helps, but I think that most of the draw is the presentation and the addicting nature of collecting cards. I checked out "Ayakashi: Ghost Guild" because one of my friends was working for Zynga when it came out. Out of all the TCGs I've seen, I liked the presentation of Ayakashi the best. The cliched story has cliched charm, the music is relaxing, and the artwork really appeals to me. Of course, the gameplay still didn't appeal to me, so I barely played the game. But I liked the cards.
Fast forward to last weekend where I wanted to learn CSS correctly. I needed to decide on a project, so I decided to make a quick "Card Pack Opening Simulator and Gallery." Because I liked Ayakashi, I went with that game. The result came out very nice. There are no ads on this site, but maybe you can show your appreciation by throwing some money at Ayakashi. If nothing else, they employ hard working designers.
This site was designed for learning about the front end, so it's HTML/JS/CSS only. This means you can download the site and use it offline (except in Internet Explorer). I limited the online version to 50 cards (mostly to save my bandwidth), but the offline version has about 1,000 cards for you to unlock.
If you have questions or comments, contact me at: relic.nt+aya@gmail.com
First off, all the images and data were collected from http://ayakashi-ghost-guild.wikia.com/wiki/AGGWiki. Due to the site organization, it was not easy to collect. All images are Zynga properties, I don't know the original artists or authors.
This site is purely Javascript, HTML, and CSS. It can be run entirely from an offline local file system. I made it to try to keep my front end knowledge from getting to rusty. I was supposed to just focus on CSS3, but eventually gave in to feature creep. The only real downsides to making this app entirely client side were that I couldn't organize the code as well (the different pages have copy/pasted code and making a one page app would require a lot more javascript) and I couldn't optimize serving images. There are a few optimizations and a lot of code reorganization that could be done, but the site is good enough for now. As for the technologies...
I used JQuery 2.1.0. I like JQuery.
I used Handlebars 1.3.0 for templating. I really like handlebars. It's not too flexible and it's not too rigid.
I used Font Awesome for icons. Font Awesome is awesome.
Bootstrap 2.3.2 provides a lot of the styling behind this site. The more I use and understand Bootstrap, the less I like it. In the beginning, it made it easy to make a pretty site. But if you move away from the default and basic examples, it gets really hard to make a site look the way that you want. Although the LESS styles are decently commented, that documentation doesn't carry over to the rest of the code base. The javascript code and plugins I've seen are very sparsely commented. Just figuring out how to use a particular module generally requires me to delve deep into the code, which is a pain with the lack of comments. At that point, it might be easier to just make my own implementation. I don't care too much for the Bootstrap coding style, so I'd normally want to stay out of its codebase unless I needed to extend functionality. It takes a long time to really understand how to customize Bootstrap, the real trick is that you have to use LESS and you have to read the code. Even the "customize" page is of limited use because the options aren't documented.
The bootstrap dropdown checklist module is from http://acquisio.github.io/bootstrap-dropdown-checkbox/. I extended the functionality to provide callbacks, draw the little speech triangle above the box, and support a mode where only one box is checked at any given time. The plugin is still very limited and doesn't allow for easy customization, but the results were acceptable for this project.
My first revision of this app used gridly for the card grid. Gridly lets you drag and drop to reorder things, which I think is very cool. The downside is that it makes the app sluggish for large numbers of divs, which made the library a no go.
I use Local Storage to store all the user preferences. Objects get converted to JSON strings before being stored. (Unfortunetely, you can't use Local Storage for local sites on IE9, but all the other browsers let you do this. So this site can't be used offline with IE.) I occasionally use request parameters to differentiate between pages.
The most interesting part of this site is opening the packs. I never really gave much thought into how cards in packs (where cards have different rarities) are distributed. I noticed in online TCGs, you can usually buy packs that grant you (slightly) better odds of getting a rare card. The strategy I went with was to randomly choose the (weighted) rarity of the card that will be picked and then (fairly) randomly choose one of the cards in that rarity group. I think the percentages I chose are very generous (though it's still hard to collect all the cards) and the algorithm is very fair, which are both choices that might put a real company out of business. I would bet that real companies would distribute cards less fair-randomly and make sure that opening card packs is as addictive as possible. I think ultra rare cards either have extremely low (.001%) probabilities or require you to complete some ridiculous event. There are five types of rarities in Ayakashi, but unlike most card games, there are far more high rarity cards than low rarity cards. I guess this is another strategy to make customers feel like they're getting rare cards when they're really just getting standard cards.
The technical part of opening the packs is a loaded dice problem, which is a fun problem with a clear solution (see http://www.keithschwarz.com/darts-dice-coins/). I could have optimized it more, but I didn't feel like reimplementing Vose Alias in javascript. The initialization step only really needs to be done once.
Anyway, here are the probabilities I settled on:
| Pack Type | Card 1 | Card 2 | Card 3 | Card 4 | Card 5 |
|---|---|---|---|---|---|
| Normal Pack Cards: | Common | Common | Normal | Normal | Normal |
| Rare Pack Cards: | Normal | Normal | Normal | Rare | Rare |
| Legendary Pack Cards: | Common | Normal | Rare | Rare | Legenday |
| Card Type | Rarity 1 | Rarity 2 | Rarity 3 | Rarity 4 | Rarity 5 |
|---|---|---|---|---|---|
| Common Card Probabilities | 75% | 25% | 0% | 0% | 0% |
| Normal Card Probabiltiies | 15% | 25% | 45% | 10% | 5% |
| Rare Card Probabilities | 0% | 0% | 50% | 30% | 20% |
| Legendary Card Probabilities | 0% | 0% | 0% | 70% | 30% |
As this site was mostly made to practice CSS, I've discovered I still dislike it. I understand it more than ever before, my main problem with CSS is not with the styling, but with organizing the styles. Maybe I should seriously look into LESS or SASS and see if either of those languages ease my complaints with organizing my styles.