Magazine | April - Click Game

HTML

<div class="clickGameContainer">
	<div class="clickGame"></div>
	<div id="CG_message" style="display: none; position: absolute; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);">
		<div style="color: white; text-align: center; font-size: 20px; text-shadow: 2px 2px 1px #333;">
        	<span style="font-size: 35px!important;">
				CONGRATULATIONS!
			</span><br>
			You solved the click game.<br><br>
			
			Male Code (LE 25 Claims):<br>
			<span style="color: #bbb; font-size: 20px!important;">
				WeHaveBEEnBEEsyThisMonth
			</span><br><br>
			
			Female Code (LE 125 Claims):<br>
			<span style="color: #bbb; font-size: 20px!important;">
				WeHaveBEEnFBEEsyThisFMonth
			</span><br><br>
			
			Redeem <a href="http://en.virtualpopstar.com/financial/couponclaim" target="_blank" style="color: white; font-weight: bold; text-decoration: none;">here</a>
		</div>
	</div>
</div>

CSS

.clickGameContainer {
  position: relative;
  width: 688px;
  height: 500px;
  background: url(https://i.imgur.com/3Btufxg.jpg);
}

.clickGame {
  position: absolute;
  width: 608px;
  height: 420px;
  top: 80px;
  left: 0px;
}

.box_a {
  height: 50px;
  background-repeat: no-repeat;
  position: absolute;
}

.box_b,
.box_b_after {
  height: 50px;
  background-repeat: no-repeat;
  position: absolute;
}

.box_c,
.box_c_after {
  height: 50px;
  background-repeat: no-repeat;
  position: absolute;
}

JavaScript

// START "1ST LEVEL"
// Change the "5" in "i < 5" to another number to change the number of images it starts with
for (var i = 0; i < 4; i++) {
  $('.clickGame').append('<div class="box_a visible"></div>');
}

$( '.box_a' ).each(function( index ) {
// Put here the images you want the code to pick from randomly, you can add more if you want to
	var pick_image = [
  'url("https://en.virtualpopstar.com/layout/nl/images/doll/cr3fi60nui2zoos8hs2yblczgadu61619439382.png")',
  'url("https://en.virtualpopstar.com/layout/nl/images/doll/cob9pthchl4paafq8pcxsju820xww1619439416.png")',
  'url("https://en.virtualpopstar.com/layout/nl/images/doll/soyq9zn63s4vg61cfsobg1myj49b1619439452.png")',
  'url("https://en.virtualpopstar.com/layout/nl/images/doll/jr16zh1jqywpef5sk6o38yuzsr8ev1619439484.png")',
  'url("https://en.virtualpopstar.com/layout/nl/images/doll/4g0v5z4zz7m30u3704zbikexc2wx51619439514.png")'
	];

var size = pick_image.length
var image = Math.floor(size*Math.random())

// Randomizes the width
// 20 = the minimum width
// 21 - 1 + 20 = 40 = the maximum width
// Change the width if you want to
var a = Math.floor((Math.random() * 21) + 20)

  $(this).css({
  	width : a,
    backgroundSize : a,
    left : Math.floor(Math.random() * ($('.clickGame').width() - a)),
    top : Math.floor(Math.random() * ($('.clickGame').height() - $(this).height())),
    backgroundImage : pick_image[image]
  });

	var b = Math.random() * 361;
	$(this).css('transform', 'rotate(' + b + 'deg)');
});
// END "1ST LEVEL"

// START "2ND LEVEL"
$(document).on('click', '.box_a', function(){
  $(this).removeClass( "visible" );
  $(this).css({'display': 'none'});
 
// Change the "2" in "i < 2" to another number to change the number of images that appear when you click one of the images from the "1st level"
  for (var i = 0; i < 3; i++) {
  	$('.clickGame').append('<div class="box_b"></div>');
	}
	
  $( '.box_b' ).each(function( index ) {
// Put here the images you want the code to pick from randomly,...