w6d3 - Meta Gear Solid

    Today we used: HTML, CSS, javaScript and jQuery to create a few browser games. The first was a version of Tic Tac Toe that had no tics or tacs. But it did have some pretty amazing colors. All of the game logic was taken from a previous solution and we just needed to update it in order to render it in the browser. This wasn’t too bad once we started using jQuery to grab things, which makes HTML elements really easy to manipulate with javaScript. The main focus was on getting the game to run and render in the browser, and of course to do it in style. We opted to go with nice green and fuschia-ish colored boxes instead of the boring “X” and “O” that you’ve seen a million times before. We even added a highlight whenever you moused over a box, but ONLY if the box was empty.

    The next task was to create… wait for it… Towers of Hanoi (FIFTH TIME IN SIX WEEKS). Thankfully, we didn’t have to actually recreate it, it was similar to the Tic Tac Toe exercise, where we had to adapt existing game logic to render in a browser. This ended up being pretty cool, as we styled our towers with some nice pastels and rounded the corners of our disks. Once again, we added some feedback, in the form of highlighting the background of whichever stack was selected. We even added a toggle in, so that if you click on the same stack again, it deselects it. When you select a valid from stack and to stack, the disk redraws itself on top of the new stack. Such a simple thing, but it was cool when we finished and could actually play around with it in the browser.

    The coup de grace was to recreate the classic game of Snake. This time, we built everything from scratch. Using jQuery and CSS, we were able to put together a pretty awesome game of Snake in a few hours, and we even gave it a Metal Gear Solid theme, complete with a picture of Solid Snake as the “head” of the Snake! Instead of apples that pop up on the board, we placed cardboard boxes, which as everybody knows, Solid Snake loves to hide in. I must say, it was pretty amazing! There is a lot of polish work to do on the game itself, and there were some features that we purposely left out that can be easily added in later. There was the minor thing about dying. We decided that Solid Snake was way too badass to die in a game of Snake, so we didn’t implement any game over mechanics. It’s a feature, not a bug! Today was definitely a fun day, and I don’t think it would have gone so smoothly without the use of jQuery. It’s not the prettiest thing to look at, but it seems to make manipulating HTML a whole lot easier, which is always a plus. Tomorrow we play with jQuery some more, building our own plugins, which should be pretty interesting.