Play Tis here, with the source code in the background.
Tis is a self-contained Tetris® clone in 4 kB of pure JavaScript (ECMAScript 5). This includes code to generate the necessary HTML markup and inline CSS.
Tis can be embedded into any web page by simply adding a <script>
tag. It can
then be invoked as an easter egg using the Konami code.
Tis has nearly all of the features you might expect from a modern Tetris:
Simply grab tis.min.js
from this repository, put it on your webserver
somewhere, and put the following just before the </body>
tag in your HTML:
<script src="https://github.com/ttencate/tis/raw/master/path/to/tis.min.js"></script>
Visitors of your web page will now get a nice surprise when they type the Konami code.
To keep the code at least somewhat sane, it relies on UglifyJS for variable renaming, brace removal and more such niceties. However, there was still plenty to be done by hand. This section describes some of the tricks used.
'<div style="margin:'
.pc
instead of px
in the CSS; one pica is 16 pixels.#fff
-style hex values
(without the #
of course), separated by the character 9
. We use a digit
because it doesn't require quotes when passing to Array.split()
.1e3
) samples.window
, document
) and of frequently used
fields/methods are stored in variables to make access shorter.document.getElementById(...)
, use the fact that element IDs are
also registered on the window
object: window[...]
.var
declarations are costly, do them only once at the top-level
scope, and reuse variables as much as possible. This does make it difficult
to safely invoke functions.function
is an awfully long
word that cannot be shortened.undefined
be the desired initial value of variables as much as
possible, so we don't need to initialize them.for(i in a)
syntax as an alternative to for(i=0;i<n;i++)
.
However, this isn't always shorter, because the traditional for
loop lets
you put more stuff inside the initialization, condition and increment part.x++;y=2*x
write y=2*x++
.x>=0&&x<4
, write !(x&~3)
. This works even if x
is negative.~~(a+b)
instead of Math.floor(a+b)
to cast to integer. 0|(a+b)
also
works.9
is better than 10
, 99
better than
100
.switch
/case
is extremely verbose, especially if you need break
(i.e.
almost always). Just use if
/else if
instead.goto
-like label, to break
out of two for
loops at the
same time. This is the only thing labels in JavaScript can be used for.