HTML5 Snake Game with source code walkthrough | Hacker News Reader

HTML5 Snake Game with source code walkthrough

jdstraughan.com

59 pointsjdstraughan16 comments

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.

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!

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.

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... and http://www.leaphacking.com/posts/notes-from-a-leap-motion-pr...

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.

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.

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.

Works right away now thanks!

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...

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.

Screen moves with the snake. Chrome 25.0.1364.152.

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/

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)

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

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

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

Reply on news.ycombinator.com