Text animation using PRE

by davidcl64

HTML

<pre id="map"></pre>

JavaScript

// Splits each row by character to from a new array
var map = [
    "####################".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "#                  #".split(''),
    "####################".split('')];

var mapEle = document.getElementById('map');

function updateMap() {
    // Iterates the array, joining each subarray with no separator,
    // then joining the result with a new line
    mapEle.innerText = map.map(function (val, idx, arr) {
        return val.join('');
    }).join('\n');
}

var chars = ['|', '/', '\u2014', '\\'];
var counter = 0;
var direction = "stop";
var y = 1;
var x = 1;

document.querySelector('body').addEventListener('keydown', function(evt) {
    direction = evt.keyIdentifier;
    console.log(direction);
});

document.querySelector('body').addEventListener('keyup', function(evt) {
    direction = "stop";
    console.log(direction);
});

window.setInterval(function () {
    map[y][x] = ' ';
    
    if(direction === "Right") x++;
    else if(direction === "Left") x--;
    else if(direction === "Up") y--;
    else if(direction === "Down") y++;

    //console.log(x + ', ' + y);
    map[y][x] = chars[counter % chars.length];
    updateMap();
    counter++;
}, 200);