Skip to content

Instantly share code, notes, and snippets.

@marius-m2
Last active March 18, 2018 20:17
Show Gist options
  • Save marius-m2/dc2c30004a2e6fde4ded21fa6f94e568 to your computer and use it in GitHub Desktop.
Save marius-m2/dc2c30004a2e6fde4ded21fa6f94e568 to your computer and use it in GitHub Desktop.
(function () {
var cells = document.querySelectorAll('.cell');
var currentLevel = 0;
var 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)
}
} ());
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment