Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Binary Tetris - 140byt.es

Binary Tetris - 140byt.es

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

Click here to play the DEMO!

NEW: A standalone version in 300 bytes: aem1k.com/tetris

Source

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

Feel free to edit the source and follow me on Twitter (@aemkei).

Example Layout

1.       2.       3.       4.       5.

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

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.

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
]
}
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]}
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.
{
"name": "tetris",
"description": "A binary variant of the classic Tetris game.",
"keywords": [
"tetris",
"game",
"binary"
]
}
<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>
@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 27, 2012

Binary Tetris! Once again @aemkei makes amazing stuff!
(Sorry that I'm being tired, maybe I'll dig into it tomorrow).

tsaniel commented Jan 27, 2012

Binary Tetris! Once again @aemkei makes amazing stuff!
(Sorry that I'm being tired, maybe I'll dig into it tomorrow).

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 27, 2012

Save 1 byte.
function(a,b,c,d,e){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);return[a,b,d,e]}

By the way, the snippet has some bugs.

And what about replacing b=new Date%2?1:3 with b=new Date&2|1?

tsaniel commented Jan 27, 2012

Save 1 byte.
function(a,b,c,d,e){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);return[a,b,d,e]}

By the way, the snippet has some bugs.

And what about replacing b=new Date%2?1:3 with b=new Date&2|1?

@aemkei

This comment has been minimized.

Show comment Hide comment
@aemkei

aemkei Jan 27, 2012

Nice reordering!

I know about some bugs in the display, when the block moves to far to the left or right. It generates some flickering in the output. Maybe we can save some bytes to get the missing handlers into the 140 bytes!

Or did you found some errors in the logic?

Owner

aemkei commented Jan 27, 2012

Nice reordering!

I know about some bugs in the display, when the block moves to far to the left or right. It generates some flickering in the output. Maybe we can save some bytes to get the missing handlers into the 140 bytes!

Or did you found some errors in the logic?

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 27, 2012

No, temporarily just found the bug that you just mentioned.

tsaniel commented Jan 27, 2012

No, temporarily just found the bug that you just mentioned.

@maettig

This comment has been minimized.

Show comment Hide comment
@maettig

maettig Jan 27, 2012

I'm looking at the code and ... just wow!

Edit: Save 1 byte?

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(32).replace(/v/,""),32),b=new Date%2?1:3),[a,b,d,e]}

maettig commented Jan 27, 2012

I'm looking at the code and ... just wow!

Edit: Save 1 byte?

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(32).replace(/v/,""),32),b=new Date%2?1:3),[a,b,d,e]}
@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 27, 2012

@maettig: It seems you forget the d in [a,b,d,e].

tsaniel commented Jan 27, 2012

@maettig: It seems you forget the d in [a,b,d,e].

@aemkei

This comment has been minimized.

Show comment Hide comment
@aemkei

aemkei Jan 27, 2012

Right, we need to reset d to 32 when a collision was detected.
But the reordered version and new Date&2|1 will save 3 bytes:

function(a,b,c,d,e){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);return[a,b,d,e]}
Owner

aemkei commented Jan 27, 2012

Right, we need to reset d to 32 when a collision was detected.
But the reordered version and new Date&2|1 will save 3 bytes:

function(a,b,c,d,e){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);return[a,b,d,e]}
@Evghenusi

This comment has been minimized.

Show comment Hide comment
@Evghenusi

Evghenusi Jan 28, 2012

I have not delved into the logic, for which I apologize in advance.
parseInt can not be replaced by +?

I have not delved into the logic, for which I apologize in advance.
parseInt can not be replaced by +?

@xpansive

This comment has been minimized.

Show comment Hide comment
@xpansive

xpansive Jan 28, 2012

@Evghenusi It could normally, but it's being parsed in base 32. ""+x only works for base 10 numbers.

@Evghenusi It could normally, but it's being parsed in base 32. ""+x only works for base 10 numbers.

@Evghenusi

This comment has been minimized.

Show comment Hide comment
@Evghenusi

Evghenusi Jan 28, 2012

thanks

thanks

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 28, 2012

Updated: Save 7 bytes by using ?: instead of &&() and reusing variable c:
function(a,b,c,d){d+=c;c=d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=new Date&2|1).replace('v',''),d):a|b<<d;return[a,b,d,c]}

tsaniel commented Jan 28, 2012

Updated: Save 7 bytes by using ?: instead of &&() and reusing variable c:
function(a,b,c,d){d+=c;c=d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=new Date&2|1).replace('v',''),d):a|b<<d;return[a,b,d,c]}

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 28, 2012

