Find Wally

Resize the display window, and find the picture of wally!

HTML

<title>Where's Wally?</title>

<body>
  <div class="text">
    <h1>Where's Wally?</h1>
    <p>Find Wally! </p>
    
    <p>
      If you are viewing this on jsfiddle, please resize the display window to be as large as possible
    </p>
    <p>
    This is what you are looking for: <img class = "wally_example" src = "https://pbs.twimg.com/profile_images/561278946369495042/vrkX_baO.png"/>
    </p>
     <h1>Stats:</h1>
    <p>Time taken finding last Wally: <span id="time">{not attempted yet}</span></p>
    <p>Clicks: <span id="clicks">{No clicks so far}</span></p>
    <p>Total Time:<span id="reactionTotal">0</span>s</p>
   
  </div>




  <div class="wally_hide">
    <button id="wally" href="#"></button>
  </div>


</body>

CSS

body {
  font-family: Verdana, Geneva, sans-serif;
  text-align: center;
  color: white;
  background-color: #000000;
}
.wally_example {
  height: 30px;
  width: 30px;
}
.wally_hide {
  background-image: url('http://i.imgur.com/OTfytjA.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 900px;
  height: 100%;
  width: 100%;
}

#wally {
  background-image: url('https://pbs.twimg.com/profile_images/561278946369495042/vrkX_baO.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 30px;
  width: 30px;
  display: none;
  position: absolute;
}

JavaScript

var clickedTime = 0;
	var createdTime = 1;
	var reactionTime = 0;
	var totalReactionTime = 0;
	var clicks = 1;

	function loadShape() {
	  setTimeout(function() {
	    document.getElementById("wally").style.display = "block";
	  }, 4000);
	}

	loadShape();


	function topBotMargin() {
	  var upDownRandom = Math.floor((Math.random() * 800) + 1);
	  var vertical = upDownRandom + "px";
	  return vertical;
	}

	function leftRightMargin() {
	  var leftRightRandom = Math.floor((Math.random() * 1200) + 1);
	  var horizontal = leftRightRandom + "px";
	  return horizontal;
	}


	function makeBox() {

	  var time = (Math.random() * 5000);


	  setTimeout(function() {
	    document.getElementById("wally").style.display = "block";
	    document.getElementById("wally").style.marginTop = 					       topBotMargin();
	    document.getElementById("wally").style.marginLeft = 	             leftRightMargin();
	    createdTime = Date.now();
	  }, time);

	}



	document.getElementById("wally").onclick = function() {


	  reactionTime = 0;
	  clickedTime = Date.now();
	  reactionTime = (clickedTime - createdTime) / 1000;
	  totalReactionTime += reactionTime;
	  document.getElementById("clicks").innerHTML = clicks;
	  document.getElementById("reactionTotal").innerHTML =               (Math.floor(totalReactionTime * 100) / 100);
	  document.getElementById("time").innerHTML = reactionTime + "s";
	  this.style.display = "none";
	  clicks += 1;
	  makeBox();
	}

	makeBox();