A game whose source code fits in one tweet | Hacker News Reader

A game whose source code fits in one tweet

github.com

162 pointseigenbom53 comments

Open articleView on HN

If you liked this then you might find my Python one liner games interesting [1]. They fit a tweet in most cases.

[1]: http://arunrocks.com/python-one-liner-games/

These are pretty neat and very concise! :D

For some reason copy-pasting some of those into iTerm2 doesn't work.

http://i.imgur.com/GEMAeM8.png

not on a mac myself, but make sure to use python 3

   python3 -c "import random;p=lambda:random.choice('7♪♫♣♠♦♥◄☼☽');[print('|'.join([p(),p(),p()]),end='\r') for i in range(8**5)]"

I like that lambda trick. I was hoping Crash would actually crash the program so you could tell if you won by looking at the error it gives (if its KeyboardInterrupt or something else).

Here's mine.

  $ python -c 'import random;L=sorted(str(random.randint(1,9)) for i in range(4));a=raw_input(L);print(eval(a)==24,sorted(filter(str.isdigit,a))==L)'
  ['2', '6', '7', '8']8*(7+2-6)
  (True, True)

Try to make it print (True, True) without abusing eval too much (intended to be +-*/() only with digits as tokens).

A nicer interface, but too long:

  import random;L=sorted(str(random.randint(1,9)) for i in range(4));a=raw_input(" ".join(L)+"\n> ");print(eval(a)==24,sorted(filter(str.isdigit,a))==L)

I'm sorry I'm a dirty cheat: http://fetchh--captured.s3.amazonaws.com/Monosnap_2015-06-30...

    while(true){f()}

OP can save a few more characters by not using 'var' and using 'E' notation for representing 15000, i.e, 15E3, or better, 2E4.

Could also use `!0` for `true`.

He could use the savings to close that <p> tag.

It isn't XHTML. Closing <p> tags are optional (which is true for many tags). You don't even need opening HTML, HEAD or BODY tags.

That's only true in very specific cases: https://developer.mozilla.org/en/docs/Web/HTML/Element/p

The start tag is mandatory. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.

And "there is no more content in the parent element" applies here.

Actually, what you call "very specific cases" are in fact, well, all reasonable cases. That list consists of all block level elements that can appear in `body`, so the statement could be reworded, that "<p> cannot contain any block-level element, so any inline element after <p> falls in, any block level element ends opened <p>".

Funny fact is that presence of optional end tags means nearly nothing for HTML parsers used in current browsers, they just ignore them. Some border cases regarding white space exists, or at least existed in the past, but in general, if you feed browser with document

    <!doctype html><html><head><title>a</title></head><body><table><tbody><tr><td><p>b</p></td></tr></tbody></table></body></html>`

    <!doctype html><title>a</title><table><tr><td><p>b</table>`

makes absolutely no difference. Both will result in exactly same DOM tree, both are "100% valid W3C HTML documents".

He can save 14 more if instead of creating a function he copies the function content inside of 'onclick'. And he can save one by using +new Date instead of Date.now().

Better yet, set a variable to Date.now since it's called twice.

It's called at different times so will return different values, which is important.

They meant something like "var n = Date.now".

However, there is no guarantee that this will work since it assumes that `this` isn't used by that function.

E.g. if you want to do something like that with console.log or document.querySelector, you have to use bind:

  var log = console.log.bind(console);
  var qs = document.querySelector.bind(document);

a = Date.now; b = a(); c = a();

Author here - I'll implement some of these suggestions and see if the extra space might allow for something a little more interesting. It's a pleasant surprise to see a pull request on this little thing.

Cool! some suggestions:

- show it on http://www.reddit.com/r/tinycode/

- if you aim for low character count instead of low byte count, you can pass your code through my unicide packer here: http://xem.github.io/obfuscatweet/

- Golf your code even more (using the tips of the other comments), and use all the remaining chars to add features to your game and fill the 140 chars of a tweet :)

Cheers

I cut the size down by 39 bytes in https://github.com/omnus/tiny-twitch/pull/1. You can trade 36 of those bytes for “legal HTML 5” status, too.

A few of us were doing this over on Twitter, with the typical "guess a number" games. But Alex's was the best so far! I built a few games, but all of them were too big.

Here's a 2048/Threes-clone in <700 characters (or 5 tweets): https://twitter.com/eigenbom/status/615424395192877056

Cute; I didn't realize that the element's ID implicitly mapped it to a javascript variable in Chrome.

Can anyone speak a bit more to that? I was wondering if this was just a convenience feature that browsers added or something that has been in Javascript all along?

Has been like this for as long as I can remember (at least back to IE6).

Yup - in fact there's an old bug that jQuery (in versions < 2, I believe) accounts for where IE would return elements with a name equal to the id you're searching for as the underlying system there was all wonky.

e.g:

    <input name="test">
    <div id="test">

    document.getElementById('test'); // <input> in IE6

I believe this also wound up in some Webkit and Opera releases, perhaps for emulation. Someone more knowledgeable about it all should feel free to correct me if I'm wrong though.

(Edited for code formatting, I don't comment too much these days)

yay, I wrote an article about that!

http://xem.github.io/articles/#implicitgetelementbyid_en

Cheers :)

It's an old browser feature. I think the idea was so you could easily reference other elements in inline-HTML event handlers (onclick= etc.).

Personally I find it handy for messing around in jsfiddle and the like:

    <pre id="out"></pre>

    [...]
    out.innerHTML += some_result;

Was half expecting this to be:

curl http://www.hackerz-r-us.ru/really_awesome_game.sh | sudo bash #YouveBeenP0wnd

One thing I've always meant to do was to put together a system for loading and saving Sinclair ZX81 games via Twitter messages.

Depending on how much you cheat, you can get about two bytes of data per Twitter character. That'd allow 256 bytes of game to live comfortably within a single twit, which is a quarter of an unexpanded ZX81 RAM. By comparison, that would take almost ten seconds to load off tape. You should be able to get a respectable ZX81 game in that.

With something like the JtyOne Javascript ZX81 emulator (http://www.zx81stuff.org.uk/zx81/jtyone.html) and some Twitter interaction, the whole process should be pretty seamless --- click on a twit to play; modify it using the ZX81's built-in cough IDE; click on a button to reshare...

And that kept my interest for about 140 seconds. Pretty damn good character:fun ratio. Bravo!

If you're interested in really small games, the smallest game is Chess written in 487 bytes of x86 machine code: http://www.pouet.net/prod.php?which=64962 Source code here: http://olivier.poudade.free.fr/src/BootChess.asm

I'm not really a gamer, but I do love me some synth one-liners:

http://countercomplex.blogspot.co.at/2011/10/algorithmic-sym...

Most of these would also fit in a single tweet ..

It's OT but I can't resist: I recently found out that a selection of these little "synths" have been implemented in the chipsounds VST instrument using its bandlimited oscillators. You can play them up and down the keyboard and they sound awesome.

http://www.plogue.com/products/chipsounds/

Wow, that is really lovely .. thanks for pointing that out!

(I'm really more of a hardware guy myself, love to strip the SID's from any C64's I find in the trash .. and of course synths (analog and digital) are really a different subject altogether .. but I'll check out chipsounds on a DAW next time I get a chance. Ta!)

You will enjoy their blog: http://ploguechipsounds.blogspot.co.uk/

You are correct! Thank you!

What exactly is happening here: "a.style.margin=++s+e%300"? (Specifically, the "++" part.)

increments `s` before evaluating the expression and adds it to (e % 300)

++ will increment s before the new margin is set.

    s += 1
    a.style.margin = (s + e) % 300

Increment global state variable, add it to e, which is the number of milliseconds the game has been running modulo 300. Then set the margin size to that value. It's a simple pseudo-pseudorandom number generator.

In case any one was wondering the difference between "s++" and "++s" (the former of which is probably more common), prepending the "++" increments the variable before returning it, whereas appending it would increment after returning the value.

The code you posted is essentially equivalent to "s = s + 1; a.style.margin = s + e % 300".

Reminds me of a game I made while learning to code:

http://lalwanivikas.github.io/window-game/

(Concept inspired from Jennifer Dewalt's project, but code is entirely mine :))

Doesn't actually fit in a tweet. 12 characters too long...am I missing something?

I think the . expands to a url so you have to use the zero-width space trick.

Reminds me when my father showed me "number guessing" game on TI-57 calculator. It had 50 instructions (button presses) of memory. It's interesting that the size wasn't that a big deal then. :-)

Totally exploiting the fact invalid HTML is accepted by modern browsers. :P

Somewhat, but it can still be fitted in legal HTML 5 in 137 bytes:

    <!DOCTYPE html><title>X</title><script>s=0,t=Date.now()</script><p onclick="(e=Date.now()-t)<15e3?style.margin=++s+e%300+'px':alert(s)">X

(Note that the original version is at least 36 bytes larger than it need be: https://github.com/omnus/tiny-twitch/pull/1)

A few years ago I put a tiny game in a data uri in a QR code, unfortunately I lost the QR code, but I thought it was a neat concept.

Shorter version: <p onclick=n=Date.now;id||(t=n(id=s=0));(e=n(++s)-t)<2E4?style.margin=e%300:alert(s)>X

This game makes me feel like a cat.

increments s before doing the rest of the calculation?

All that matters is that s changes for each call. It really doesn't matter what the value is or how it changes. In this case incrementing afterwards would be "s+++e%300" which looks gross and using any parenthesis for clarity would take up more space.

Reply on news.ycombinator.com