Skip to content
👾 The original TETRIS game simulator
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 2283406 Apr 15, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Add time Jan 3, 2017
src Add time Jan 3, 2017
.gitignore Initial commit Dec 15, 2016
LICENSE Initial commit Dec 15, 2016
README.md Update README.md Jan 30, 2017
dev.html Performance optimizations Jan 3, 2017
gulpfile.js Performance optimizations Jan 3, 2017
index.html Swap controls Apr 15, 2018
manifest.json Performance optimizations Jan 3, 2017
package.json Performance optimizations Jan 3, 2017
sw.js Performance optimizations Jan 3, 2017

README.md

Demo GIF

Play 🎮 TETRIS

I made this small project to simulate the original 1984 version of TETRIS game. I saw a Youtube video showing the gameplay of this classic run on DVK-2 computer and thought I could implement it in browser and have some fun in the process.

To make it look similar to the old game, I made it entirely text based, meaning that every frame of the game animation is rendered into a string of text with 25 rows of 80 chars and looks like this:


ROWS HIT:             11    ‹! . . . . . . . . . .!›                            
SCORE:               980    ‹! . . . . . . . . . .!›      UP ARROW: ROTATE      
LEVEL:                 2    ‹! . . . . . . . . . .!›    DOWN ARROW: SOFT DROP   
                            ‹! . . . .▮▮ . . . . .!›      SPACEBAR: HARD DROP   
                            ‹! . . . .▮▮▮▮ . . . .!›        ESC, P: PAUSE       
                            ‹! . . . .▮▮ . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                    ▮▮▮▮▮▮▮▮‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . . . . .!›                            
                            ‹! . . . . . . .▮▮▮▮▮▮!›                            
                            ‹!▮▮▮▮ . . .▮▮ .▮▮▮▮▮▮!›                            
                            ‹!▮▮▮▮ .▮▮▮▮▮▮▮▮▮▮▮▮▮▮!›                            
                            ‹!====================!›                            
                              \/\/\/\/\/\/\/\/\/\/                              

Basic setup code:

TETRIS.on({
  nextFrame: function( frame ) {
    // replace HTML special chars
    frame = frame.replace( /[ <>]|\n\r/g, function( m ) { return {
      " ": "&nbsp;",
      "<" : "&lsaquo;",
      ">" : "&rsaquo;",
      "\n\r" : "<br>" }[ m ] })

    document.body.innerHTML = frame
  }
})

addEventListener( "keydown", function( e ) {
  TETRIS.pressKey( e.keyCode )
})

Check the play.js for more advanced code.

Audio

I extracted some audio effects from the original video and integrated them into the demo using Web Audio API.

Progressive Web App

The play page is served as a PWA, so you can play the game offline.

Leaderboard

I also made a simple microservice to store best scores of the play page.

You can’t perform that action at this time.