wheres wilson

In this example below you will see how to do a wheres wilson with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DecimxAckerman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DecimxAckerman ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>wheres wilson</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Where's Wilson?</h1>

<div id="map"></div>

<button>HIDE WILSON AGAIN</button>

<h2 id="score"></h2>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DecimxAckerman/wheres-wilson-yVgbOJ */
body {
  display: block;
  text-align: center;
  font-family: Lucida Sans Unicode;
}

#map {
  border:1px solid black;
  width: 620px;
  height: 620px;
  display:block;
  margin:auto;
  background-image: url("http://www.fantasticmaps.com/wp-content/uploads/2013/05/MapForPost2-624x624.jpg");
}

.box{
  border:1px solid aqua;
  width:149px;
  height:149px;
  display:block;
  float:left;
  margin: 1.5px 1.5px 1.5px 1.5px;
}

button {
  margin-top: 30px;
}


img {
  width:80%;
  height:80%;
  margin-top:17px;
  margin-left:17px;
  display:none;
  
}

.box:hover {
  background-color: rgba(163,229,209,0.4);
}

/*Downloaded from https://www.codeseek.co/DecimxAckerman/wheres-wilson-yVgbOJ */
// setting up img and lines for positions

for (var i=0; i<16; i++) {
  var wilson = document.createElement("img");
  wilson.setAttribute("src","http://vignette3.wikia.nocookie.net/dont-starve-game/images/7/78/Wilson.png/revision/20131129230748");
  wilson.className = "wilson " + i;
  var box = document.createElement("div");
  box.className = "box " + i;
  box.appendChild(wilson);
  document.getElementById("map").appendChild(box);
}

// line set up ends here

// setting which box wilson should appear

var position = Math.floor(Math.random()*16);

// setting positions

// if we get the right box, show Wilson

$(".box").click(function(){
  if($(this).hasClass(position)){
    $(this).children().show();
  }
})

// show Wilson

// reset

$("button").click(function(){
  $("img").hide();
  position = Math.floor(Math.random()*16);
})

// reset

Comments