Klikspel

by Dutton

HTML

<div class="clickGame_container" style="position: relative; overflow: hidden; width: 688px; height: 500px; background: url(https://imgur.com/KAScDMI.png)">

	<div class="CG_game" style="position: absolute; width: 648px; height: 460px; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div>

	<div class="CG_result" 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: #fff; text-align: center; font-size: 18px; text-shadow: 2px 2px 1px #333;">
        	<span style="font-family: 'Patrick Hand SC', sans-serif; font-size: 45px;">
				GEFELICITEERD!
			</span><br>
			JE HEBT ALLE BLOEMETJES GEHAD! Te claimen t/m 27 april.<br><br>
			<span style="color: #bbb;">
				M@nyfl0wer$$!!
			</span><br><br>

			Claim <a href="https://virtualpopstar.com/financial" target="_blank" style="color: white; font-weight: bold; text-decoration: none;">hier!</a><br><br>

		</div>
	</div>

</div>

CSS

* {
	font-family: 'Arial', sans-serif;
}

JavaScript

$(document).ready(function()
{
	var lvlInfo =
	[
		[
			2, 50, 60, 'yes',
			[
			  'https://imgur.com/emq3f0f.png',
			  'https://imgur.com/ugzjofF.png',
			  'https://imgur.com/JZmj200.png'
			]
		],
		[
			3, 35, 45, 'yes',
			[
			  'https://imgur.com/emq3f0f.png',
			  'https://imgur.com/ugzjofF.png',
			  'https://imgur.com/JZmj200.png'
			]
		],
		[
			4, 20, 30, 'yes',
			[
			  'https://imgur.com/emq3f0f.png',
			  'https://imgur.com/ugzjofF.png',
			  'https://imgur.com/JZmj200.png'
			]
		]
	]

	makeLevel(0, lvlInfo[0][0], lvlInfo[0][1], lvlInfo[0][2], lvlInfo[0][3], lvlInfo[0][4]);
	$(document).on('click', '.CG_box', function()
	{
		repondTo_clickedBox($(this), lvlInfo);
	});
});

$('head').append('<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap" rel="stylesheet">');

function makeLevel(level, spawns, minWidth, maxWidth, rotate, imageArray)
{
	var currentDIV;
	var randomWidth;
	var randomRotate;

	for (i = 0; i < spawns; i++)
	{
		$('.CG_game').append('<img class="CG_box level_' + level + '" style="position: absolute;" src="' + getImage(imageArray) + '">');
		currentDIV = $('.CG_box.level_' + level).last();
		
		if (rotate == 'no')
			randomRotate = 0;
		else
			randomRotate = Math.random() * 361;

		randomWidth = Math.floor((Math.random() * (maxWidth - minWidth + 1)) + minWidth);
		currentDIV.css('width', randomWidth);
		currentDIV.css({
			left: Math.floor(Math.random() * ($('.CG_game').width() - randomWidth)),
			// currentDIV.height() isn't working how it should???
			top: Math.floor(Math.random() * ($('.CG_game').height() - currentDIV.height())),
			transform: 'rotate(' + randomRotate + 'deg)'
		});
	}
}

function getImage(imageArray)
{
	var pickedImg
	
	pickedImg = Math.floor(imageArray.length * Math.random());
	return (imageArray[pickedImg])
}

function repondTo_clickedBox(clickedBox, lvlInfo)
{
	var clickedLvl;
		
	clickedLvl =...