Trying to save changes as a whole as array inside an array that contains a custom object

Question

I'm trying to make an if statement, that if the array board is the same as 2 changes ago, it will warn me by saying "undid illegal play". However every array becomes the same after 3 turns (because of if(boardHistory.length >= 3){) but it warns me always while I see no reason for warning me since it's always changing and never becomes the same value.

What did I wrong?

var turn;
var boardSize;
var board;
var boardHistory;
var changer;

function setup() {
    createCanvas(400, 400);
    boardSize = 8;
    turn = false;
    board = [];
    boardHistory = [];
    changer = 0;
    for (var y = 0; y < boardSize; y++) {
        for (var x = 0; x < boardSize; x++) {
            board.push(new Piece(x, y, 0));
        }
    }
    boardHistory.push(board);
}

function mouseClicked() {
    for (var y = 0; y < boardSize; y++) {
        for (var x = 0; x < boardSize; x++) {
            board[y * boardSize + x].colour = changer;
        }
    }
    var play = true;
    if (boardHistory.length >= 3) {
        if (board == boardHistory[(boardHistory.length - 3)]) {
            play = false;
        }
    }
    if (play) {
        turn = !turn;
        boardHistory.push(board);
        console.log("played");
    } else {
        console.log("undid illegal play, " + (boardHistory.length - 3));
        console.log(boardHistory[(boardHistory.length - 3)]);
    }
    console.log(board);

    changer++;
}

function Piece(x, y, colour) {
    this.x = x;
    this.y = y;
    this.colour = colour;
    this.arrayNum = this.y * boardSize + this.x;
}

var turn;
var boardSize;
var board;
var boardHistory;
var changer;

function setup() {
  createCanvas(400, 400);
 boardSize = 8;
 turn = false;
 board = [];
 boardHistory = [];
 changer = 0;
 for(var y = 0; y < boardSize; y++){
  for(var x = 0; x < boardSize; x++){
   board.push(new Piece(x,y,0));
  }
 }
 boardHistory.push(board);
}
function mouseClicked(){
  for(var y = 0; y < boardSize; y++){
  for(var x = 0; x < boardSize; x++){
   board[y*boardSize+x].colour = changer;
  }
 }
  var play = true;
  if(boardHistory.length >= 3){ if(board == boardHistory[(boardHistory.length-3)]){ play = false; } }
  if(play){
   turn = !turn;
   boardHistory.push(board);
   console.log("played");
  } else {
   console.log("undid illegal play, ");
  }
 
 changer++;
}

function Piece(x, y, colour) {
 this.x = x;
 this.y = y;
 this.colour = colour;
 this.arrayNum = this.y*boardSize+this.x;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Can you create a fiddle or code snippet as it's difficult to follow what happening without seeing it in action — StudioTime, Sep 26 '18 at 15:17

score 1 · Accepted Answer · answered Sep 26 '18 at 15:27

I believe that the problem that you are facing is in 2 different places:

boardHistory.push(board);

and

if (board == boardHistory[(boardHistory.length - 3)])

Eventhough you are modifying in the function mouseclicked the value of board, the variable contains the reference of the object, and not a copy of it. So if you make a change in one place you will see it in another place.

I think it will be more clear with an example:

var board = [1,2,3]
var boardHist = []

boardHist[0] = board; //This is similar of what you are doing

console.log(board == boardHist[0]); //Obviously we are getting true

board[0] = 5; //Now we change the first value of board

console.log(board == boardHist[0]); //This is still true

console.log(boardHist[0]); //We will get [5,2,3]

but how do I make it than so it will save a copy? i though how I did it already made a copy. — , Sep 26 '18 at 15:39
There are a lot of ways to do it. You can check them right here: https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object — Brank Victoria, Sep 26 '18 at 15:55

Trying to save changes as a whole as array inside an array that contains a custom object

1 Answers1