It would have been awesome seeing this being created.. Did he start out with a large version? Did he refactor the whole thing a lot? What functional compromises did he have to make and which were the most creative ways of drastically shortening it? No matter how useful or not it is for others, its an amazing feat, I'm sure his brain got working.., well done!
I started out writing it as straightforward as possible, then applied functional tricks to slim it down. That was a lot of fun. I'm not sure how to post a code snippet here, but I'll try to illustrate one of my favorite portions.
In the original, I did key input with a switch statement. That got replaced by:
"But wait!" you're thinking, "What happens when e.keyCode is less than 37 or more than 40?" What happens is it evaluates to undefined, and it errors out in the M() function, effectively short-circuiting it. If you look in your browser's error log, it'll spew an error every time you hit another key. It's lazy, but it works. :]
l is ignored, so you can remove it (and the part where you pass it in from the engine). This code still works because s has global scope, but that looks like an accident.
I guess the "right" thing to do would be to rename s to l here, but when you're trying to fit stuff into 4K that's not the main concern :)
Cool program by the way, I'm impressed with how clear the code remained.
You should queue inputs. If you press left-down the snake should turn left and then go down on the next frame. That is, if you are attempting to recreate the classic Nokia experience, anyway.
>That is, if you are attempting to recreate the classic Nokia experience, anyway.
Wow, it is interesting that "the reference" for the snake game is the one in a Nokia mobile phone. The reference for me is the BASIC implementation that (I think) came with a version of Microsoft DOS some time ago.
There was a version called "Nibbles" that came with QBasic (Which in turn came with DOS 5). It also had another artillery style game called Gorillaz.
I guess the nokia implementation is considered the reference because it had the install base and must have wasted hundreds of thousands of hours worldwide.
IIRC the DOS version was pretty much unknown unless you happened to scour your disk for .BAS files.
I thought about it. It's been so long since I've played Nokia snake that I didn't remember whether it queued inputs or not. I decided not to bother since it would make input handling more complicated.
Off-topic: what happened to your brisy.info/colors ??? I enjoyed that quite a lot, had it bookmarked and used it as my homepage. It's gone as of a few days ago and now the site just redirects to Github.
Nice code! There are 4 functions that can be collapsed to save some space, since they're only called once. Also assigned document.body & setTimeout to vars. Brings the size from 1090 to 966...nice to be less than 1kb!
Aw, doesn't work in Opera. But a great idea. This reminds me of the time when I was young and worked in a small IT department in a local company. Most of the time it was boring, but installing games on the machines was forbidden. So I coded a set of Excel Macros to play Snake on an Excel cheat. Good times, we even had an internal high score list right in there; half the department joined :)
Ah, I used 11.60. It just came out a few days ago, and it may have added bind(). I seem to recall they added some ES5 features in this release. Go upgrade! :]
The most interesting thing about this is you can use plain text in data URIs. For some reason I assumed it had to be base64 encoded, but apparently only for binary data.
If the Hello version works, the smaller version should work too. The <pre> will be 1-line high on HTML5 browsers, not window high, so you have to click the very top of the page body for it to focus.
(If that still doesn't work, out of curiosity, what browser are you using?)
Oh! Looks like we found a most unexciting difference in Fx's and Chrome's HTML5 rendering engines. Someone alert the authorities!
What's happening is in fact a little bit more complex than that. Both browsers create the pre element (you can verify that by typing that URI and hitting the tab key to switch focus from the address bar into it).
Now, where Chrome renders a line-sized pre element even when it's empty, Firefox renders it as a 0px element until you feed text into it (that's probably its standard behaviour for pre elements without a child text node, but I can't be bothered verifying that).
Boy, I love getting a rush out of figuring out something completely irrelevant! :-)
Weird you guys are having problems because it scans perfectly using the standard barcode scanner app on my Desire S (running MIUI):
http://www.armyofcrabs.com/qrsnake.png
RL Classic on iPhone 4S correctly scanned the code, but did not launch a browser. Tried on iPad 2 last night and safari didn't render it properly, anyway.
I've merged in your changes and made a few improvements, too. I streamlined the timeout handling so that it uses setTimeout instead of clearing and resetting setInterval. I also used color literals instead of CSS rgb(). I removed the reset to black in I() since recreating the canvas context does that automatically.
Of course! It's been a while since I've done much javascript and I had forgotten about setTimeout. And your do/while loop in the R() function is much cleaner than my hack. :)
One thing I noticed is that you're setting the timeout value to 350-s.length*5. As the grid is 16x16, the maximum snake length will be 256. Multiplying the length by 5 will soon make the game humanly unplayable somewhere around a length of 60.
Re-reading my comment, it's ambiguous what the "of course" refers to. What I meant: of course I should have used setTimeout rather than the lamer setInterval/clearInterval method.
Prior to implementing the s.length-based speed increase, I tried implementing a funkier frame-based gradual increase using a log scale. Ultimately, that proved to be not worth the effort as speeding it up in proportion to how many pellets were eaten was a more natural fit. So that variable is a leftover and should have been deleted.
Far more interesting start to the day than when I woke up the other day dreaming of how to get culture codes into my .net application for a foreign website we are building...
I read somewhere that most browsers have a practical limit to what you can paste in. What I should have written was that it would fit in an address bar. shrug
The "data:" URL scheme is only useful for short values. Note that
some applications that use URLs may impose a length limit; for
example, URLs embedded within <A> anchors in HTML have a length limit
determined by the SGML declaration for HTML [RFC1866]. The LITLEN
(1024) limits the number of characters which can appear in a single
attribute value literal, the ATTSPLEN (2100) limits the sum of all
lengths of all attribute value specifications which appear in a tag,
and the TAGLEN (2100) limits the overall length of a tag.
These are references to (theoretical) limitations in HTML/SGML. They are not limitations of the data URL scheme.
Also note that bytex64’s page doesn’t use a link; it just shows the data URL so you can copy and paste it. Either way, none of the above limitations apply here.
TinyURL allows one to create http://tinyurl.com/7q3en34 -- but, alas, Chrome refuses to follow the redirect. Safari and Firefox don't seem to mind, though.
I don't know if I should have just been more patient waiting for levels, but this is way too slow.
If you guys want a playable experience, replace the literal 500 with 100 in the URL (careful using search and replace, there's also a 5000 literal, that's not the one I'm talking about).