Binary Tetris - 140byt.es

README.md

Binary Tetris - 140byt.es

A simplified variant of the classic tetris game done in less that 140 bytes of JavaScript.

Example Layout

1.       2.       3.       4.       5.

.....    .....    .....    .....    .....
.....    .....    .....    .....    .....
...##    .....    .....    .....    .....
.....    ...##    .....    .....    .....
##...    ##...    ##.##    ##...    .....
###..    ###..    ###..    #####    ##...

Play the demo at http://jsbin.com/egiqul/49 and feel free to edit the source!

More Information

The main logic to move blocks, detect collision, assign new blocks, remove full lines and render the layout are included. Excluded are keyboard controls and the final rendering.

This version is heavy based on binary numbers and bit shift operators. I had to limit the board size to 5x6 (30 bits), because JavaScript converts numbers to 32-bit integers when using bitwise operators. The two left bits are later uses to add the correct padding when dealing with numbers that start with "0".

Basic Concept

The Board

                  00000         .....
798               11000   =>    ##... 
                  11110         ####.

The Block

3                 00011  =>     ...##

Checking for Collision

                  00000         .....
798&3 = 2         00000  =>     .....
                  00010         ...X.

Moving the Block at X Axis

3 << 1 = 6        00110   =>    ..##.

Moving the Block at Y Axis

                  00011         ...##
3<<10 = 3072      00000   =>    .....
                  00000         .....

Combining Block and Board

                  00011         ...##
798|3072 = 3870   11000   =>    ##...
                  11110         ####.

Find full line (using base 32)

                  00011         3
3999              11100   =>    s
                  11111         v

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

annotated.js

function (
  
  a,  // current board
  b,  // current block
  c,  // current position
  d,  // new block offset for position
  
  e   // placeholder: the layout to return
){
  
  return 
  
    d += c,                     // add offset to position
                                
    e = a | b << d,             // render layout based on board and moved block
                                
    d < 0  |  a & b<<d          // check if block touches bottom line 
                                // or if block collide with board ...
                                
    && (                           // ... if so ...
                                
      a = e =                       // assign new board and layout
        parseInt(                   // convert back from base 32 
                                    
          ( a | b << c )            // get board based on last position
            .toString(              // convert board to base 32 (2^5)
              d = 32                // reset block position to top (32)
            )         
            .replace(/v/, ""),      // remove filled line ("v" = 11111)
                                    
          d                         // base 32 (2^5) for parseInt
        ),                          
                                    
      b = new Date % 2 ?            // generate new block for next round
        1 :                         // single "#" (1 => 1)
        3                           // double "##" (3 => 111)
    ),
    
    [                           // the final return 
      a,                        // new board
      b,                        // new block
      d,                        // new position
      e                         // final layout to render
    ]
}

index.js

function(a,b,c,d,e){return d+=c,e=a|b<<d,d<0|a&b<<d&&(a=e=parseInt((a|b<<c).toString(d=32).replace(/v/,""),d),b=new Date%2?1:3),[a,b,d,e]}

LICENSE.txt

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

package.json

{
  "name": "tetris",

  "description": "A binary variant of the classic Tetris game.",

  "keywords": [
    "tetris",
    "game",
    "binary"
  ]
}

test.html

<html>
<style>body{ font-family: monospace; font-size: 20px}</style>
<div id="output"></div>
</html>

<script>
var t =
function(a,b,c,d,e){return d+=c,e=a|b<<d,d<0|a&b<<d&&(a=e=parseInt((a|b<<c).toString(d=32).replace(/v/,""),d),b=new Date%2?1:3),[a,b,d,e]}

// Controller and Display

var out = document.getElementById("output");

var board = 0,
    block = 3,
    position = 32,
    display;

function update(offset){
  
  var txt = "",
    result = t(board,block,position, offset);
    
  board = result[0];
  block = result[1]
  position = result[2]
  display = result[3];

  display = ( 1<<30 | + display ).toString(2);
  
  for(var i=1; i<31;i++){
    txt += display[i] == "1" ? "#" : ".";
    if(i%5 == 0) txt+= "<br>"; 
  }
  
  out.innerHTML = txt;
}

update(0);

onkeydown = function(e){
  
  var offset = 0;
  
  switch (e.keyCode){
    case 37: offset =  1; break; 
    case 39: offset = -1; break; 
    case 40: offset = -5; break; 
  }
  
  update(offset);
}

var speed = 1000;

function loop(){
  update(-5);
  setTimeout(loop, speed-=5);
}
  
loop();

</script>