Fastelavn 2025

by Kofod

HTML

<div id="intro" style="color: white; text-align: center; font-size: 20px; text-shadow: 2px 2px 1px #333;">
        <h2>Happy Fastelavn!</h2>
        <p>Are you ready to celebrate with us?</p>
        <p>Click the barrel until the candy pops out, then collect all the candy that's scattered around!</p>
        <button id="startBtn">Start Game</button>
    </div>
    
    <div id="barrelImageContainer" style="display: none;">
        <img id="barrelImage" src="https://i.imgur.com/WE4OVBe.png" alt="Click Me">
    </div>
    
    <div class="clickGame">
        <div id="CG_message">
            <div style="color: white; text-align: center; font-size: 20px; text-shadow: 2px 2px 1px #333;">
                <span style="font-size: 35px!important;">Congratualtions!</span><br>
                You got all the candy!<br><br>
                Female Code:<br>
                <span style="color: #bbb; font-size: 20px!important;">3lLPH4B4F0RF4ST3L4VN</span>
                <br><span style="font-size: small;">This code is unlimited until March 3rd 11pm</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

body {
            text-align: center;
            font-family: Arial, sans-serif;
            background: url('https://i.imgur.com/BqfjJzH.png') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #intro, #barrelImageContainer, #CG_message {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        #intro {
            width: 80%;
            padding: 20px;
            border: 2px solid black;
            border-radius: 15px;
            border-color: #18b2b0;
            background: rgba(0, 0, 0, 0.6);
        }
        #startBtn {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 15px;
            margin-top: 20px;
            border-color:#d33588;
            background-color: #f9589d;
        }
        #barrelImageContainer {
            display: none;
        }
        #barrelImage {
            width: 300px;
            cursor: pointer;
            z-index: 10;
        }
        .clickGame {
            width: 688px;
            height: 500px;
            position: relative;
            margin: 20px auto;
            display: none;
        }
        .box_a, .box_b, .box_b_after, .box_c, .box_c_after {
            height: 90px;
            background-repeat: no-repeat;
            position: absolute;
        }
        #CG_message {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            align-items: center;
            justify-content: center;
            width: 80%;
            height: auto;
            background: rgba(0, 0, 0, 0.6);
            padding: 20px;
           ...

JavaScript

$(document).ready(function () {
    let clicksNeeded = Math.floor(Math.random() * 3) + 7; // number is randomly selected. 3 is minimum, 10 is maximum (bc 3 + 7 = 10)
    let clickCount = 0;

    $("#startBtn").click(function () {
        $("#intro").hide();
        $("#barrelImageContainer").css("display", "block");
        console.log("Barrel image should now be visible.");
    });

    $("#barrelImage").click(function () {
        console.log("Barrel image clicked.");
        clickCount++;
        console.log(`Click count: ${clickCount}/${clicksNeeded}`);

        if (clickCount >= clicksNeeded) {
            console.log("Barrel disappears, game starts.");
            $("#barrelImageContainer").hide();
            $(".clickGame").show();
            startClickGame();
        }
    });

// from here insert your click game code
    // 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/V2uSpau.png")',
  'url("https://i.imgur.com/8cFjZbN.png")',
  'url("https://i.imgur.com/d0vpWPk.png")',
  'url("https://i.imgur.com/2fRj2Oo.png")',
  'url("https://i.imgur.com/D3CKhEa.png")',
  'url("https://i.imgur.com/gKOgsid.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 =...