延迟函数调用并显示类图像10秒钟

Question

在下面给出的代码中，显示 9个框，其值类似于digital time，

还有一个 box002 类，显示digits对应于随机选择的9个框的值。

box002 can be dragged to digital time starting with that digit，然后该盒子得到dissappeared，它下面的图像部分将是visible，

明智地将box002中的所有9位数字拖放到具有数字时间的相互对应的框中，最后框后的图像应显示10 seconds和a congradulation effect popups。

我的问题是我无法在盒子后面显示图像10秒钟，而在10秒钟之前将另一组数字时间加载到盒子中。

如何更正我的代码？有没有办法可以做到这一点？

        var timeOut;

        function buildImage() {
            document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
        }

        function changeImage() {
            index++;
            if (index >= images.length) {
                index = 0;
            }
            document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
        }

        var index = 0;

var timeOut;

function animateCongrat() 
{
  $('.congrats').show();

  clearTimeout(timeOut);
  addBlueBody();

  reset();

  var numberOfStars = 20;

  for (var i = 0; i < numberOfStars; i++) {
    $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
  }

  animateText();
  animateBlobs();

  hideCongratAndBlueBody();
}






function addBlueBody() {
  $('body').addClass('bodyblue');
			$('#container').hide();
			$('#2container').hide();
			$('#3container').hide();
			$('#heading').hide();
			$('.hint').hide();
			
			$('#2').hide();
			$('.level').hide();
			$('.reset').hide();
			$('.quit').hide();
}

function hideCongratAndBlueBody() {
  timeOut = setTimeout(() => {
                $('.congrats').hide();
                $('body').removeClass('bodyblue');
				$('#container').show();
				$('#2container').show();
				$('#3container').show();
				$('#heading').show();
				$('.hint').show();
				
				$('#2').show();
				$('.level').show();
				$('.reset').show();
				$('.quit').show();
  }, 4000);
}

function reset() {
  $.each($('.blob'), function(i) {
    TweenMax.set($(this), {
      x: 0,
      y: 0,
      opacity: 1
    });
  });

  TweenMax.set($('h1'), {
    scale: 1,
    opacity: 1,
    rotation: 0
  });
}

function animateText() {
  TweenMax.from($('h1'), 0.8, {
    scale: 0.4,
    opacity: 0,
    rotation: 15,
    ease: Back.easeOut.config(4),
  });
}

function animateBlobs() {

  var xSeed = _.random(350, 380);
  var ySeed = _.random(120, 170);

  $.each($('.blob'), function(i) {
    var $blob = $(this);
    var speed = _.random(1, 5);
    var rotation = _.random(5, 100);
    var scale = _.random(0.8, 1.5);
    var x = _.random(-xSeed, xSeed);
    var y = _.random(-ySeed, ySeed);

    TweenMax.to($blob, speed, {
      x: x,
      y: y,
      ease: Power1.easeOut,
      opacity: 0,
      rotation: rotation,
      scale: scale,
      onStartParams: [$blob],
      onStart: function($element) {
        $element.css('display', 'block');
      },
      onCompleteParams: [$blob],
      onComplete: function($element) {
        $element.css('display', 'none');
      }
    });
  });
}

 var i = 0;
 function store() {
  var level = ['https://via.placeholder.com/300.png?text=Level+ 1','https://via.placeholder.com/300.png?text=Level+ 2','https://via.placeholder.com/300.png?text=Level+1']
  document.querySelector("#levelimage").src=level[i++];
  if (i>level.length-1)i=0;
}

function windowClose() {
window.open('','_parent','');
window.close();
}

var items = [  
      { label: '01:40', url: 'https://via.placeholder.com/75x75?text=1'  },
      { label: '02:20', url: 'https://via.placeholder.com/75x75?text=2'  },
      { label: '03:50', url: 'https://via.placeholder.com/75x75?text=3'  },
      { label: '04:45', url: 'https://via.placeholder.com/75x75?text=4'  },
      { label: '05:35', url: 'https://via.placeholder.com/75x75?text=5'  },
      { label: '06:10', url: 'https://via.placeholder.com/75x75?text=6'  },
      { label: '07:15', url: 'https://via.placeholder.com/75x75?text=7'  },
      { label: '08:10', url: 'https://via.placeholder.com/75x75?text=8'  },
      { label: '09:30', url: 'https://via.placeholder.com/75x75?text=9'  },
	  { label: '10:40', url:'https://via.placeholder.com/75x75?text=10' },
      { label: '11:25', url:'https://via.placeholder.com/75x75?text=11' },
      { label: '12:50', url:'https://via.placeholder.com/75x75?text=12' }];

var tempimages = [];
var array2=[];
array2 = items.slice(); 

var backimgcount=1;
var len=array2.length;

var item;
var displaycounter=0;


   

var images = ['https://picsum.photos/200/300/?random','https://picsum.photos/200/300/?random','pokedex3d_pro_art_1.jpg','https://picsum.photos/200/300/?random','https://picsum.photos/200/300/?random' ];
var index = 0;

function buildImage() {
    document.getElementById('content').style.backgroundImage = 'url('+images[index]+')';
}

function changeImage() {
    index++;
  if (index >= images.length) index = 0;
    document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}
		





function rvalue() {
	
	
 elements = document.getElementsByClassName("box");

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="   #79ff4d";
		//elements[i].borderRadius = "2px";
		elements[i].style.border = "2px solid #000066";
		//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
	
    }	
	
ptags = document.querySelectorAll('[name="values"]');







for (var index = 0; index <9; index++) 
     {
      randomIndex = Math.floor(Math.random() * array2.length)
      
      item = array2[randomIndex];
	 
	  ptags[index].style.visibility = "visible";
      ptags[index].textContent = item.label;
      tempimages.push({data:item, index: randomIndex});
	  
	  ptags[index].dataset.itemIndex = randomIndex;
    }
	 
	var tlen=tempimages.length;
  	

	
}
	

function displayAllImages() 
{
  if (displaycounter==0 && tempimages.length == 0) 
  {
    rvalue();
	
	store();
	//return;
	
  }
  else{
  setTimeout(rvalue, 11000)

  
  }
  	//tempimages = tempimages.concat(tempimages.splice(0,2));
	//item = tempimages.splice(0, 1);
	
	function shuffle(array) {
   var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Used like so
var arr = tempimages;
arr = shuffle(arr);

	
	
	item = arr.shift(); 
    image = document.getElementById('slide');
    image.src = item.data.url;
    image.dataset.itemIndex = item.index;
	
	  
};

$(function() {
 	 
  displayAllImages(); 
  
});	

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id).classList.add('dashed');
}

function drop(ev) {

  ev.preventDefault();


 var data = ev.dataTransfer.getData("Text");
 var el = document.getElementById(data);
 //alert(data);
 //alert(el);
	
 var x=document.getElementById("slide").dataset.itemIndex;

 var y = ev.target.dataset.itemIndex;

 //alert("x=>" + x + " y=>" + y);
  
 if(x==y)
  {
  //el.parentNode.removeChild; 
  
  
  ev.currentTarget.style.backgroundColor = 'initial'; 
  ev.currentTarget.style.border = 'initial';

  var pParagraph = ev.currentTarget.firstElementChild;
  //ev.currentTarget.removeChild(pParagraph);
  pParagraph.style.visibility = "hidden";
  
  item=this.item;
  var arrayvalue=item.dataindex;
  array2.splice(arrayvalue,1);
  
 	
 

 
  

  //alert("sucessfull");
  if (tempimages.length == 0) 
  {
	
	displaycounter++;
	store();
	setTimeout(animateCongrat, 3000)
	


	
	changeImage();
  }
  displayAllImages();
   
   
  }
  else{
  playAudio2();
  alert("WRONG TIME PLACED");
  }

}

@font-face {
  font-family: 'Sigmar One';
  font-style: normal;
  font-weight: 400;
  src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}

@import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
  overflow: hidden;
}

.dashed {
	border: 2px dashed #999 !important;
}
.bodyblue {
  background: #3da1d1;
  color: #fff;
}

.congrats {
  position: absolute;
  top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
}

h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
 /* position: absolute;
  top: 0; */
  text-align: center;
  width: 100%;
}



.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
}


.timetaken {
  margin-top: 50%;
}

.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}


.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #99ffff;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  cursor:pointer;
}

.box002 {
  position: absolute;
  top: 27.5vh;
  left: 73.3vw;
  
  cursor:pointer;
     }
	
	.box002 img {
  width: 13.5vw;
  height: 22.5vh;
  border-radius: 50%;
}		
.level{
  position: absolute;
  top: 81.3vh;
  left: 62.3vw;
  
  cursor:pointer;}
  
.level img{
	width: 9.3vw;
  height: 15.5vh;
  border-radius: 50%;
	}  
.reset{
	position: absolute;
  top: 81.9vh;
  left: 77.3vw;
  
  cursor:pointer;}

.reset img{
	width: 8.3vw;
  height: 14.5vh;
  border-radius: 50%;
	} 
.quit{position: absolute;
  top: 82.3vh;
  left: 90.3vw;
  
  cursor:pointer;}
.quit img{
	width: 7.3vw;
  height: 12.5vh;
  border-radius: 50%;
	}  
  

#timer{
font-family: 'Sigmar One', cursive;
margin-top:-20%;
margin-left:120%;
}


#heading{
font-family: 'Sigmar One', cursive;
color:#F534BB;
}

#container {
    white-space:nowrap;
	border:px solid #CC0000;
	
}

.containerr{
	border:px solid #FF3399;
	} 
.pic{
	background-size: 100% 100%;
	}	
	
.container2 {
  width: 35vw;
  position: fixed;
  top: 43.5vh;
  left: 13vw;
}
.box p {
  font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);

color: #005ce6;
text-align: center;
}	

.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

body{

    background-size: 100vw 100vh;
}

.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}

ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
		
.reset img:hover {opacity: 1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<body onload="buildImage();">
<div class="congrats">
  
  <h1>Congratulations!</h1>
  <h1 style="color:#66FFFF; font-size:24px;">Time Taken:<h1 style="float:left; color:#33FFCC; font-size:24px; padding-top:-30%;" id="timetaken"></h1>		    
  </h1>
  
  </div>


    
    <h4 id="timer" style="color:#ffc34d; font-size:29px"> Time   <span id="countdowntimer">0 </span></h4>
    
 
	
<div class="container2">
    <div class="containerr">
    <div class="pic" id="content" >
            <div id="container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
             <div id="2container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
             <div id="3container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
                   
      </div>      
          
            
  </div>

</div>
    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
	<img src=""  draggable="true" id="slide"  border="rounded"/>
</div> 


<div class="level" >
<img src="" id="levelimage"/>
</div>
</body>

Answer 1

我认为您的代码问题比刚才提到的更多。基本上，我已经将您的11秒计时器分配给了一个变量，并在您“ displayallimages”时调用了该计时器，并在它们与值正确匹配时清除了间隔，因此计时器将无法运行并将计时器重置为11秒。

我对js文件的第213、214和242行的编辑。

var timeOut;

function buildImage() {
	document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}

function changeImage() {
	index++;
	if (index >= images.length) {
		index = 0;
	}
	document.getElementById('content').style.backgroundImage = 'url(' + images[index] + (index + 1) + ')';
}
var index = 0;
var timeOut;

function animateCongrat() {
	$('.congrats').show();
	clearTimeout(timeOut);
	addBlueBody();
	reset();
	var numberOfStars = 20;
	for (var i = 0; i < numberOfStars; i++) {
		$('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
	}
	animateText();
	animateBlobs();
	hideCongratAndBlueBody();
}

function addBlueBody() {
	$('body').addClass('bodyblue');
	$('#container').hide();
	$('#2container').hide();
	$('#3container').hide();
	$('#heading').hide();
	$('.hint').hide();
	$('#2').hide();
	$('.level').hide();
	$('.reset').hide();
	$('.quit').hide();
}

function hideCongratAndBlueBody() {
	timeOut = setTimeout(() => {
		$('.congrats').hide();
		$('body').removeClass('bodyblue');
		$('#container').show();
		$('#2container').show();
		$('#3container').show();
		$('#heading').show();
		$('.hint').show();
		$('#2').show();
		$('.level').show();
		$('.reset').show();
		$('.quit').show();
	}, 4000);
}

function reset() {
	$.each($('.blob'), function(i) {
		TweenMax.set($(this), {
			x: 0,
			y: 0,
			opacity: 1
		});
	});
	TweenMax.set($('h1'), {
		scale: 1,
		opacity: 1,
		rotation: 0
	});
}

function animateText() {
	TweenMax.from($('h1'), 0.8, {
		scale: 0.4,
		opacity: 0,
		rotation: 15,
		ease: Back.easeOut.config(4),
	});
}

function animateBlobs() {
	var xSeed = _.random(350, 380);
	var ySeed = _.random(120, 170);
	$.each($('.blob'), function(i) {
		var $blob = $(this);
		var speed = _.random(1, 5);
		var rotation = _.random(5, 100);
		var scale = _.random(0.8, 1.5);
		var x = _.random(-xSeed, xSeed);
		var y = _.random(-ySeed, ySeed);
		TweenMax.to($blob, speed, {
			x: x,
			y: y,
			ease: Power1.easeOut,
			opacity: 0,
			rotation: rotation,
			scale: scale,
			onStartParams: [$blob],
			onStart: function($element) {
				$element.css('display', 'block');
			},
			onCompleteParams: [$blob],
			onComplete: function($element) {
				$element.css('display', 'none');
			}
		});
	});
}
var i = 0;

function store() {
	var level = ['https://via.placeholder.com/300.png?text=Level+ 1', 'https://via.placeholder.com/300.png?text=Level+ 2', 'https://via.placeholder.com/300.png?text=Level+1']
	document.querySelector("#levelimage").src = level[i++];
	if (i > level.length - 1) i = 0;
}

function windowClose() {
	window.open('', '_parent', '');
	window.close();
}
var items = [{
	label: '01:40',
	url: 'https://via.placeholder.com/75x75?text=1'
}, {
	label: '02:20',
	url: 'https://via.placeholder.com/75x75?text=2'
}, {
	label: '03:50',
	url: 'https://via.placeholder.com/75x75?text=3'
}, {
	label: '04:45',
	url: 'https://via.placeholder.com/75x75?text=4'
}, {
	label: '05:35',
	url: 'https://via.placeholder.com/75x75?text=5'
}, {
	label: '06:10',
	url: 'https://via.placeholder.com/75x75?text=6'
}, {
	label: '07:15',
	url: 'https://via.placeholder.com/75x75?text=7'
}, {
	label: '08:10',
	url: 'https://via.placeholder.com/75x75?text=8'
}, {
	label: '09:30',
	url: 'https://via.placeholder.com/75x75?text=9'
}, {
	label: '10:40',
	url: 'https://via.placeholder.com/75x75?text=10'
}, {
	label: '11:25',
	url: 'https://via.placeholder.com/75x75?text=11'
}, {
	label: '12:50',
	url: 'https://via.placeholder.com/75x75?text=12'
}];
var tempimages = [];
var array2 = [];
array2 = items.slice();
var backimgcount = 1;
var len = array2.length;
var item;
var displaycounter = 0;
var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'pokedex3d_pro_art_1.jpg', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;

function buildImage() {
	document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}

function changeImage() {
	index++;
	if (index >= images.length) index = 0;
	document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}

function rvalue() {
	elements = document.getElementsByClassName("box");
	for (var i = 0; i < elements.length; i++) {
		elements[i].style.backgroundColor = "   #79ff4d";
		//elements[i].borderRadius = "2px";
		elements[i].style.border = "2px solid #000066";
		//object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
	}
	ptags = document.querySelectorAll('[name="values"]');
	for (var index = 0; index < 9; index++) {
		randomIndex = Math.floor(Math.random() * array2.length)
		item = array2[randomIndex];
		ptags[index].style.visibility = "visible";
		ptags[index].textContent = item.label;
		tempimages.push({
			data: item,
			index: randomIndex
		});
		ptags[index].dataset.itemIndex = randomIndex;
	}
	var tlen = tempimages.length;
}

var timer;

function displayAllImages() {
  
	if (displaycounter == 0 && tempimages.length == 0) {
		rvalue();
		store();
		//return;
	} else {
        clearInterval(timer);
        timer = setTimeout(rvalue, 11000);
	}
	//tempimages = tempimages.concat(tempimages.splice(0,2));
	//item = tempimages.splice(0, 1);
	function shuffle(array) {
		var currentIndex = array.length,
			temporaryValue, randomIndex;
		// While there remain elements to shuffle...
		while (0 !== currentIndex) {
			// Pick a remaining element...
			randomIndex = Math.floor(Math.random() * currentIndex);
			currentIndex -= 1;
			// And swap it with the current element.
			temporaryValue = array[currentIndex];
			array[currentIndex] = array[randomIndex];
			array[randomIndex] = temporaryValue;
		}
		return array;
	}
	// Used like so
	var arr = tempimages;
	arr = shuffle(arr);
	item = arr.shift();
	image = document.getElementById('slide');
	image.src = item.data.url;
	image.dataset.itemIndex = item.index;
};
$(function() {
    timer = setTimeout(rvalue, 11000);
	displayAllImages();
});

function allowDrop(ev) {
	ev.preventDefault();
}

function drag(ev) {
	ev.dataTransfer.setData("Text", ev.target.id).classList.add('dashed');
}

function drop(ev) {
	ev.preventDefault();
	var data = ev.dataTransfer.getData("Text");
	var el = document.getElementById(data);
	//alert(data);
	//alert(el);
	var x = document.getElementById("slide").dataset.itemIndex;
	var y = ev.target.dataset.itemIndex;
	//alert("x=>" + x + " y=>" + y);
	if (x == y) {
		//el.parentNode.removeChild; 
		ev.currentTarget.style.backgroundColor = 'initial';
		ev.currentTarget.style.border = 'initial';
		var pParagraph = ev.currentTarget.firstElementChild;
		//ev.currentTarget.removeChild(pParagraph);
		pParagraph.style.visibility = "hidden";
		item = this.item;
		var arrayvalue = item.dataindex;
		array2.splice(arrayvalue, 1);
		//alert("sucessfull");
		if (tempimages.length == 0) {
			displaycounter++;
			store();
			setTimeout(animateCongrat, 3000)
			changeImage();
		}
		displayAllImages();
	} else {
		playAudio2();
		alert("WRONG TIME PLACED");
	}
}

@font-face {
  font-family: 'Sigmar One';
  font-style: normal;
  font-weight: 400;
  src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}

@import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
  overflow: hidden;
}

.dashed {
	border: 2px dashed #999 !important;
}
.bodyblue {
  background: #3da1d1;
  color: #fff;
}

.congrats {
  position: absolute;
  top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: none;
}

h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Sigmar One', cursive;
  cursor: pointer;
  z-index: 2;
 /* position: absolute;
  top: 0; */
  text-align: center;
  width: 100%;
}



.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
}


.timetaken {
  margin-top: 50%;
}

.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}


.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #99ffff;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  cursor:pointer;
}

.box002 {
  position: absolute;
  top: 27.5vh;
  left: 73.3vw;
  
  cursor:pointer;
     }
	
	.box002 img {
  width: 13.5vw;
  height: 22.5vh;
  border-radius: 50%;
}		
.level{
  position: absolute;
  top: 81.3vh;
  left: 62.3vw;
  
  cursor:pointer;}
  
.level img{
	width: 9.3vw;
  height: 15.5vh;
  border-radius: 50%;
	}  
.reset{
	position: absolute;
  top: 81.9vh;
  left: 77.3vw;
  
  cursor:pointer;}

.reset img{
	width: 8.3vw;
  height: 14.5vh;
  border-radius: 50%;
	} 
.quit{position: absolute;
  top: 82.3vh;
  left: 90.3vw;
  
  cursor:pointer;}
.quit img{
	width: 7.3vw;
  height: 12.5vh;
  border-radius: 50%;
	}  
  

#timer{
font-family: 'Sigmar One', cursive;
margin-top:-20%;
margin-left:120%;
}


#heading{
font-family: 'Sigmar One', cursive;
color:#F534BB;
}

#container {
    white-space:nowrap;
	border:px solid #CC0000;
	
}

.containerr{
	border:px solid #FF3399;
	} 
.pic{
	background-size: 100% 100%;
	}	
	
.container2 {
  width: 35vw;
  position: fixed;
  top: 43.5vh;
  left: 13vw;
}
.box p {
  font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);

color: #005ce6;
text-align: center;
}	

.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

body{

    background-size: 100vw 100vh;
}

.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}

ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
		
.reset img:hover {opacity: 1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<body onload="buildImage();">
<div class="congrats">
  
  <h1>Congratulations!</h1>
  <h1 style="color:#66FFFF; font-size:24px;">Time Taken:<h1 style="float:left; color:#33FFCC; font-size:24px; padding-top:-30%;" id="timetaken"></h1>		    
  </h1>
  
  </div>


    
    <h4 id="timer" style="color:#ffc34d; font-size:29px"> Time   <span id="countdowntimer">0 </span></h4>
    
 
	
<div class="container2">
    <div class="containerr">
    <div class="pic" id="content" >
            <div id="container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
             <div id="2container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
             <div id="3container">
            
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
                <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
            </div>
                   
      </div>      
          
            
  </div>

</div>
    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
	<img src=""  draggable="true" id="slide"  border="rounded"/>
</div> 


<div class="level" >
<img src="" id="levelimage"/>
</div>
</body>