<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Letter Train Game</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background: #f0f0f0; } h1 { text-align: center; } #instructions { margin: 20px 0; text-align: center; } #game-area { display: flex; flex-direction: column; align-items: center; } #letter-pool { margin: 10px; } .letter { display: inline-block; width: 40px; height: 40px; line-height: 40px; margin: 5px; background-color: #add8e6; text-align: center; font-weight: bold; font-size: 20px; cursor: pointer; border-radius: 4px; user-select: none; } #train { display: flex; margin-top: 20px; } .wagon { width: 60px; height: 60px; margin: 0 5px; background-color: #ffffcc; border: 2px solid #333; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; border-radius: 4px; } #score { margin-top: 20px; font-size: 1.2em; } </style> </head> <body> <h1>Letter Train Game</h1> <div id="instructions"> Drop letters on the train to form valid English words. Click a letter then on a wagon. </div> <div id="game-area"> <div id="letter-pool"></div> <div id="train"></div> <div id="score">Score: 0</div> </div> <script> // Sample dictionary of valid words for simplicity const dictionary = new Set(["CAT", "CART", "ART", "RAT", "CAR", "TACT", "TRAP", "PART", "CAP", "PAST", "SAT", "SPAR", "STAR", "TAR", "RAPS", "SCRAP", "CRAP", "TRAPS"]); let score = 0; let selectedLetter = null; // Generate initial set of letters const letters = []; function generateLetters() { const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; for (let i = 0; i < 12; i++) { const randChar = alphabet[Math.floor(Math.random() * alphabet.length)]; letters.push(randChar); } } // Display the letter pool function displayLetters() { const container = document.getElementById("letter-pool"); container.innerHTML = ""; letters.forEach((letter, index) => { const div = document.createElement("div"); div.className = "letter"; div.textContent = letter; div.onclick = () => { selectLetter(index); }; container.appendChild(div); }); } // Select a letter function selectLetter(index) { selectedLetter = index; highlightSelectedLetter(); } // Highlight selected letter function highlightSelectedLetter() { const letterDivs = document.querySelectorAll(".letter"); letterDivs.forEach((div, idx) => { div.style.border = idx === selectedLetter ? "2px solid red" : "none"; }); } // Initialize the train const trainWagons = []; const numWagons = 8; function createTrain() { const trainContainer = document.getElementById("train"); trainContainer.innerHTML = ""; for (let i = 0; i < numWagons; i++) { const wagon = document.createElement("div"); wagon.className = "wagon"; wagon.dataset.index = i; wagon.textContent = ""; wagon.onclick = () => { placeLetter(wagon); }; trainContainer.appendChild(wagon); trainWagons.push(wagon); } } // Place letter on wagon function placeLetter(wagon) { if (selectedLetter === null) return; const letter = letters[selectedLetter]; if (wagon.textContent === "") { wagon.textContent = letter; // Remove the letter from pool letters.splice(selectedLetter,1); selectedLetter = null; displayLetters(); checkWords(); highlightSelectedLetter(); } } // Check for words in train function checkWords() { const trainLetters = Array.from(document.querySelectorAll(".wagon")).map(w => w.textContent).filter(l => l !== ""); // Find all substrings for (let start = 0; start < trainLetters.length; start++) { for (let end = start + 1; end <= trainLetters.length; end++) { const wordArr = trainLetters.slice(start, end); const word = wordArr.join(""); if (dictionary.has(word)) { // Increment score score += word.length * 10; document.getElementById("score").textContent = "Score: " + score; highlightWagons(start, end -1); } } } } // Highlight wagons forming a word function highlightWagons(start, end) { const wagons = document.querySelectorAll(".wagon"); for (let i = start; i <= end; i++) { wagons[i].style.backgroundColor = "#90ee90"; } setTimeout(() => { for (let i = start; i <= end; i++) { wagons[i].style.backgroundColor = "#ffffcc"; } }, 1000); } // Initialize game generateLetters(); displayLetters(); createTrain(); </script> </body> </html>