<script>

var gameContainer = document.getElementById("game-container");

var catcher = document.getElementById("catcher");

var endMessage = document.getElementById("end-message");

var scoreDisplay = document.getElementById("score");

var score = 0;

var missedCubes = 0;

var cubes = [];

var initialInterval = 1500;

var intervalDecreaseRate = 0.9;

var minInterval = 500;

var speedIncreaseRate = 0.1;

var cubeSpeed = 1.0;

var collectedCubes = 0;

var colorChangeInterval = 500;

var changingCubeColors = true;

var paddleShape = 'rectangle';

var paddleColor = 'blue';

var mainMenu = document.getElementById("main-menu");

var settingsMenu = document.getElementById("settings-menu");

var controlsMenu = document.getElementById("controls-menu");

var howToPlayMenu = document.getElementById("how-to-play-menu");

var objectCreationInterval;

function startGame() {

mainMenu.style.display = "none";

settingsMenu.style.display = "none";

controlsMenu.style.display = "none";

howToPlayMenu.style.display = "none";

gameContainer.style.display = "block";

catcher.style.display = "block";

score = -4;

scoreDisplay.textContent = score;

collectedCubes = 0;

cubeSpeed = 1.0;

colorChangeInterval = 500;

catcher.style.backgroundColor = paddleColor;

if (paddleShape === 'rounded') {

catcher.classList.add('rounded');

} else {

catcher.classList.remove('rounded');

}

initializeGame();

}

function showSettings() {

mainMenu.style.display = "none";

settingsMenu.style.display = "block";

}

function hideSettings() {

settingsMenu.style.display = "none";

mainMenu.style.display = "block";

}

function showControls() {

mainMenu.style.display = "none";

controlsMenu.style.display = "block";

}

function hideControls() {

controlsMenu.style.display = "none";

mainMenu.style.display = "block";

}

function showHowToPlay() {

mainMenu.style.display = "none";

howToPlayMenu.style.display = "block";

}

function hideHowToPlay() {

howToPlayMenu.style.display = "none";

mainMenu.style.display = "block";

}

function setPaddleColor(color) {

paddleColor = color;

catcher.style.backgroundColor = paddleColor;

hideColorPalette();

}

function toggleColorPalette() {

var colorPalette = document.querySelector(".color-palette");

colorPalette.style.display = colorPalette.style.display === "flex" ? "none" : "flex";

}

function hideColorPalette() {

var colorPalette = document.querySelector(".color-palette");

colorPalette.style.display = "none";

}

function togglePaddleShape() {

paddleShape = (paddleShape === 'rectangle') ? 'rounded' : 'rectangle';

catcher.classList.toggle('rounded', paddleShape === 'rounded');

highlightText('Zmień kształt paletki');

}

function highlightText(menuItemText) {

var menuItem = Array.from(document.querySelectorAll('.menu-item')).find(item => item.textContent.trim() === menuItemText);

if (menuItem) {

menuItem.classList.add('highlight-green');

setTimeout(function() {

menuItem.classList.remove('highlight-green');

}, 200);

}

}

function toggleCubeColorChange() {

changingCubeColors = !changingCubeColors;

document.getElementById("toggle-color-change").textContent = changingCubeColors ? "Przestań zmieniać kolory kwadracików" : "Zacznij zmieniać kolory kwadracików";

cubes.forEach(cube => {

if (changingCubeColors) {

startCubeColorChange(cube);

} else {

stopCubeColorChange(cube);

}

});

console.log('Toggled cube color change. New state:', changingCubeColors);

}

function startCubeColorChange(cube) {

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

let currentColorIndex = 0;

// Clear any existing interval

if (cube.colorChangeIntervalId) {

clearInterval(cube.colorChangeIntervalId);

}

cube.colorChangeIntervalId = setInterval(() => {

currentColorIndex = (currentColorIndex + 1) % colors.length;

cube.style.backgroundColor = colors[currentColorIndex];

}, colorChangeInterval);

console.log('Started color change for cube:', cube, 'Interval ID:', cube.colorChangeIntervalId);

}

