daniel-d2
8/19/2016 - 11:37 AM

dumbCellWalker.js

index.html
content_copyfile_download
<html>

<head>
  <title></title>
  <style>
    .cell {
      border: 1px solid red;
      display: inline-block;
      text-align: center;
      padding: 35px;
      box-sizing: border-box
    }
    
    .highlighted {
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="cell">RIGHT</div>
    <div class="cell">DOWN</div>
    <div class="cell">RIGHT</div>
    <div class="cell">DOWN</div>
    <div class="cell">LEFT</div>
    <div class="cell">RIGHT</div>
    <div class="cell">UP</div>
    <div class="cell">DOWN</div>
    <div class="cell">RIGHT</div>
    <div class="cell">DOWN</div>
    <div class="cell">LEFT</div>
    <div class="cell">LEFT</div>
    <div class="cell">DOWN</div>
    <div class="cell">RIGHT</div>
    <div class="cell">RIGHT</div>
    <div class="cell">RIGHT</div>
  </div>
  <script src='dumbCellWalker.js'></script>
</body>

</html>
dumbCellWalker.js
content_copyfile_download
(function () {
  var cells = document.querySelectorAll('.cell');
  var currentLevel = 0;
  arrayCells = new Array(new Array(), new Array(), new Array(), new Array());

  [].forEach.call(cells, function (item, i) {
    if (i % 4 === 0 && i !== 0) {
      currentLevel += 1;
    }
    arrayCells[currentLevel].push(item);
  });

  update();

  function update() {
    var x = 0;
    var y = 0;
    var arr = [
      ['r', 'd', 'r', 'd'],
      ['l', 'r', 'u', 'd'],
      ['r', 'd', 'l', 'l'],
      ['d', 'r', 'r', 'r']];

    setInterval(function () {
      if (!arr[x][y]) {
        console.log('an error has occurred');
        return;
      }
      arrayCells[x][y].classList.add('highlighted');
      console.log('Currently targeting: ', arr[x][y]);
      switch (arr[x][y]) {
        case 'r':
          y = y + 1;
          break;
        case 'd':
          x = x + 1;
          break;
        case 'l':
          y = y - 1;
          break;
        case 'u':
          x = x - 1;
          break;
      }
    }, 500)

  }
} ());