Description : <!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>
Instructions :
Play