Save 11 bytes by reordering variables:
function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=new Date&2|1).replace('v',''),d):a|b<<d,a,b,d]}

http://jsbin.com/egiqul/50/edit

tsaniel commented Jan 28, 2012

Save 11 bytes by reordering variables:
function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=new Date&2|1).replace('v',''),d):a|b<<d,a,b,d]}

http://jsbin.com/egiqul/50/edit

@aemkei

This comment has been minimized.

Show comment Hide comment
@aemkei

aemkei Jan 28, 2012

Nice! So it's down to 128 (2^7) bytes. (Edit: 124 now!) I didn't see the last comment.

Owner

aemkei commented Jan 28, 2012

Nice! So it's down to 128 (2^7) bytes. (Edit: 124 now!) I didn't see the last comment.

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 28, 2012

So it's 1<<7-1<<2 bytes.

tsaniel commented Jan 28, 2012

So it's 1<<7-1<<2 bytes.

@aemkei

This comment has been minimized.

Show comment Hide comment
@aemkei

aemkei Jan 28, 2012

How about using the 16 left bytes to fix the wrapping issue when moving to far left / right?
Or move the initial board/block state into the core function?

Owner

aemkei commented Jan 28, 2012

How about using the 16 left bytes to fix the wrapping issue when moving to far left / right?
Or move the initial board/block state into the core function?

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Jan 29, 2012

I would like to see both of them even if exceed 140 bytes. (we can shave the bytes off then)

tsaniel commented Jan 29, 2012

I would like to see both of them even if exceed 140 bytes. (we can shave the bytes off then)

@plaes

This comment has been minimized.

Show comment Hide comment
@plaes

plaes Feb 15, 2012

Just a little inspiration: http://bytex64.net/code/datasnake/

plaes commented Feb 15, 2012

Just a little inspiration: http://bytex64.net/code/datasnake/

@aemkei

This comment has been minimized.

Show comment Hide comment
@aemkei

aemkei Feb 15, 2012

@plaes: Have you seen https://gist.github.com/1449250 the 140byt.es version of Snake?

Owner

aemkei commented Feb 15, 2012

@plaes: Have you seen https://gist.github.com/1449250 the 140byt.es version of Snake?

@plaes

This comment has been minimized.

Show comment Hide comment
@plaes

plaes Feb 15, 2012

@aemkei I was hinting that it would be cool to see a data-uri version of this snippet..

plaes commented Feb 15, 2012

@aemkei I was hinting that it would be cool to see a data-uri version of this snippet..

@tsaniel

This comment has been minimized.

Show comment Hide comment
@tsaniel

tsaniel Feb 15, 2012

@plaes: What about make it an 140bytes entry? (just the logic part fitted in 140 bytes, as "Tweetris")

tsaniel commented Feb 15, 2012

@plaes: What about make it an 140bytes entry? (just the logic part fitted in 140 bytes, as "Tweetris")

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Feb 15, 2012

Excellent work!

ghost commented Feb 15, 2012

Excellent work!

@nathanpc

This comment has been minimized.

Show comment Hide comment
@nathanpc

nathanpc Feb 15, 2012

Awesome code mate. Congratulations!

Awesome code mate. Congratulations!

@kendhia

This comment has been minimized.

Show comment Hide comment
@kendhia

kendhia Feb 18, 2012

Awsome code. you made javascript more beautifull with this game !
Congrats!

kendhia commented Feb 18, 2012

Awsome code. you made javascript more beautifull with this game !
Congrats!

@interval1066

This comment has been minimized.

Show comment Hide comment
@interval1066

interval1066 Feb 19, 2012

Your licensing scheme is too restrictive.

Your licensing scheme is too restrictive.

@syntacticsugar

This comment has been minimized.

Show comment Hide comment
@syntacticsugar

syntacticsugar Feb 19, 2012

Oh Wow wow wow wow wow!!!!! I am shocked, amazed, and laughing my head off!

And then I saw the licensing scheme! I am highly offended by the licensing scheme for it is entirely too restrictive! :D :D Why don't you loosen it up and allow me to rip it off and claim it as my own???

<3 <3 <3 <3 <3 love everything! thanks! inspires me to pursue JavaScript!

Oh Wow wow wow wow wow!!!!! I am shocked, amazed, and laughing my head off!

And then I saw the licensing scheme! I am highly offended by the licensing scheme for it is entirely too restrictive! :D :D Why don't you loosen it up and allow me to rip it off and claim it as my own???

<3 <3 <3 <3 <3 love everything! thanks! inspires me to pursue JavaScript!

@jazcap53

This comment has been minimized.

Show comment Hide comment
@jazcap53

