Help with a game

Hi

Im trying to create a snake and ladders game and ive come across a problem which I cant see to fix, im new to JS so any help would be appreciated.

Basic info:

The board is an image with a total of 64 squares with 3 ladders and 3 snakes.

I was told to make it so there is 2 counters on each square which i can then fill and un fill (makes them visible and not).

I have 2 arrays for each counter each 0 to 63, (not the best way to do it but just a way i thought i could of done it) if you have another way i would love to here it.

These arrays contain the co-ordinates of the counter in that square along with the colour, this allows me to fill the counter to make it visible.

(Example of one of the lines from the array: player1Counter[0]=canvas.ellipse(x_0+30,y_0+735,15.3,15.3,0).attr({fill:'rgba(0,0,0,50)',stroke:'#000',"fill-opacity":1,"stroke-opacity":1});)

How i need it to work.

I have a function which generates the number and then displays an image of a dice depending on the number generated. I then need to move the counter to the next square depending on the number that has been generated.

The issues i have.

I need to switch the players go so the program knows which counter to move, this is the code i have at the moment:

if (playerTurn==1) {
player1Counter[player1Pos].hide();

It works as it turns the counter off but im not sure how to switch it to the other player after this counter has moved.

The next issue i have is specifically adding the generated number to the current position of the counter, to do this i need to use the arrays position. Is there anyway to do this?

The final issue i have is being able to change the fill number from 0 to 1 when the array position has been calculated to then display the correct counter.

Any help would kindly be appreciated as i have hit a dead end, any other ways to do anything i am trying to do will also be welcome as the way i am doing it is probably the best way.

Thanks alot!