JS How to append to an array with multiple dictionaries with the same keys and different values w/o dictionary being overwritten by latest dictionary?

Question

Am making a working memory game, Dual N' Back on JS - the premise is a function which generates a dictionary of cube attributes, appends these cube attributes to a list of previous cubes in order that the player ascertains if the latest cube matches a cube X steps back in the game.

Right now the Cubegenerator() function returns a Cube with differing attributes ok - the issue I am having is with the var Cubetracker = [] which lists all the Cubes that have previously been generated. Each time a Cube is generated and appended to this list as a dictionary, all entries in the Cubetracker are overwritten by this one dictionary.

Any ideas as to solving the overwriting issue? Thanks for your help!


  
var Cube = {
    "dimensions":"1",
    "colour":"2",
    "sound":"3",
    "motion":"4"};    
    
//History of cubes generated for n-back comparison    
var Cubetracker = [];


//Gathering input from number buttons?
//.value property?
//document.getElementById("rp").value;

var rp, nb, sp;
rp = document.getElementById("rp").value;
nb = document.getElementById("nb").value; 
sp = document.getElementById("sp").value;

//Takes inputs from screen 
var game_settings = {"reps":rp,"nback":nb,"speed":sp};    

    
   
function Cubegenerator(){
    
    
  //Let's try encapsulating this within another function for ease of use
    
    function Repeatprob(rprob){
    var rc = Math.floor(Math.random() * 10);
    if (rprob >= rc){
        return true
    }
    return false
    }
    
    var rpyn = Repeatprob(game_settings["nback"]);
    
    if (Cubetracker.length - 1 > 0 && Cubetracker.length - game_settings["nback"] > 0 && rpyn == true){
    alert("You can take the cube from Cubetracker as a repeat cube");
    var rCube = Cubetracker.length - game_settings["nback"];
    var reCube = Cubetracker[rCube];
    Cubetracker.push(reCube);    
    return reCube;     
    }
    
    
    //var Cubetrl = (Cubetracker.length) - //1; 
    //if (Cubetrl - game_settings["nback"] > 0){
    //    var prci = (Cubetracker.length-1) - game_settings["nback"];
    //    var lastc = Cubetracker[prci];
    //    Cubetracker.push(lastc);
    //    return Cubetracker[lastc];
    //                }}
    
    var Dimensions = [];
    //dimensions creator
    var z_pos = "";
    var z_seed = "";
    var defzpos = 50;
    
    for (var i = 0; i< 2; i++)
    {Dimensions.push(Math.floor((Math.random() * 300) - (Math.random() * 300)))}
    
    for (i = 0; i < Dimensions.length; i++){
    var ni = (Dimensions[i]).toString();
    ni += "px";
    Dimensions[i] = ni;
    }
    var z_seed = Math.floor(defzpos * Math.random(1,10));
    var z_seed = z_seed.toString() + "px";
    var z_pos = [z_seed,z_seed];
    
    Dimensions.push(z_pos);
    
    
    var Colour = [];
    var rbgco = "";
    //dimensions creator
    for (i = 0; i < 3; i++)
    {Colour.push(Math.floor(Math.random(1,10) * 256));
    }
    var rgbco = Colour.toString();
    var rgbco = "RGB(" + rgbco + ")";
    Colour = rgbco;

    
    var Sound = [];
    //sound creator
    for (i = 0; i < 1; i++)
    {Sound.push(Math.floor(Math.random() * 6));}
        
    var Motion = [];
    //motion creator
    for (i = 0; i < 2; i++){Motion.push(Math.floor(Math.random() * 10));}
        
    Cube.dimensions = Dimensions;
    Cube.colour = Colour;
    Cube.sound = Sound;
    Cube.motion = Motion;
    
    
    Cubetracker.push(Cube);
    return Cube;

    }

Do all the cubes in the array have the exact same values ? – David Alvarez Aug 21 '22 at 11:15 — David Alvarez, Aug 21 '22 at 11:15

David Alvarez · Answer 1 · 2022-08-21T11:35:33.847

