running-light

by mifeng

HTML

<pre id="shape">
MMMMMMMMMMM
M MMMMM  MM
MMMMMMMMMMM
M MMMMMMMMM
MMMMMMMMMMM
</pre>

<button id="btn">next</button>

JavaScript

var $shape = document.getElementById("shape");

var shape = $shape.textContent.split("\n");
var name = ['MMX', 'MXM', 'XMM'];

var row = 1;
var rowEnd = row + name.length;

var nameEnd = name.length - 1;
var nameCol = 1 - name.length;

function createShape() {
  var newShape = [];
  
  for (var shapeRow = 0; shapeRow < shape.length; shapeRow++) {
    if (shapeRow >= row && shapeRow < rowEnd) {
      var nameRow = name[shapeRow - row];
      var shapeColLeft = nameCol, shapeColRight = nameCol + nameRow.length;
      var newShapeRow = '';
      
      for (var shapeCol = 0; shapeCol < shape[shapeRow].length; shapeCol++) {
        if (shapeCol >= nameCol && shapeCol < shapeColRight) {
          var char = nameRow[nameRow.length - (shapeCol - nameCol) - 1];
          if (char == 'X') { newShapeRow += ' ' ; }
          else { newShapeRow += shape[shapeRow][shapeCol]; }
        } else {
          newShapeRow += shape[shapeRow][shapeCol];
        }
      }
      newShape.push(newShapeRow);
    } else {
      newShape.push(shape[shapeRow]);
    }
  }

  $shape.innerHTML = newShape.join('\n');
}

document.getElementById("btn").addEventListener('click', function() {
  createShape();
  nameCol += 1;
  if (nameCol + 2 >= shape[0].length + name[0].length) {
  	nameCol = 1 - name.length;
  }
});