Falling Words Challenge

h1 {
    text-align: center;
    margin-bottom: 10px;
}

.game-container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.game-area {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    border: 2px solid #333;
    overflow: hidden;
    background-color: #f9f9f9;
}

.falling-word {
    position: absolute;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.input-box {
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    font-size: 1em;
    border: 2px solid #333;
    border-radius: 5px;
}

.result-box {
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    font-size: 1em;
    border: 2px solid #333;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #555;
}

.start-btn {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: white;
    cursor: pointer;
}

.start-btn:hover {
    background-color: #555;
}

<h1>Falling Words Challenge</h1>
<div class="game-container">
    <div class="game-area" id="gameArea"></div>
    <input type="text" class="input-box" id="inputBox" placeholder="Type the word here" disabled />
    <div class="result-box" id="resultBox">Press "Start" to play!</div>
    <button class="start-btn" id="startBtn">Start</button>
</div>

const gameArea = document.getElementById("gameArea");
    const inputBox = document.getElementById("inputBox");
    const resultBox = document.getElementById("resultBox");
    const startBtn = document.getElementById("startBtn");
    const hiddenScore = document.getElementById("hiddenScore");

    let words = ["apple", "banana", "cherry", "grape", "orange", "pear", "peach", "plum"];
    let currentWord = null;
    let wordElement = null;
    let score = 0;
    let interval = null;
    let wordSpeed = 50; // Initial speed (higher is slower)

    function startGame() {
        resetGame();
        inputBox.disabled = false;
        inputBox.focus();
        spawnWord();
        startFalling();
        document.querySelector('.share-buttons').style.display = 'none'; // Hide share buttons when starting a new game
    }

    function spawnWord() {
        currentWord = words[Math.floor(Math.random() * words.length)];
        wordElement = document.createElement("div");
        wordElement.className = "falling-word";
        wordElement.textContent = currentWord;

        // Ensure the word is fully visible within the game area
        const wordWidth = currentWord.length * 12; // Approximate word width based on character count
        const maxLeft = gameArea.offsetWidth - wordWidth; // Maximum "left" position
        const leftPosition = Math.random() * maxLeft; // Random "left" position within bounds

        wordElement.style.top = "0px";
        wordElement.style.left = `${leftPosition}px`;
        gameArea.appendChild(wordElement);
    }

    function moveWord()
    {
        if (!wordElement) return;
        const top = parseInt(wordElement.style.top.replace("px", ""));
        if (top >= gameArea.offsetHeight - 30) {
            endGame(false); // Game over
        } else {
            wordElement.style.top = `${top + 2}px`;
        }
    }

    function checkInput() {
        if (inputBox.value.trim().toLowerCase() === currentWord.toLowerCase()) {
            score++;
            resultBox.textContent = `Score: ${score}`;
            hiddenScore.value = score; // Update hidden score field
            resetWord();

            // Gradually increase the speed after every 5 points
            if (score % 5 === 0) {
                accelerateGame();
            }
        }
    }

    function resetWord() {
        if (wordElement) gameArea.removeChild(wordElement);
        inputBox.value = "";
        spawnWord();
    }

    function startFalling() {
        interval = setInterval(moveWord, wordSpeed);
    }

    function accelerateGame() {
        clearInterval(interval); // Stop the current interval
        wordSpeed = Math.max(10, wordSpeed - 5); // Decrease interval time to make words fall faster
        startFalling(); // Restart the falling process with the new speed
    }

    function endGame(won) {
        clearInterval(interval);
        inputBox.disabled = true;
        if (wordElement) gameArea.removeChild(wordElement);
        currentWord = null;
        wordElement = null;
        resultBox.textContent = won
            ? `Congratulations! Final Score: ${score}`
            : `Game Over! Final Score: ${score}`;
       document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
    }

    function resetGame() {
        clearInterval(interval);
        inputBox.value = "";
        resultBox.textContent = "Press Start to play!";
        hiddenScore.value = "0"; // Reset hidden score
        score = 0;
        wordSpeed = 50; // Reset speed to the initial value
        if (wordElement) gameArea.removeChild(wordElement);
        currentWord = null;
        wordElement = null;
    }

    inputBox.addEventListener("input", checkInput);
    startBtn.addEventListener("click", startGame);