将数组重置为原始值

Question

我正在使用 Javascript 开发一个简单的游戏，涉及对 HTML5 canvas 的更改。在数组中输入一定数量（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 数组的所有值重置为原始值，当此函数运行s 时，本质上是重置地图，而不必输入每个值手动，即 boxes[1].x = 300

https://jsfiddle.net/to31b612/

Answer 1

从单个函数简单地初始化：

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()。

Answer 2

听起来你想使用 Memento Pattern

Answer 3

您可以在 reset() 函数中初始化盒子，并确保在游戏的第一个运行之前调用 call 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;
}

Answer 4

只需使用 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;

将数组重置为原始值

Reset Array back to Original values

html

javascript

arrays

canvas

reset