CrayzCrabz HTML5+CSS3 Game

crayzcrab
It’s been a while since I’ve updated this blog of mine… But I figured I would finally post something. I have actually been meaning to make this post for a long time.

A week or so before July 23, 2011, my friend Eric Bacus and I decided we wanted to try and make a game over a one week period. We didn’t know what, but we knew we wanted it to be a “Side-scroller”, with old-school-ish graphics. We also knew it was our friend Corey’s birthday in about a week. Which was perfect, because we only wanted one week to build this. For Corey’s Birthday, we were all going to meet up at an “All you can eat” Crab Legs buffet. So, why not make a game about our friend Corey eating crabs. We went with the idea and began production. I was in charge of code development and Eric was in charge of graphics and animations.

While Eric was figuring out the graphics, I started building the code foundation of the game. HTML5/CSS3 was the “new” thing, so I wanted to test my skills and learn what it would take to build a game in HTML5+CSS3 and Javascript. Since the graphics hadn’t been created yet for our game, I used stand-in graphics pulled from the game “Super Mario World 2: Yoshi’s Island” (one of the best side-scroller games EVER! IMO). After lots of reseaching and using the knowledge I had gained from building games in Adobe Flash. I came up with this Yoshi’s Island Prototype. I even made it iOS/Android/Touch friendly! I was pretty amazed at how responsive CSS3 was on mobile devices. I had originally though about using HTML5’s canvas for the motion, but found it to run like crap on a mobile device. So CSS3 was the winner! Building that prototype had taken a day or two of time. By that time, Eric had some of the graphics built, so I moved on with taking what I had, and began building Corey’s Crab game.

We had the original idea of gameplay just being that you jumped on crabs heads, and they died… But we still didn’t know a good way for Corey to “eat” the crab, and we wanted to make the game have another level of difficulty. So, we added the ability to “eat” the crab after it was “dead”, by standing over it and tapping Down Arrow to “munch” the crab till it was totally devoured. After many days of adding features, bug fixing, and lots of testing. We barely made the deadline… Granted, there are still lots of bugs present, and it’s only really been tested in the Chrome Browser. Playing it on an iPad or Android is still kind of broken too… BUT, having made a playable HTML5+CSS3 game in 1 week was good enough for me. I’d still like to go back and flush out the bugs, and get it tested in all browsers. Maybe someday I will find the time… Till then, try playing Corey’s CrayzCrabz game!

Play CrayzCrabz! (v0.5 beta)
Play Yoshi’s Island Prototype

PS: The game’s title was a mash up of Corey’s alias CrayzBeatz and Crazy Crabs.