This is a simple blackjack game that I expanded into something ridiculous for CSS and animation practice. The projects makes use of javascript, jquery, tweenmax/timeline.
The game takes place by hitting the blackjack buttons. You see your cards on the left and can choose to hit or stand. Once you stand, you will see the dealer (lizardman) hand, and see if you win! When you do win, you gain 3 energy. A loss results in a loss of one energy.
After you stand, if you have enough energy to attack, the attack button lights up! You can attack, which causes an attack animation. A normal attack deals 4 damage to the enemy. If the enemy has enough energy, he will always attack.
Currently, the guard button does not work. I decided to rethink what it does as it would make you less likely to win to use it. I will probably replace it with a heal skill that gives you extra energy the next turn if you win.
The fireball animation is not 100% great looking. I wanted to make the page as reactive as possible, so I made the projectiles relativly positioned. This causes some interesting animations when played. I could have made media queries to change the absolute positioning, but that is a lot of busy work on a project that is meant to practice certain skills. I will eventually make the animations move the objects well out of the way while hidden to fix these issues.