function stopCubeColorChange(cube) {

if (cube.colorChangeIntervalId) {

console.log('Clearing interval for cube:', cube, 'Interval ID:', cube.colorChangeIntervalId);

clearInterval(cube.colorChangeIntervalId);

cube.colorChangeIntervalId = undefined; // Clear the interval ID

cube.style.backgroundColor = 'red'; // Reset color to red

} else {

console.log('No interval to clear for cube:', cube);

}

}

function adjustColorChangeSpeed(factor) {

colorChangeInterval = Math.max(colorChangeInterval * factor, 100);

cubes.forEach(cube => {

if (changingCubeColors && cube.colorChangeIntervalId) {

stopCubeColorChange(cube);

startCubeColorChange(cube);

}

});

}

function adjustObjectCreationInterval() {

if (objectCreationInterval) {

}

var newInterval = initialInterval;

if (collectedCubes >= 1) {

newInterval *= 0.001; // More frequent

}

newInterval = Math.max(newInterval * intervalDecreaseRate, minInterval);

objectCreationInterval = setInterval(createObject, newInterval);

clearInterval(objectCreationInterval);

}

function createObject() {

var object = document.createElement("div");

object.className = "object";

var containerWidth = gameContainer.offsetWidth;

var objectWidth = object.offsetWidth;

var maxObjectX = containerWidth - objectWidth;

var objectX = Math.floor(Math.random() * maxObjectX);

object.style.left = objectX + "px";

object.style.top = "0px";

object.colorChangeIntervalId = undefined; // Initialize interval ID

cubes.push(object);

gameContainer.appendChild(object);

var objectCaught = false;

var animationInterval = setInterval(function() {

var objectY = object.offsetTop;

var containerHeight = gameContainer.offsetHeight;

if (!objectCaught && objectY + object.offsetHeight >= catcher.offsetTop &&

objectY <= catcher.offsetTop + catcher.offsetHeight &&

isColliding(catcher, object)) {

objectCaught = true;

clearInterval(animationInterval);

gameContainer.removeChild(object);

cubes.splice(cubes.indexOf(object), 1);

score++;

scoreDisplay.textContent = score;

cubeSpeed += speedIncreaseRate;

collectedCubes++;

if (collectedCubes % 5 === 0) {

adjustColorChangeSpeed(0.75);

}

if (collectedCubes % 10 === 0) {

adjustObjectCreationInterval();

}

} else if (objectY >= containerHeight) {

clearInterval(animationInterval);

gameContainer.removeChild(object);

cubes.splice(cubes.indexOf(object), 1);

missedCubes++;

if (missedCubes >= 1) {

endGame();

}

} else {

object.style.top = (objectY + cubeSpeed) + "px";

}

}, 10);

if (changingCubeColors) {

startCubeColorChange(object);

}

}

function isColliding(catcher, object) {

var catcherRect = catcher.getBoundingClientRect();

var objectRect = object.getBoundingClientRect();

return !(objectRect.right < catcherRect.left ||

objectRect.left > catcherRect.right ||

objectRect.bottom < catcherRect.top ||

objectRect.top > catcherRect.bottom);

}

function endGame() {

clearInterval(objectCreationInterval);

gameContainer.style.display = "none";

endMessage.style.display = "block";

scoreDisplay.textContent = score;

}

function restartGame() {

endMessage.style.display = "none";

clearInterval(objectCreationInterval);

startGame();

clearInterval(objectCreationInterval);

}

function goToMenu() {

clearInterval(objectCreationInterval);

endMessage.style.display = "none";

clearInterval(objectCreationInterval);

mainMenu.style.display = "block";

}

function initializeGame() {

objectCreationInterval = setInterval(createObject, initialInterval);

}

document.addEventListener('mousemove', function(event) {

var containerRect = gameContainer.getBoundingClientRect();

var mouseX = event.clientX - containerRect.left;

var catcherWidth = catcher.offsetWidth;

var newLeft = Math.max(0, Math.min(mouseX - catcherWidth / 2, gameContainer.offsetWidth - catcherWidth));

catcher.style.left = newLeft + 'px';

});

</script>