div class="container py-4">
🌿 Shape Explorer: Jungle Geometry
Loading shape mission...
const allShapes = [
{ class: 'square' },
{ class: 'circle' },
{ class: 'triangle' },
{ class: 'rectangle' }
];
const colors = ['#FFCDD2', '#F8BBD0', '#E1BEE7', '#BBDEFB', '#C8E6C9', '#FFF9C4', '#D7CCC8'];
let targetShape = "square";
let correctClicks = 0;
let totalCorrect = 0;
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
function createShapes() {
const area = $('#gameArea');
area.empty();
const chosenShapes = [];
for (let i = 0; i < 12; i++) {
chosenShapes.push(allShapes[Math.floor(Math.random() * allShapes.length)]);
}
shuffle(chosenShapes);
const uniqueAvailableTargets = [...new Set(chosenShapes.map(s => s.class))];
targetShape = uniqueAvailableTargets[Math.floor(Math.random() * uniqueAvailableTargets.length)];
totalCorrect = chosenShapes.filter(s => s.class === targetShape).length;
correctClicks = 0;
$('#instructionText').html(`Find and click all the ${targetShape}s in the jungle!`);
chosenShapes.forEach(shape => {
const color = colors[Math.floor(Math.random() * colors.length)];
const shapeDiv = $(``);
shapeDiv.on('click', function () {
if ($(this).data('shape') === targetShape && !$(this).hasClass('clicked')) {
document.getElementById('clickSound').play();
$(this).addClass('clicked').fadeOut(() => {
correctClicks++;
if (correctClicks === totalCorrect) {
document.getElementById('successSound').play();
$('#instructionText').html(`🎉 You found all the ${targetShape}s! Great job!`);
}
});
}
});
area.append(shapeDiv);
});
}
$(document).ready(function () {
createShapes();
$('#restartBtn').on('click', function () {
createShapes();
});
$('#hintBtn').on('click', function () {
$('.shape').each(function () {
if ($(this).data('shape') === targetShape) {
$(this).css('box-shadow', '0 0 10px 5px #ffeb3b');
} else {
$(this).css('opacity', '0.5');
}
setTimeout(() => {
$(this).css({ 'box-shadow': '', 'opacity': '' });
}, 1500);
});
});
});