移动具有相同功能的图像多次调用

Question

我想做的是一个屏幕保护程序，就像一些图像移动并从屏幕两侧反弹，改变方向。它与一个图像完美配合，但是在我重写它以使任意数量的图像反弹后，有以下问题：图像总是分组然后完全相同。这是一个代码和小提琴：

HTML：

<div id="blackscreen">
        <img src="https://cdn.pixabay.com/photo/2016/08/12/04/03/mask-1587566_960_720.png" style="top: 0%; left: 0%;">
        <img src="https://cdn.pixabay.com/photo/2016/08/12/04/03/mask-1587566_960_720.png" style="top: 0%; left: 80%;">
<img src="https://cdn.pixabay.com/photo/2016/08/12/04/03/mask-1587566_960_720.png" style="top: 0%; left: 50%;">
<img src="https://cdn.pixabay.com/photo/2016/08/12/04/03/mask-1587566_960_720.png" style="top: 0%; left: 20%;">
    </div>

CSS：

   img {
    width: 15vw;
    position: absolute;
    left: 42%;
    top: 0%;
}

JS：

 var mousemoving = false;
    var c = 0;
    var stop = false;
    var ssr = false;
    window.mov = [];
    window.uparr = [];
    window.rightarr = [];
    window.vcarr = [];
    window.hcarr = [];

    screensaver();

function screensaver() {

    if(ssr) {return;}

    ssr = true;
    var b = document.getElementById('blackscreen');
    var body = document.getElementsByTagName('body')[0];

    var check = setInterval(function() {
        if(c<10) {
            if (mousemoving) {
                mousemoving = false;
                c=0;
            }
            else {
                c++;
                console.log(c);
            }
            b.style.display = "none";
            body.style.overflow = "auto";
        }
        else {
            body.style.overflow = "hidden";
            b.style.display = "block";
            stop = false;
            clearInterval(check);

            mov = b.getElementsByTagName('img');

            uparr = [];
            rightarr = [];

            for (var i = 0; i < mov.length; i++) {
                uparr[i] = false;
                rightarr[i] = false;
                vcarr[i] = 0;
                hcarr[i] = 0;
            }


            mtv(0);
            mth(0);
            var i = 1;
            var move = setInterval(function() {
                if(i>=mov.length) {
                    clearInterval(move);
                    return;
                }
                mtv(i);
                mth(i);
                i++;
            },1)
        }
    },100)

    ssr = false;

}

function mtv(index) {

    var item = mov[index];
    var posy = 0;
    var togoy = 0;
    var up = uparr[index];
    var vc = vcarr[index];

    if(up) {
        posy = Number(item.style.top.replace("%",""));
        togoy = -posy;
    }
    else {
        posy = Number(item.style.top.replace("%",""));
        togoy = 70 - posy;
    }

    var perticky = togoy / 100;

    var v = setInterval(function() {

        if(stop) {
            clearInterval(v);
            c = 0;
            var b = document.getElementById('blackscreen');
            var body = document.getElementsByTagName('body')[0];
            b.style.display = "none";
            body.style.overflow = "auto";
            if(index == 0) {
                screensaver();
            }
            return;
        }

        if(vc>99) {
            vcarr[index]=0;
            clearInterval(v);
            if(up) {
                uparr[index] = false;
            }
            else {
                uparr[index] = true;
            }
            if(stop==false) {
                mtv(index);
            }
            return;
        }

        posy = Number(item.style.top.replace("%",""));

        var newvaly = posy + perticky;
        item.style.top = newvaly + "%";

        vc++;
    },17)

}

function mth(index) {

    var item = mov[index];
    var posx = 0;
    var togox = 0;
    var right = rightarr[index];
    var hc = hcarr[index]

    if(right) {
        posx = Number(item.style.left.replace("%",""));
        togox = -posx;
    }
    else {
        posx = Number(item.style.left.replace("%",""));
        togox = 82 - posx;
    }

    var pertickx = togox / 100;

    var h = setInterval(function() {

        if(stop) {
            clearInterval(h);
            c = 0;
            return;
        }

        if(hc>99) {
            hcarr[index]=0;
            clearInterval(h);
            if(right) {
                rightarr[index] = false;
            }
            else {
                rightarr[index] = true;
            }
            if(stop == false) {
                mth(index);
            }
            return;
        }

        posx = Number(item.style.left.replace("%",""));

        var newvalx = posx + pertickx;
        item.style.left = newvalx + "%";

        hc++;

    },30)
}

https://jsfiddle.net/cwb2frmd/1/

不要担心c或鼠标移动，它们仅用于在不移动鼠标一段时间后出现的图像效果。

尽管它看起来很有趣，我希望所有的图像都能自动移动。错误的一个可能原因可能是多次调用的函数仍与其他实例共享变量？功能，但我没有找到任何相关的信息。任何帮助表示赞赏。