4 ms·
HTML5 Snake Game with source code walkthrough
- m4tthumphrey 14y agoScreen moves with the snake. Chrome 25.0.1364.152.
- jdstraughan 14y agoYeah, 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/ http://jsfiddle.net/zT7V4/7/embedded/result/ Large: http://jsfiddle.net/zT7V4/5/embedded/result/ http://jsfiddle.net/zT7V4/5/embedded/result/
- deleted 14y ago[deleted]
- path411 14y agoYou 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)
- abirb 14y agoSo 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 14y agoAwesome - 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.
- andyn 14y agoMaybe 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 14y agoJust 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 14y agoWorks right away now thanks!
- kranner 14y agoThis 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 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 14y agoNice! 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 14y agoThanks 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 14y agoSame 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-presentation-part-2.html http://www.leaphacking.com/posts/notes-from-a-leap-motion-pr... and http://www.leaphacking.com/posts/notes-from-a-leap-motion-presentation-part-3.html http://www.leaphacking.com/posts/notes-from-a-leap-motion-pr...
- pav3l 14y agoFunny how even after years of Vim-ing, using "hjkl" in a video game still trips me up.
- jdstraughan 14y agoI added it to see what it would be like. I found it to be too weird.
- mha_bd 14y agoYou have used path to draw the boxes instead of drawRect() function. Is there any particular reason/advantage behind that?
- xiaoma 14y agoI 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.