Duegame: diverse games for all ages. Play action, puzzles, and more—anytime, your way. Start fun now!
Copyright © 2025 DueGame Inc. All rights reserved. "DueGame" is a registered trademark.
Letter Express
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</title> <style> body { font-family: Arial, sans-serif; margin: 20px; background: #f0f4f8; } h1 { text-align: center; margin-bottom: 10px; } p.description { text-align: center; max-width: 600px; margin: 0 auto 20px; font-size: 1.2em; line-height: 1.4; color: #333; } #game-area { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 10px; } .letter { display: inline-block; width: 40px; height: 40px; background-color: #ffd700; border: 2px solid #ccaa00; border-radius: 6px; font-size: 1.5em; text-align: center; line-height: 40px; cursor: pointer; user-select: none; transition: background-color 0.2s; } .letter:active { background-color: #daa520; } #train { margin-top: 30px; display: flex; justify-content: center; gap: 20px; } .wagon { width: 80px; height: 40px; border: 2px solid #555; border-radius: 4px; background-color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2em; cursor: pointer; transition: background-color 0.2s; } .wagon:hover { background-color: #eef; } #score { text-align: center; margin-top: 20px; font-size: 1.2em; } </style> </head> <body> <h1>Letter Train</h1> <p class="description">Drop letters on the train to make valid English words. Click on a letter and on a wagon. You can license Letter Train or embed Letter Train in your website for free containing our ads.</p> <div id="game-area"> <div id="letters-container"></div> </div> <div id="train"> <div class="wagon" data-index="0">Wagon 1</div> <div class="wagon" data-index="1">Wagon 2</div> <div class="wagon" data-index="2">Wagon 3</div> <div class="wagon" data-index="3">Wagon 4</div> </div> <div id="score">Score: 0</div> <script> const lettersContainer = document.getElementById('letters-container'); const wagons = document.querySelectorAll('.wagon'); const scoreDisplay = document.getElementById('score'); const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); let selectedLetter = null; let selectedLetterDiv = null; let trainWords = Array(4).fill(''); let score = 0; // Initialize letter blocks function createLetters() { letters.forEach(letter => { const div = document.createElement('div'); div.className = 'letter'; div.textContent = letter; div.addEventListener('click', () => { // Deselect previous if (selectedLetterDiv) { selectedLetterDiv.style.borderColor = '#ccaa00'; } // Select new selectedLetter = letter; selectedLetterDiv = div; div.style.borderColor = '#555'; }); lettersContainer.appendChild(div); }); } // Check if string is a valid English word (basic list + minimal) const validWords = new Set([ 'ART', 'CAR', 'CAT', 'DOG', 'BAT', 'HAT', 'MAD', 'BAD', 'RIDE', 'RIDE', 'CARD', 'CART', 'ATE', 'EAT', 'TEA', 'READ', 'DEAR', 'DARE', 'ARE', 'EAR', 'NEAR', 'RAN', 'WAGON', 'WITH', 'ON', 'TRAIN', 'DROP', 'MAKE', 'VALID', 'WORD', 'IN', 'THE', 'OR', 'AND' ]); function checkWord(word) { return validWords.has(word.toUpperCase()); } // Update train display function updateTrain() { wagons.forEach((wagon, index) => { wagon.textContent = trainWords[index] || `Wagon ${index + 1}`; }); } // Check for completed words function checkWords() { trainWords.forEach((word, index) => { if (word.length > 2 && checkWord(word)) { score += word.length; document.querySelector('.wagon[data-index="' + index + '"]').textContent = word + ' ✓'; trainWords[index] = ''; } }); scoreDisplay.textContent = 'Score: ' + score; } // Handle clicking on wagon wagons.forEach(wagon => { wagon.addEventListener('click', () => { if (selectedLetter && trainWords[wagon.dataset.index] !== undefined) { trainWords[wagon.dataset.index] += selectedLetter; updateTrain(); checkWords(); // Deselect letter if (selectedLetterDiv) { selectedLetterDiv.style.borderColor = '#ccaa00'; } selectedLetter = null; selectedLetterDiv = null; } }); }); createLetters(); updateTrain(); </script> </body> </html>