JSFiddle - React, Tailwind, and code Playground

by ilyautkin

HTML

<div id="tetris">
  <span id="start-btn">START</span>
</div>

CSS

#tetris {
  display: inline-block;
  width: 264px;
  height: 440px;
  border: 2px solid #000;
  line-height: 0px;
  background: #000;
}
#tetris b, #tetris i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
  border: 1px solid #333;
}
#tetris i {
  background: #fff;
  border-color: #999;
}
#start-btn {
  display: block;
  width: 30%;
  margin: 70% auto 0;
  padding: 20px;
  background: #eee;
  text-align: center;
  cursor: pointer;
}
#start-btn:hover {
  background: #fff;
}

JavaScript

var Tetris = {
  config: {
    pitchID: "tetris",
    freeBrick: "<b></b>",
    filledBrick: "<i></i>"
  },
  pitch: {
    width: 12,
    height: 20,
    bricks: [],
    getDom: function() {
      return document.getElementById(Tetris.config.pitchID);
    }
  },
  figure: {
		coords: [],
    create: function() {
      this.coords = [0,6];
    }
  },
  startBtn: document.getElementById('start-btn'),
  init: function() {
    for (var i = 0; i < Tetris.pitch.height; i++) {
      Tetris.pitch.bricks[i] = [];
      for (var j = 0; j < Tetris.pitch.width; j++) {
        Tetris.pitch.bricks[i][j] = 0;
      }
    }
    Tetris.startBtn.onclick = function () {
			Tetris.tick();
    }
  },
  tick: function() {
    if (Tetris.figure.coords.length == 0) {
      Tetris.figure.create();
    }
    Tetris.draw();
    if (Tetris.figure.coords[0] >= Tetris.pitch.height - 1) {
    	clearInterval(Tetris.tickHandler);
    }
    Tetris.figure.coords[0]++;
    if (Tetris.tickHandler === undefined) {
      Tetris.tickHandler = setInterval(function(){
        Tetris.tick();
      }, 1000);
    }
  },
  draw: function() {
    var tetrisDom = Tetris.pitch.getDom();
    tetrisDom.innerHTML = '';
    for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
      for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
        if (Tetris.pitch.bricks[i][j] ||
           (Tetris.figure.coords[0] == i &&
            Tetris.figure.coords[1] == j )) {
          tetrisDom.innerHTML += Tetris.config.filledBrick;
        } else {
          tetrisDom.innerHTML += Tetris.config.freeBrick;
        }
      }
    }
  }
};
Tetris.init();