screensaver

by Md. Atiquzzaman Soikat

HTML

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

CSS

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

JavaScript

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++;
			}
			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;
				}
        setTimeout(mtv(i),0);
        
				//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) {
				mtv(index);
			}
			return;
		}

		posy =...