I could not stop

i-could-not-stop.markdown

I could not stop

Thousands of clicks later, I could still not stop, no matter how hard I tried...

A Pen by Gerard Ferrandez on CodePen.

License.

index.html

<div id="screen"></div>
<div id="images">
	<img src="frame.jpg">
	<img src="frame.jpg">
	<img src="frame.jpg">
	<img src="frame0.jpg">
</div>

script.js

window.addEventListener('load', function () {
	var src = document.getElementById("images").getElementsByTagName("img"),
	img = function img (el,x,y) {
		var d = document.createElement("div");
		d.className     = "frame";
		d.style.left    = 50 * x + "%";
		d.style.top     = 50 * y + "%";
		var img         = document.createElement("img");
		img.className   = "img";
		img.src         = src[Math.floor(Math.random()*src.length)].src;
		img.onmousedown = function () {
			div(this.parentNode);
			this.parentNode.removeChild(this);
		}
		d.appendChild(img);
		el.appendChild(d);
	},
	div = function div (el) {
		img(el,0,0);
		img(el,1,0);
		img(el,0,1);
		img(el,1,1);
	};
	div(document.getElementById("screen"));
	window.ondragstart = function() { return false; } 
}, false);

style.css

html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
}
body {
	margin:0;
	padding:0;
	background:#000;
	position:absolute;
	width:100%;
	height:100%;
}
#screen {
	position:absolute;
	width:100%;
	height:100%;
}
#screen .img{
	position:absolute;
	cursor:pointer;
	width:100%;
	height:100%;
	user-select: none;
}
#screen .frame {
	position:absolute;
	width:50%;
	height:50%;
}
#images {
	display:none;
}