Miniature Javascript Tetris

Question

I am trying to write a miniature version of Tetris that adheres to the Tetris guidelines as much as possible:

• http://tetris.wikia.com/wiki/Tetris_Guideline
• http://tetrisconcept.net/wiki/Tetris_Guideline

To be precise I want the complete game to be constructed of as little as possible 140 byte javascript. The first 140 byte script should return an array with 112 integer values that represent the 4 rows of the 7 tetrominos in each of the 4 rotated positions. The exact position order of the rotations is very important.

I got as far as putting the data in 16bit unicode characters (they count as 2 bytes though) and unpacking in just over 140 bytes.

Does anyone know a clever way of constructing this array?

var s="ༀ∢ð䑄࣠لâьˠцèౄ٠٠٠٠ۀѢlࣄӠѤäӄౠɤÆӈ",m=[];for(i=0;i<28;i++){c=s.charCodeAt(i);for(j=4;j>0;){m.push(c>>(4*--j)&15)}return m}

    I tetrimino
    Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │■│ │     │ │ │ │ │     │ │■│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│■│■│■│     │ │ │■│ │     │ │ │ │ │     │ │■│ │ │
    ├─┼─○─┼─┤     ├─┼─○─┼─┤     ├─┼─○─┼─┤     ├─┼─○─┼─┤
    │ │ │ │ │     │ │ │■│ │     │■│■│■│■│     │ │■│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │ │■│ │     │ │ │ │ │     │ │■│ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 0F00     Hex: 2222     Hex: 00F0     Hex: 4444

     J tetrimino
     Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│ │ │ │     │ │■│■│ │     │ │ │ │ │     │ │■│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│●│■│ │     │ │●│ │ │     │■│●│■│ │     │ │●│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │■│ │ │     │ │ │■│ │     │■│■│ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 08E0     Hex: 0644     Hex: 00E2     Hex: 044C

     L tetrimino
     Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │■│ │     │ │■│ │ │     │ │ │ │ │     │■│■│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│●│■│ │     │ │●│ │ │     │■│●│■│ │     │ │●│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │■│■│ │     │■│ │ │ │     │ │■│ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 02E0     Hex: 0446     Hex: 00E8     Hex: 0C44

     O tetrimino
     Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │■│■│ │     │ │■│■│ │     │ │■│■│ │     │ │■│■│ │
    ├─┼─○─┼─┤     ├─┼─○─┼─┤     ├─┼─○─┼─┤     ├─┼─○─┼─┤
    │ │■│■│ │     │ │■│■│ │     │ │■│■│ │     │ │■│■│ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 0660     Hex: 0660     Hex: 0660     Hex: 0660

     S tetrimino
     Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │■│■│ │     │ │■│ │ │     │ │ │ │ │     │■│ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│●│ │ │     │ │●│■│ │     │ │●│■│ │     │■│●│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │ │■│ │     │■│■│ │ │     │ │■│ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 06C0     Hex: 0462     Hex: 006C     Hex: 08C4

     T tetrimino
     Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │■│ │ │     │ │■│ │ │     │ │ │ │ │     │ │■│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│●│■│ │     │ │●│■│ │     │■│●│■│ │     │■│●│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │■│ │ │     │ │■│ │ │     │ │■│ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 04E0     Hex: 0464     Hex: 00E4     Hex: 04C4

     Z tetrimino
     Spawn         Rotate90      Rotate180     Rotate270
    ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐     ┌─┬─┬─┬─┐
    │ │ │ │ │     │ │ │ │ │     │ │ │ │ │     │ │ │ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │■│■│ │ │     │ │ │■│ │     │ │ │ │ │     │ │■│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │●│■│ │     │ │●│■│ │     │■│●│ │ │     │■│●│ │ │
    ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤     ├─┼─┼─┼─┤
    │ │ │ │ │     │ │■│ │ │     │ │■│■│ │     │■│ │ │ │
    └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘     └─┴─┴─┴─┘
    Hex: 0C60     Hex: 0264     Hex: 00C6     Hex: 04C8

Leaved

possible duplicate of Code Golf: Playing Tetris – Osi

Hi Blender, no thats a completely different thing there. That was a contest of tetromino fitting not a real game. Regards, Jacco – Leaved

Not directly related, but do you mind me asking where the contest is? I haven't been able to find any active groups for JS golf. – Tainataint

No current contest. Am just cooking up some nice 140s for submission on 140byt.es – Leaved

Answer 1

You might want to keep in mind that a more clever encoding scheme for this array will result in longer decoding logic, so trying to optimize this too much may be penny wise and pound foolish. However, having written a tetris game in JavaScript once myself (albeit not size-optimized), I know that it's not really hard to write a function to rotate each shape n times. Assuming you're not heavily speed-constrained, why not only have a LUT entry for each shape in the default orientation, and rotate them prgrammatically? You may find that this results in less overall space used (specifically, if the rotation/transpose code size is less than 3/4 of the array size).

EDIT: An additional benefit to doing it this way is that you don't have to keep track of the rotation state of a shape on the grid, you just need to keep track of its current array. When someone rotates, rotate the array with your function. This eliminates the need to do a check (e.g. if rotation > 3, rotation = 0).

Poplin

Thanks for your comment! I have seen solutions like that and it would not be hard if the rotation centers of the tetrominos was not different for some of the tertominos (I and O). – Leaved

I was hoping someone would come up with some magic numbers from polynomino game theory or something. Most tetrominos only need 3 bits to be rotated from one state to the next. I tried a lot of things but as you say its hard to come up with something that fits the 140 bytes data+unpacking :-) – Leaved

That's a good point. Looking back at my code, I stored each shape sprite as its own rectangular sub-array withing a larger array, so each was sized at the smallest rectangle that it would fit inside. This allowed me to rotate them easily, but I'm not sure if it would meet your needs. – Poplin