A Pen by Giovanny.

index.jade

table
  each valRow in [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12,13,14,15]
    tr
      each valCol in [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12,13,14,15]
        td.cell(id='c#{valRow}-#{valCol}')     

textarea#map

Pixel-art-Experiments.markdown

Pixel art Experiments

Forked from Giovanny's Pen Pixel art Experiments.

Forked from Captain Anonymous's Pen Pixel art Experiments.

A Pen by Giovanny on CodePen.

License.

script.js

var map = document.getElementById('map'); 
var pixelMatriz = [];

function updateMap(){
  var data = '';
  for(var j = 0;j<16; j++){
    console.log(j);
    data += pixelMatriz[j].join('')+'\n';
  };
  console.log(data);
  map.value = data;
}

function toggleClass(cellx, clase){  
  cellx.className = 'cell '+(cellx.className.indexOf(clase)!=-1?'':clase);
  var idc = cellx.id;
  var indx = idc.indexOf('-');
  var j = parseInt(idc.substring(1, indx));
  var i = parseInt(idc.substring(indx+1, idc.length));
  pixelMatriz[j][i] = pixelMatriz[j][i]=='_'?'M':'_';
  updateMap();
}

for(var i = 0;i<16; i++){
  pixelMatriz.push([]);
  for(var j = 0;j<16; j++){
    pixelMatriz[i].push('_');
    var cellx = document.getElementById('c'+j+'-'+i);
    map.innerHTML+='_';
    cellx.onclick = function(){
      toggleClass(this, 'black');
    }
  }
  map.innerHTML+='\n';
}

map.onkeyup = function(){
  var data = map.value;
  //console.log('map:', map.value);
  var rows = data.split('\n');
  //console.log(rows);
  for(var j =0; j<16;j++){
    for(var i=0; i<16; i++){
      pixelMatriz[j][i]=rows[j][i];
      var cellx = document.getElementById('c'+j+'-'+i);
      //cellx.className = 'cell';
      cellx.className = 'cell ' + (pixelMatriz[j][i]=='M'?'black':'');
    }
  }
};

// load presets
// create frame
// create animation...

style.stylus

table
  border-collapse collapse
tr
  border none

td.cell
  width 20px
  height 20px
  background yellow
  border none
  margin 0
  padding 0
  border 1px dotted #000
  &:hover
    cursor pointer
    background #0f0

  &.black
    background #000
    &:hover
      background #f00
 

textarea
  text-align center
  width 320px
  height 320px
  font-size 18px
  letter-spacing 8px
  line-height 18px
  padding 0 0 0 8px