JavaScript slider puzzle - scrambling values

Question

(I'm brand new to JS so bear with me) I am using a table to build a sliding puzzle game. I need a function that will scramble the values, but I am not sure how I should get it to display in the table cells. Right now my code just displays the numbers in order. I have two functions - one to build the table and the other to shuffle the values:

    var _r = 3;
    var _c = 3;


//initializes the puzzle
function newPuzzle(r, c)
{
   var table = document.createElement("table");
   table.id = "myTable";

   for (var i = 0; i < r; i++)
   {
      var row = document.createElement('tr');
      for (var j = 0; j < c; j++)
      {
         var column = document.createElement('td');
         row.appendChild(column);    
      }
      table.appendChild(row);
   }
   document.body.appendChild(table);


   //end of table creation
   //populate the table
   var cell = new Array(r);
   for (var i = 0; i < r; i++)
   {
      cell[i] = new Array(c);
      for (var j = 0; j < c; j++)
      {
         cell[i][j] = i*c + j;
      }  
   }
   cell[0][0] = " ";

   for (var i = 0; i < cell.length; ++i)
   {
        var entry = cell[i];
        for (var j = 0; j < entry.length; ++j)
        {
            var n = 0;
            var gridTable = document.getElementsByTagName("table");
            gridTable[0].rows[i].cells[j].innerHTML = cell[i][j];
            document.getElementById("myTable").rows[i].cells[j].id = "even" + (i*c+j);

        }    
   }

 shuffle();
}


function shuffle()
{

 //declare and populate array
 var _array = new Array();

 for (var i = 0; i <= r*c; i++)
 {
   _array[i] = i;
 }

 //shuffle tiles
 for (var i = 0; i <= r*c; i++)
 {
   var rand = Math.floor(Math.random() * _array.length) + i;
   var temp = _array[rand];
   _array[rand] = _array[i];
   _array[i] = temp;
 }

 //check to see if puzzle is solveable
 var count = 0;
 for (var i = 0; i <= r*c; i++)
 {
   for (var j = i; j <= r*c; j++)
   {
      if (_array[j] < _array[i])
      {
         count++;
      }
   }
 }

 if (Math.floor(count/2) != count/2)
 {
   shuffle();
 }
 else
 {
   for (var i = 0; i < r*c; i++)
   {

      //This is where I'm not sure what to do

      document.getElementsByTagName("td")[i].innerHTML = _array[i]+1;
   }
 }

}

Answer 1

Not sure, this may help you.

For solving any mathematics series below algorithm can be used. Even for some cases it will not satisfy your expected answer, but it will be correct in some other way.

Steps are as below:

1. Get difference between the numbers as shown below:
   
2. Keep making difference until it seems same(difference get 0).
   
3. Put the same last number which are coming same in that sequence and by adding that difference complete the series by coming up.

Examples are as below:

1       2       3       4       5       6       **7**

   1        1       1       1       1       **1**   


1       4       9       16      25      **36**      
     3      5       7       9       **11**          
        2       2       2       **2**               



1       8       27      64      125     **216**     
    7       19      37      61      **91**          
        12      18      24      **30**              
            6       6       **6**                   
                0       **0**                       

The same above algorithm is implemented in below js code.

//the input

var arr=[1,4,9,16];

var pa6inoArrayMelvo = function(arrr){
var nxtArr=[];
    for(i=0;i<arrr.length;i++){
        if(arrr[i+1] != undefined){
            nxtArr.push(arrr[i+1] -arrr[i]);
        }
    }
    return nxtArr;
}
var keepArray=[];

var keepAlltheArray= function(ar){
    var tempArr=[];

        keepArray.push(ar);
        if(ar.length>1){

          tempArr=pa6inoArrayMelvo(ar);       
          keepAlltheArray(tempArr);
        }else{
            generateArray(keepArray.length-1);
            console.log("ans is:"+keepArray[0]);
        }


}

var generateArray=function(idx){
    if(keepArray[idx+1]){
        var a=keepArray[idx+1];
        var b=keepArray[idx];
        var ans=a[a.length-1]+b[a.length-1];
        keepArray[idx].push(ans);
    }else{
        var ans=keepArray[idx][keepArray[idx].length-1];
        keepArray[idx].push(ans);
    }
    if(idx>0){
        generateArray(idx-1);
    }
}

keepAlltheArray(arr);

Answer 2

You need to pass your variables r and c into your shuffle function:

function newPuzzle(r, c)
{ 
    ...
    shuffle(r, c);
}


function shuffle(r, c) {
    ...
    if (Math.floor(count/2) != count/2)
    {
        shuffle(r, c);
    }
}

And also call newPuzzle(_r, _c); which I'm assuming you are.

With just that change it works, the only problem is that is NaN in this case, you can easily fix that by checking if the value is NaN then replacing that with a space:

if(isNaN(_array[i]))
    document.getElementsByTagName("td")[i].innerHTML = " ";

Fiddle Example