Javascript 3 dimentional matrix html board onclick empty current box

javascript 3 dimentional matrix html board onclick empty current box 

Algorithm!

Rules:
1. Only immediate Box can be swapped. Should not jump another box
2. Only directions allowed: Left, Right, Up, Down.
3. Should not swap diagonally.
   


function hasClass(elem, className) {
  return elem.className.split(" ").indexOf(className) > -1;
}

function addClick() {
  var btn = '<button class="btn1">kkkkk</button>';
  document.getElementById("container").innerHTML += btn;
}

// function boxbodyClick(obj) {
//   /* console.log(';;;',obj.className) */
//   /* alert(obj) */
// }

var arr = [3];

for (var i = 0; i < 3; i++) {
  arr[i] = new Array(3);
}

var emti = 0;
var emtj = 0;

function btnClick(obj, i, j) {
  if (arr[i][j] !== "-") {
      
    if (j + 1 == emtj || j == emtj || j - 1 == emtj){  
      if (i == emti || i + 1 == emti || i - 1 == emti) {
        if (emti == i || emtj == j){  
        // console.log('j',j)
        arr[emti][emtj] = arr[i][j];
        document.getElementById("b" + emti + emtj).innerHTML = arr[emti][emtj];
        arr[i][j] = "-";
        obj.innerHTML = "-";
        emti = i;
        emtj = j;
        }
      }
    } 
    // console.log('eij',emti,emtj);
  }
  // alert("btn"+i+j+obj.innerHTML);
}

function init() {
  /* 1 2 3
   4   5
   7 8 6 */

  var narr = [0, 1, 2, 3, 4, , 6, 7, 8, 9];
  var num = 1;
  var val = "";
  var e;
  for (var i = 0; i < 3; i++) {
    e = document.createElement("div");
    // document.getElementById("container").innerHTML +=
    //   "<div  class='box' id='row'" + i + ">66</div>";
    for (var j = 0; j < 3; j++) {
      val = narr[num] ? num.toString() : "-";
      if (val === "-") {
        emti = i;
        emtj = j;
        // console.log('eij',emti,emtj);
      }
      arr[i][j] = val;
      num++;
      // console.log("b" + i +j);
      e.innerHTML +=
        "<button  id='b" +
        i +
        j +
        "' onclick='btnClick(this," +
        i +
        "," +
        j +
        ")' class='box'> " +
        arr[i][j] +
        "</button>";
      // document.getElementById("row" + i).appendChild += e;
      // "<button  id='b1' class='box'>" + arr[i][j] + "</button>";
    }
    document.getElementById("container").appendChild(e);
  }
}

init();
 

Comments