Click Here to Play Battlefield: Blackjack!

I recently picked up a coding challenge that asked for a creative Blackjack game written in HTML, CSS, and JavaScript. I’ve been trying to find a reason to learn css3 animations for a while now, so I figured I might as well take a shot. We were given some base javascript and an html5 canvas that drew a simple card, but I didn’t really want to mess with WebGL for this project so I scrapped most of it and wrote my own.

I’ve had mixed results with jquery’s animations, so I wrote as much as possible using css3 transitions. That includes things like y-rotations that make the card flips, all of the :hover states, and most of the element movement. This is done through liberal use of  the “transition” CSS property, along with “backface-visibility”, “transform-style”, and “transform”.  There are already plenty of fine tutorials on how to use this stuff, and I would probably mess it up anyway, so I will not go into too much detail here. What matters is that it ended up working surprisingly well, and even degrades nicely in browsers that don’t support those properties. A cool side effect is that there are only a couple images in the whole app, so the page loads and renders quickly.

Another useful tool I decided to experiment with was the LESS CSS framework. It’s sort of like a stylesheet compiler that reads shorthand code and writes all the repetitive stuff that makes you hate CSS. Check it out here. My LESS file can be found here as an example.

I tried to write the javascript as cleanly (read: non-hacky) as possible while still following the object-based model laid out in the basic framework given. All in all it’s really not a whole lot of code, and is pretty simple to read, so if you’re into that kind of stuff don’t be afraid to check my source and see whats going on. There are a couple small hacks and some unsafe accesses of ‘private’ variables, but sometimes that’s life with javascript. I didnt bother to optimize for minimization so please forgive the stray static strings I left in the code for css selectors and such.

The “Powerup” modules are pretty cool in that I made them very extensible. Look at the powerups.js file to see what I mean – by keeping them modular, I can add and remove them without modifying any other code.

Did I go a little overboard for the challenge? Maybe. Is the end result awesome? I think so.

Click Here to Play

Find a killer strategy to beat the crap out of my AI or an unbalanced powerup that needs fixing? Do you have an idea for a new weapon? Well, leave a comment!

Yes, I’ve switched back to wordpress. Bear with me as I add content back in

This is one of my favorite sites on which to work. Its a simple layout but I get to use lots of cool grunge textures and manly themes to make it as badass as possible.

This year I switched the color scheme up a little and updated some graphics. The Events page also went through an overhaul.

http://www.arnoldstrongmanclassic.com

This cottage has been in my dad’s family forever, and I’ve been spending time up there almost every summer for as long as I can remember. Sorry there aren’t more photos

Some cliche shots but whatever. they were fun to take

I believe that we stayed up until about 5am that day taking these shots.

She’s a nice girl, it’s too bad she decided wisconsin would be more fun than austin…

I’ve worked at the Stark Center for the past three years, doing every kind of IT task there is. My primary job has been to completely redesign and update the website, which occurred in 2010. Since then, I’ve built and set up development servers and file servers, worked with vmWare virtual dev servers, written custom web applications for internal use, evaluated open source solutions, worked with multiple graduate students to present their research in an online format, and much more.

Take a look at their site – the entire thing, including all graphics work, was designed and created by me.

Visit the H.J. Lutcher Stark Center

The Quest for Victory was a pretty large project I worked on for the Stark Center in 2010. Dr. Jan Todd, Matt Bowers, Peter Ullman, and others helped gather all of the information and I programmed a dynamic timeline in which to display it all.

Jquery provides a base, along with a couple plugins. The code isn’t as pretty as it should be but it’s my early work and we were constrained for time.

View the full project

(There’s also a video that goes with it, which I designed and edited)

I took these photos a while ago, mainly because I wanted to mess around with HDR. Some of them came out pretty well