The problem is that in JavaScript, object are passed by reference, and because you create your Cube object only once, its reference is reused and that is why all the objects in Cubetracker are the same.

To resolve that issue, you just have to move the creation of Cube inside the function, so that each time the function is called, a new ref, thus a new object is created.

Your bellow code

  Cube.dimensions = Dimensions;
  Cube.colour = Colour;
  Cube.sound = Sound;
  Cube.motion = Motion;

Updated all the element in Cubetracker, because they all had the same ref.

Here is the solution:

   
    
//History of cubes generated for n-back comparison    
var Cubetracker = [];

var rp, nb, sp;
rp = document.getElementById("rp").value;
nb = document.getElementById("nb").value;
sp = document.getElementById("sp").value;

//Takes inputs from screen 
var game_settings = {
  "reps": rp,
  "nback": nb,
  "speed": sp
};



function Cubegenerator() {

  var Cube = {
    "dimensions":"1",
    "colour":"2",
    "sound":"3",
    "motion":"4"}; 

  //Let's try encapsulating this within another function for ease of use

  function Repeatprob(rprob) {
    var rc = Math.floor(Math.random() * 10);
    if (rprob >= rc) {
      return true
    }
    return false
  }

  var rpyn = Repeatprob(game_settings["nback"]);

  if (Cubetracker.length - 1 > 0 && Cubetracker.length - game_settings["nback"] > 0 && rpyn == true) {
    alert("You can take the cube from Cubetracker as a repeat cube");
    var rCube = Cubetracker.length - game_settings["nback"];
    var reCube = Cubetracker[rCube];
    Cubetracker.push(reCube);
    return reCube;
  }


  //var Cubetrl = (Cubetracker.length) - //1; 
  //if (Cubetrl - game_settings["nback"] > 0){
  //    var prci = (Cubetracker.length-1) - game_settings["nback"];
  //    var lastc = Cubetracker[prci];
  //    Cubetracker.push(lastc);
  //    return Cubetracker[lastc];
  //                }}

  var Dimensions = [];
  //dimensions creator
  var z_pos = "";
  var z_seed = "";
  var defzpos = 50;

  for (var i = 0; i < 2; i++) {
    Dimensions.push(Math.floor((Math.random() * 300) - (Math.random() * 300)))
  }

  for (i = 0; i < Dimensions.length; i++) {
    var ni = (Dimensions[i]).toString();
    ni += "px";
    Dimensions[i] = ni;
  }
  var z_seed = Math.floor(defzpos * Math.random(1, 10));
  var z_seed = z_seed.toString() + "px";
  var z_pos = [z_seed, z_seed];

  Dimensions.push(z_pos);


  var Colour = [];
  var rbgco = "";
  //dimensions creator
  for (i = 0; i < 3; i++) {
    Colour.push(Math.floor(Math.random(1, 10) * 256));
  }
  var rgbco = Colour.toString();
  var rgbco = "RGB(" + rgbco + ")";
  Colour = rgbco;


  var Sound = [];
  //sound creator
  for (i = 0; i < 1; i++) {
    Sound.push(Math.floor(Math.random() * 6));
  }

  var Motion = [];
  //motion creator
  for (i = 0; i < 2; i++) {
    Motion.push(Math.floor(Math.random() * 10));
  }

  Cube.dimensions = Dimensions;
  Cube.colour = Colour;
  Cube.sound = Sound;
  Cube.motion = Motion;


  Cubetracker.push(Cube);
  console.log("Cubetracker", JSON.stringify(Cubetracker))
  return Cube;

}

<input id="rp" type="text" value="1" />
<input id="nb" type="text" value="2" />
<input id="sp" type="text" value="3" />
<button onclick="Cubegenerator()">Generate a cube</button>

Thank you David! Look forward to implementing this now – Apiariaton Aug 21 '22 at 13:26 — Apiariaton, Aug 21 '22 at 13:26

JS How to append to an array with multiple dictionaries with the same keys and different values w/o dictionary being overwritten by latest dictionary?

1 Answers1