Snakes in a Frame

After many a failed attempt at an iOS game, I decided to peel things back and go for a much more basic, and consequently, much more doable project. I was going to make Snake 1.0 for a HTML device!

This is a really basic project, but one I knew I could finish in a number of days! Sure enough, I’ve completed a basic functional version of it in two days, on top of college work and life. I used

  • HTML 5 canvas
  • JavaScript
  • JQuery

Screen Shot 2013-02-11 at 20.25.53Screen Shot 2013-02-11 at 20.26.11

And not much else. I wanted to bash out a version of this that I can modify later, and succeeded with very little pain. There was an issue with uploading the files to wordpress, so I’ll put up a version on dropbox for anyone interested in having a snoop around the source.

The graphics are horrible non-existent, but the code is clean and understandable. I hope to extend this basic functional prototype with some less ridiculous graphics, and other features such as wrap-around walls and leader-boards, but mostly a graphics overhaul.

After that, I might port it to iOS using something like cocos2d or a other framework.

Screen Shot 2013-02-11 at 20.26.05Screen Shot 2013-02-11 at 20.25.43

I used this online tutorial to get up and going: http://thecodeplayer.com/walkthrough/html5-game-tutorial-make-a-snake-game-using-html5-canvas-jquery

I then made a number of improvements and modifications; I

  • Changed the speed with a modifier (More you eat, the faster it goes)
  • Added Speed to the “HUD”
  • Fixed a bug: changing direction twice in fast succession used to make it crash when it shouldn’t have

Obviously, this is pretty fundamental stuff, but I intend on improving it gradually.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s