用于在 sprite 编辑器中撤消的 JavaScript push() 和 pop() 数组答案

【问题标题】：Javascript push() and pop() arrays for undo in sprite editor用于在 sprite 编辑器中撤消的 JavaScript push() 和 pop() 数组
【发布时间】：2018-04-08 15:51:49
【问题描述】：

我正在为我正在制作的 DOS 游戏创建精灵编辑器的 Javascript 端口，以便艺术朋友可以帮助我制作艺术品。

到目前为止，一切都运行良好，但我不是一个 Javascript 开发人员，而且我认为很容易的撤消功能让我感到困惑，我不知道如何进行故障排除。

基本上，我有一个 64000 元素数组，其中包含屏幕的屏幕数据，另一个包含标识哪些像素在帧之间发生变化并且需要绘制的值，称为“vblt”或 V-Blit。

当用户的鼠标按钮在绘图区域变回未单击状态时，我通过将“vram”或视频 RAM 数组推入“hstr”或历史数组来捕获撤消点，如果深度大于 10，我会剔除最老的：

if(omouse-mouseButton>0 && (ymouse>=25)){
    hstr.push(vram);
    if (hstr.length>10){
        var junk = hstr.shift();
    }
    console.log(hstr.length);
}

当用户按下 ESC 键时，我想将最后添加的状态弹回 VRAM：

if(key==27 && hstr.length>0){
    vram = hstr.pop();
    for(addr=0;addr<64000;addr++){
        vblt[addr]=3;
    }
}

不幸的是，它并没有按照我希望的方式工作（根本没有），而且我从没想过在编写代码时会卡在这一点上，如果有人提出任何建议，我将不胜感激。谢谢！

PS。我在数组上做了一个 typeof，它返回“object”。为什么是这样？我需要更具体还是不能对数组执行 typeof？

【问题讨论】：

您能否告诉我们您遇到问题的数组是什么？您可以告诉我们当您在其上执行 console.log 时它的值是多少？
console.log(hstr); VM1060：1（10）[阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000） ), 数组(64000)]
console.log(hstr[0])会显示什么？
我不确定这个 undefined 是什么：再说一次，我对 JavaScript 没有经验，所以我可能在这里遗漏了一些明显的东西：console.log(hstr); VM1060：1（10）[阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000），阵列（64000） ), Array(64000)] 未定义
这实际上看起来是正确的：console.log(hstr[0]); VM1071:1 (64000) [0, 0, 0, 0, 1, 1, 1, 0, 2, 2, 2, 0, 3, 3, 3, 0, 4, 4, 4, 0, 5, 5 , 5, 0, 6, 6, 6, 0, 7, 7, 7, 0, 8, 8, 8, 0, 9, 9, 9, 0, 10, 10, 10, 0, 11, 11, 11 , 0, 12, 12, 12, 0, 13, 13, ... 这是调色板/颜色选择器的顶部。

标签： javascript arrays canvas graphics stack

【解决方案1】：

我终于搞定了。

我通过将数组编码成一个字符串来解决我的问题，我可以将它推入/弹出 hstr 数组并保存到 localStorage。

保存撤消状态：

        if(omouse-mouseButton>0 && (ymouse>=25)){

            var tempStr = "";
            for(i=0;i<56000;i++){
                tempStr += String.fromCharCode((vram[i+(8000)]));
            }

            hstr.push(localStorage.getItem('FTHSPRITE_'+mapx+'_'+mapy+'_21CE27FA45476C99F7FC1C8D0D9D910245CCFB008E9F91DEDA0DCDD344DD46BD'));
            localStorage['FTHSPRITE_'+mapx+'_'+mapy+'_21CE27FA45476C99F7FC1C8D0D9D910245CCFB008E9F91DEDA0DCDD344DD46BD'] = tempStr;
            localStorage['FTHSPRITE_UNDO_'+mapx+'_'+mapy+'_21CE27FA45476C99F7FC1C8D0D9D910245CCFB008E9F91DEDA0DCDD344DD46BD'] = hstr;

            if (hstr.length>10){
                var junk = hstr.shift();
            }
        }

恢复撤消状态：

                if(key==27 && hstr.length >= 1){
                    var temp = hstr.pop();
                    for(i=0;i<56000;i++){
                            vram[i+(8000)] = temp.charCodeAt(i);
                            vblt[i+(8000)] = 3;
                    }
                    var tempStr = "";
                    for(i=0;i<56000;i++){
                        tempStr += String.fromCharCode((vram[i+(8000)]));
                    }
                    localStorage['FTHSPRITE_'+mapx+'_'+mapy+'_21CE27FA45476C99F7FC1C8D0D9D910245CCFB008E9F91DEDA0DCDD344DD46BD'] = tempStr;
                }

【讨论】：

在后来的版本中，我发现 localStorage 位不起作用，因此我将其拆分为 hstr 数组中的每个元素创建一个 localStorage 项。这没有在这里反映出来，因为当我解决问题时它不是我解决方案的一部分。