jazcap53 Feb 20, 2012

Beautiful.

Beautiful.

@xmxkkk

This comment has been minimized.

Show comment Hide comment
@xmxkkk

xmxkkk Feb 21, 2012

very awesome

xmxkkk commented Feb 21, 2012

very awesome

@xiangjian

This comment has been minimized.

Show comment Hide comment
@xiangjian

xiangjian Feb 21, 2012

awesome

awesome

@Gemberkoekje

This comment has been minimized.

Show comment Hide comment
@Gemberkoekje

Gemberkoekje Feb 21, 2012

I found you a bug if you keep holding the key to the left, it crashes, probably because the bits go off top. But other then that silly thing (The fact that I love breaking stuff) I have mad respect for doing it in 140 chars.

I found you a bug if you keep holding the key to the left, it crashes, probably because the bits go off top. But other then that silly thing (The fact that I love breaking stuff) I have mad respect for doing it in 140 chars.

@johnny-bui

This comment has been minimized.

Show comment Hide comment
@johnny-bui

johnny-bui Feb 21, 2012

amazing work.

amazing work.

@Nushooz

This comment has been minimized.

Show comment Hide comment
@Nushooz

Nushooz Feb 21, 2012

Hey you left out the control and display code. This game is like 900 bytes working. You're a phony! Hey everybody, this guy is a great big phony!

Nushooz commented Feb 21, 2012

Hey you left out the control and display code. This game is like 900 bytes working. You're a phony! Hey everybody, this guy is a great big phony!

@plicaplica

This comment has been minimized.

Show comment Hide comment
@plicaplica

plicaplica Feb 22, 2012

From the license:
"0. You just DO WHAT THE FUCK YOU WANT TO."

I just wanna fuck.

From the license:
"0. You just DO WHAT THE FUCK YOU WANT TO."

I just wanna fuck.

@iznax

This comment has been minimized.

Show comment Hide comment
@iznax

iznax Feb 23, 2012

I made a version with a larger play field and no edge wrap-around problems, but I can't quite get it down to 140 characters. http://jsbin.com/aparub/3

iznax commented Feb 23, 2012

I made a version with a larger play field and no edge wrap-around problems, but I can't quite get it down to 140 characters. http://jsbin.com/aparub/3

@huipengyu

This comment has been minimized.

Show comment Hide comment
@huipengyu

huipengyu Feb 26, 2012

HAHA, so cute,

HAHA, so cute,

@iznax

This comment has been minimized.

Show comment Hide comment
@iznax

iznax Feb 27, 2012

here's my full version of Tetris with rotating pieces, the core function is 255 characters. http://jsbin.com/ujewuk/2

function(p,r,t,g,z){var k,d=z[0];z=((r+z[1])&15)-r;for(k=4;k--;)if(g[p+d+t[r+z+k]]){if(d>1){for(k=4;k--;)g[p+t[r+k]]=1;for(k=0;k<N*Y;k+=Y){for(d=2;d<Y;)d=g[k+d]?d+1:F;if(d<F)for(d=k;--d;)g[d+Y]=g[d];}p=W/2;t=T[new Date%7]}d=z=0;break}return[p+d,r+z,t,g]}

iznax commented Feb 27, 2012

here's my full version of Tetris with rotating pieces, the core function is 255 characters. http://jsbin.com/ujewuk/2

function(p,r,t,g,z){var k,d=z[0];z=((r+z[1])&15)-r;for(k=4;k--;)if(g[p+d+t[r+z+k]]){if(d>1){for(k=4;k--;)g[p+t[r+k]]=1;for(k=0;k<N*Y;k+=Y){for(d=2;d<Y;)d=g[k+d]?d+1:F;if(d<F)for(d=k;--d;)g[d+Y]=g[d];}p=W/2;t=T[new Date%7]}d=z=0;break}return[p+d,r+z,t,g]}

@WYH2O

This comment has been minimized.

Show comment Hide comment
@WYH2O

WYH2O Aug 29, 2013

wow .It's good.

WYH2O commented Aug 29, 2013

wow .It's good.

@viktor-evdokimov

This comment has been minimized.

Show comment Hide comment
@viktor-evdokimov

viktor-evdokimov Nov 19, 2013

Can you guys please send me examples of small games like this, I want to create collection of links. Thanks. 30lines.info

Can you guys please send me examples of small games like this, I want to create collection of links. Thanks. 30lines.info

@ewerybody

This comment has been minimized.

Show comment Hide comment
@ewerybody

ewerybody Feb 28, 2017

this 140bytes website... maybe you should remove the link ;]

this 140bytes website... maybe you should remove the link ;]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment