Halloween click game 2024

by Kofod

HTML

<div class="clickGame">
	<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;">
				Happy Halloween!
			</span><br>
			You saved all the candy!<br>
      How are you spending this halloween? Let us know in the comments!
        </div>
	</div>
</div>

CSS

.clickGame {
  width: 688px;
  height: 500px;
  background: url(https://i.imgur.com/ww34Lb9.png);
  position: relative;
}

.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 < 7; 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://i.imgur.com/Jbgcfb5.png")',
  'url("https://i.imgur.com/d0eIrJp.png")',
  'url("https://i.imgur.com/ZGaB5MJ.png")',
  'url("https://i.imgur.com/Z7UnpJF.png")',
  'url("https://i.imgur.com/JW9rosP.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 < 2; 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, you can add more if you want to
	var pick_image = [
  'url("https://i.imgur.com/Jbgcfb5.png")',
  'url("https://i.imgur.com/d0eIrJp.png")',
  'url("https://i.imgur.com/ZGaB5MJ.png")',
  'url("https://i.imgur.com/Z7UnpJF.png")',
  'url("https://i.imgur.com/JW9rosP.png")'
	];

var size = pick_image.length
var image =...