Орутрис

by Victor Melnik

HTML

<label>
  <input id="chars" type="text" value="opy"/>
  <button id="update">Update</button>
</label>
<pre id="gamepanel">
                |       |
                | Next: |
                |       |
                |  о р  |
        о       |  о р  |
        р       |       |
        у у     |       |
                | Score |
                |  3228 |
                |       |
                |       |
                |       |
            р   |       |
о     р     у   |       |
р у о о     р о |       |
у р р у     о у |       |
----------------/       |
</pre>

CSS

#gamepanel {
    font-family: monospace;
    font-size: 14px;
}

JavaScript

let CHARS = 'opy';
const WIDTH = 10, HEIGHT = 20; // in cells
const INFO_WIDTH = 10; // in symbols
let table = new Array(HEIGHT);
for (let y = 0; y < HEIGHT; y++) {
  table[y] = createLine();
}

const FIGURES = [
 [
   [0, 1, 1],
   [1, 1, 0]
 ],
 [
   [0, 1, 0],
   [1, 1, 1]
 ],
 [
   [1, 0, 0],
   [1, 1, 1]
 ],
 [
   [0, 0, 1],
   [1, 1, 1]
 ],
 [
   [1, 1],
   [1, 1]
 ],
 [
   [1, 1, 1, 1]
 ]
];
var curX, curY, figure, mask;
createFigure();

function createMask() {
  let string = '';
  for (let i = 0; i < 20; i++)
    string += CHARS.charAt( Math.floor(Math.random() * CHARS.length) );
  return string;
}

function createFigure() {
  figure = FIGURES[ Math.floor(Math.random() * FIGURES.length) ];
  curX = 5 - Math.floor(figure[0].length / 2);
  curY = 0;
  mask = createMask();
}
function clearFigure() {
  let f = getFigure();
  for (let y = 0; y < f.length; y++) {
    for (let x = 0; x < f[0].length; x++) {
      if (f[y][x] != 0) {
        table[y + curY][x + curX] = ' ';
      }
    }
  }
}
function drawFigure() {
  let f = getFigure();
  for (var y = 0; y < f.length; y++) {
    for (var x = 0; x < f[0].length; x++) {
      if (f[y][x] != 0) {
        table[y + curY][x + curX] = mask.charAt(y * f[0].length + x);
      }
    }
  }
}
function getFigure() {
  return figure;
}

$('#update').click(function() {
  CHARS = $('#chars').val();
});
$('#gamepanel')
    .attr("tabindex", "0")
    .mousedown(function(){ $(this).focus(); return false; }) 
    .keydown(function(event) {
        switch (event.which) {
            case 37:
              if (canMoveLeft()) {
                clearFigure();
                curX--;
              }
              break;
            case 38:
              rotate();
              break;
            case 39:
              if (canMoveRight()) {
                clearFigure();
                curX++;
              }
              break;
            case 40: moveFigureDown(); break;
        }
        drawGameWindow();
        return false;
...