JS开发双N-back记忆游戏：Cube数组追加时对象被覆盖问题求助

问题根源 #

你定义的全局Cube对象是引用类型，数组Cubetracker中存储的都是指向该对象的引用。每次调用Cubegenerator()时，你只是修改了这个全局对象的属性值，再将同一个引用追加到数组中，导致数组内所有元素实际指向同一个对象，视觉上表现为被最新Cube覆盖。

修复方案 #

每次生成新Cube时，创建一个全新的对象，而非复用全局对象。修改后的代码如下：

//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(){
    
    function Repeatprob(rprob){
        var rc = Math.floor(Math.random() * 10);
        return rprob >= rc;
    }
    
    var rpyn = Repeatprob(game_settings["nback"]);
    
    if (Cubetracker.length > game_settings["nback"] && rpyn){
        alert("You can take the cube from Cubetracker as a repeat cube");
        var rCubeIndex = Cubetracker.length - game_settings["nback"];
        var reCube = Cubetracker[rCubeIndex];
        Cubetracker.push(reCube);    
        return reCube;     
    }
    
    // 生成新Cube的属性
    var Dimensions = [];
    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());
    var z_seed = z_seed.toString() + "px";
    var z_pos = [z_seed,z_seed];
    Dimensions.push(z_pos);
    
    var Colour = [];
    for (i = 0; i < 3; i++) {
        Colour.push(Math.floor(Math.random() * 256));
    }
    var rgbco = "RGB(" + Colour.toString() + ")";
    
    var Sound = [Math.floor(Math.random() * 6)];
    var Motion = [];
    for (i = 0; i < 2; i++){
        Motion.push(Math.floor(Math.random() * 10));
    }
        
    // 创建新的Cube对象，而非修改全局对象
    var newCube = {
        dimensions: Dimensions,
        colour: rgbco,
        sound: Sound,
        motion: Motion
    };
    
    Cubetracker.push(newCube);
    return newCube;
}

关键修改点 #

1. 移除全局Cube变量，改为在函数内部每次生成独立的newCube对象
2. 简化Repeatprob函数的返回逻辑
3. 优化条件判断写法，让逻辑更简洁准确
4. 简化Sound数组的生成代码

修改后，Cubetracker数组中的每个元素都是独立对象，不会再出现被覆盖的问题。

内容的提问来源于stack exchange，提问作者Apiariaton