

HTML5 Snake Game with source code walkthrough - jdstraughan
http://jdstraughan.com/2013/03/05/html5-snake-with-source-code-walkthrough/

======
kranner
This is nice; I like how the background updates to show the level-state.

I recently started porting my native iOS game to HTML5. After
Xcode/Objective-C, HTML5 development is just so refreshing for the 1) instant
reload, 2) succinctness of Javascript. I'm kicking myself for not starting
sooner.

Here's a link to my HTML5 game: <http://noisytyping.com/NCT6745/index.html>
(work in progress!)

edit: I just realized I haven't put in a tutorial yet. It's an Arukone
implementation: connect all number-pairs, and fill the grid.

~~~
jdstraughan
Nice!

It took me a tries to figure out how to play, but once I got it I liked it.
Very nice gameplay, very clean, addictive.

I'd add a few basic instructions on page to get folks started, even something
simple like "Use your mouse to draw a line between 2 numbers".

Ah, just saw your edit - perfect!

~~~
kranner
Thanks very much :) It's cool that you figured out the rules!

I'm definitely sold on HTML5. For the kind of games I want to make, there's no
reason not to bypass native and put them on as many platforms as possible. A
month ago I wouldn't have considered anything but native.

~~~
jamesbritt
Same here. I've been poking around with using the Leap Motion for browser
games. I wrote up some notes about this, too:
[http://www.leaphacking.com/posts/notes-from-a-leap-motion-
pr...](http://www.leaphacking.com/posts/notes-from-a-leap-motion-presentation-
part-2.html) and [http://www.leaphacking.com/posts/notes-from-a-leap-motion-
pr...](http://www.leaphacking.com/posts/notes-from-a-leap-motion-presentation-
part-3.html)

------
xiaoma
I like it! I really relate to the childhood dream of making games. I've been
dipping my toes HTML5 gamedev myself, but thus far have done everything with
DOM nodes. Have you thought of putting it up on some app stores? Or at least
the chrome store? That one is pretty easy and free. No clue how much traffic
to expect from it, though.

------
andyn
Maybe it's just me, but the requestAnimationFrame code fails in Firefox unless
they're all prefixed with 'window.'

It probably works straight away in Chrome because requestAnimationFrame is
defined.

~~~
jdstraughan
Just pushed updates and tested in FF 18.0.2 and 19.0

Please let me know if this is still not working in your browser.

~~~
andyn
Works right away now thanks!

------
abirb
So Cool. Thanks for the detailed, specific & well-designed contextual
explanations!

I am honing my HTML5 skills, and this was very useful. I started playing with
your code...

~~~
jdstraughan
Awesome - and thanks for checking it out!

This is only my 2nd HTML5 game - and it was a blast to create. Best of luck to
you, and don't hesitate to contact me when you get some code together. I'd
like to help any way I can.

------
m4tthumphrey
Screen moves with the snake. Chrome 25.0.1364.152.

~~~
jdstraughan
Yeah, I just embedded the jsfiddle iframe. It is a much better experience to
open jsfiddle in its own tab:

Small: <http://jsfiddle.net/zT7V4/7/embedded/result/>

Large: <http://jsfiddle.net/zT7V4/5/embedded/result/>

~~~
path411
You can use e.preventDefault() at the top of your event listener to prevent
the keys from affecting the page.

The page would move even from these links if your page was long enough to have
a scroll.

(You can see it by shrinking the window all the way down until it gets a
scroll)

------
mha_bd
You have used path to draw the boxes instead of drawRect() function. Is there
any particular reason/advantage behind that?

------
pav3l
Funny how even after years of Vim-ing, using "hjkl" in a video game still
trips me up.

~~~
jdstraughan
I added it to see what it would be like. I found it to be too weird.

