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 {
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
header {
padding: 20px;
text-align: center;
}
#instructions {
max-width: 600px;
margin: 0 auto 20px auto;
font-size: 1.1em;
}
#game-area {
display: flex;
flex-direction: column;
align-items: center;
}
#letters-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.letter {
width: 40px;
height: 40px;
background-color: #fff;
border: 2px solid #333;
border-radius: 4px;
font-size: 1.5em;
text-align: center;
line-height: 40px;
cursor: pointer;
user-select: none;
transition: background-color 0.2s;
}
.letter.selected {
background-color: #90ee90;
}
#train {
display: flex;
gap: 8px;
}
.wagon {
width: 100px;
height: 50px;
background-color: #dddddd;
border: 2px solid #555;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2em;
}
#score {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<header>
<h1>Letter Train Game</h1>
</header>
<div id="instructions">
Drop letters onto the train to make valid English words. Click on a letter and then on a wagon.
You can license Letter Train or embed it freely with our ads.
</div>
<div id="game-area">
<div id="letters-container"></div>
<div id="train"></div>
<div id="score">Score: 0</div>
</div>
<script>
// List of sample words for validation
const validWords = new Set(["CAT", "DOG", "TRAIN", "HELLO", "WORLD", "BAT", "RAT", "FISH", "CAR", "BOOK", "CODE", "GAME", "PLAY", "FUN", "SMART", "OPEN", "CLOSED"]);
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let availableLetters = [];
let selectedLetter = null;
let score = 0;
const lettersContainer = document.getElementById('letters-container');
const trainContainer = document.getElementById('train');
const scoreDisplay = document.getElementById('score');
// Initialize game
function init() {
generateLetters();
createWagons(5);
}
// Generate random letters
function generateLetters() {
availableLetters = [];
for (let i = 0; i < 10; i++) {
const letter = alphabet[Math.floor(Math.random() * alphabet.length)];
availableLetters.push(letter);
}
renderLetters();
}
// Render letter elements
function renderLetters() {
lettersContainer.innerHTML = '';
availableLetters.forEach((ltr, index) => {
const div = document.createElement('div');
div.className = 'letter';
div.textContent = ltr;
div.dataset.index = index;
div.addEventListener('click', () => {
if (selectedLetter !== null) {
// Deselect previous
const prev = document.querySelector('.letter.selected');
if (prev) prev.classList.remove('selected');
}
selectedLetter = index;
div.classList.add('selected');
});
lettersContainer.appendChild(div);
});
}
// Create wagons
function createWagons(count) {
for (let i = 0; i < count; i++) {
const wagon = document.createElement('div');
wagon.className = 'wagon';
wagon.dataset.index = i;
wagon.textContent = '';
wagon.addEventListener('click', () => {
if (selectedLetter !== null) {
const letterChar = availableLetters[selectedLetter];
wagon.textContent += letterChar;
// Remove used letter
availableLetters.splice(selectedLetter, 1);
// Deselect
const selectedDiv = document.querySelector('.letter.selected');
if (selectedDiv) selectedDiv.classList.remove('selected');
selectedLetter = null;
renderLetters();
// Check for word
checkWords(wagon);
}
});
trainContainer.appendChild(wagon);
}
}
// Check if wagon forms a valid word
function checkWords(wagon) {
const word = wagon.textContent;
if (word.length >= 3 && validWords.has(word)) {
// Valid word found
score += word.length * 10;
scoreDisplay.textContent = 'Score: ' + score;
// Clear wagon after a delay
setTimeout(() => {
wagon.textContent = '';
}, 500);
}
}
// Initialize game on page load
window.onload = init;
</script>
</body>
</html>
