将数组重置回原始值答案

【问题标题】：Reset Array back to Original values将数组重置回原始值
【发布时间】：2015-07-10 21:26:00
【问题描述】：

我正在开发一个使用 Javascript 的简单游戏，其中涉及对 HTML5 画布的更改。在数组中输入多个 (10+) 对象：

var boxes = [];
    boxes.push({
        x: 0,
        y:canvas.height - 370,
        width: 400,
        height: 20});
    boxes.push({
        x: 300,
        y:canvas.height - 100,
        width: 150,
        height: 90});

然后整个数组通过一个更新函数运行，该函数根据玩家的位置改变 x 值：

for (var i = 0; i < boxes.length; i++) {
                if (boxes[1].x > -3000 + canvas.width) {
                    boxes[i].x -= robot.speed * modifier;
                    robot.x = canvas.width - 300;
                }; 
            };

当玩家死亡时会运行重置功能：

var reset = function () {
            robot.x = 0;
            robot.y = 500;
            ++deaths;
            };

我正在寻找一种在此函数运行时将boxes 数组的所有值重置为原始值的方法，本质上是重置地图，而无需手动输入每个值，即boxes[1].x = 300

https://jsfiddle.net/to31b612/

【问题讨论】：

如何在用值初始化原始数组（即备份）后立即复制它，当玩家死亡时，然后从备份中复制回来？这是一个选择吗？

标签： javascript arrays html canvas reset

【解决方案1】：

只使用 2 个变量

var initBoxes = [];
initBoxes.push({
    x: 0,
    y:canvas.height - 370,
    width: 400,
    height: 20});
initBoxes.push({
    x: 300,
    y:canvas.height - 100,
    width: 150,
    height: 90});

var boxes = initBoxes;

然后，当您需要重置框时，只需

boxes = initBoxes;

【讨论】：

【解决方案2】：

您可以在reset() 函数中初始化盒子，并确保在第一次运行游戏之前调用reset()。

var deaths = -1;
var boxes = [];

function reset() {
    robot.x = 0;
    robot.y = 500;
    boxes = [{
        x: 0,
        y:canvas.height - 370,
        width: 400,
        height: 20
    }, {
        x: 300,
        y:canvas.height - 100,
        width: 150,
        height: 90
    }];
    ++deaths;
}

【讨论】：

这实际上并不太奏效，至少不是简单的剪切/粘贴。 x 值移动了 300 像素，但我认为这是因为其他代码片段如何使用这些值，否则它看起来会起作用，谢谢！

【解决方案3】：

听起来你想使用Memento Pattern

【讨论】：

【解决方案4】：

只需从单个函数初始化：

var boxes;
initBoxes();

function initBoxes() {
    boxes = [];
    boxes.push({
        x: 0,
        y:canvas.height - 370,
        width: 400,
        height: 20});
    boxes.push({
        x: 300,
        y:canvas.height - 100,
        width: 150,
        height: 90});
}

然后在每次需要初始化它时调用initBoxes()。

【讨论】：

这很好用，我只需要将第二个数组的格式更改为类似的格式并同时通过重置功能运行它，谢谢！