uiTetris

by uiwwnw

HTML

<button id="startBtn">스타트</button>
<canvas id="canvas1" data-index="0"></canvas>
<div></div>

CSS

html,
body {
  width: 100%;
  min-width: 380px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  text-align: center;
  font-size: 0;
  background: #000;
}

body:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: '';
}

button {
  padding: 2vmin 4vmin;
  font-size: 10vmin;
  color: #000;
  background: #fff;
}

canvas {
  z-index: 2;
  position: relative;
  display: none;
  vertical-align: middle;
  border: 1px solid #fff;
}

canvas[width] {
  display: inline-block;
}

canvas+canvas {
  margin-left: 100px;
}

JavaScript

function uiTetris() {
  'use strict';
  var pixel = 25,
    width = 10,
    height = 20,
    score = 15,
    player = [],
    colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'],
    shape = {
      a: [
        [
          [1, 1, 1],
          [0, 0, 1],
        ],
        [
          [0, 1],
          [0, 1],
          [1, 1],
        ],
        [
          [1, 0, 0],
          [1, 1, 1],
        ],
        [
          [1, 1],
          [1, 0],
          [1, 0],
        ],
      ],
      b: [
        [
          [0, 1, 0],
          [1, 1, 1],
        ],
        [
          [1, 0],
          [1, 1],
          [1, 0],
        ],
        [
          [1, 1, 1],
          [0, 1, 0],
        ],
        [
          [0, 1],
          [1, 1],
          [0, 1],
        ],
      ],
      c: [
        [
          [1, 1, 1],
          [1, 0, 0],
        ],
        [
          [1, 1],
          [0, 1],
          [0, 1],
        ],
        [
          [0, 0, 1],
          [1, 1, 1],
        ],
        [
          [1, 0],
          [1, 0],
          [1, 1],
        ],
      ],
      d: [
        [
          [1, 1, 0],
          [0, 1, 1],
        ],
        [
          [0, 1],
          [1, 1],
          [1, 0],
        ],
      ],
      e: [
        [
          [1, 1],
          [1, 1],
        ],
      ],
      f: [
        [
          [0, 1, 1],
          [1, 1, 0],
        ],
        [
          [1, 0],
          [1, 1],
          [0, 1],
        ],
      ],
      g: [
        [
          [1, 1, 1, 1],
        ],
        [
          [1],
          [1],
          [1],
          [1],
        ],
      ],
    };
  var playerNumber = (function ask() {
    var n = prompt('플레이할 인원을 숫자로 적어주세요. 1 or 2');
    return isNaN(n) || +n > 2 || +n < 1 ? ask() : n;
  }());
  tetris(playerNumber);

  function tetris(players) {
    for (var i = 0; i < players; i++) {
      makePlayGround();
      player[i].canvas = document.getElementById('canvas' + Number(i + 1));
     ...