Word Search Game

Game Settings

Board Size

Difficulty

Word List (comma separated)

Words to Find

{{ word }}

Word Search Board

Found: {{ foundWords.length }}/{{ wordsToFind.length }}

.word-search-board { display: grid; gap: 2px; margin: 0 auto; max-width: 800px; } .word-search-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; background-color: #f8f9fa; border: 1px solid #dee2e6; cursor: pointer; user-select: none; } .word-search-cell.selected { background-color: #0d6efd; color: white; } .word-search-cell.found { background-color: #198754; color: white; } .list-group-item.text-decoration-line-through { color: #6c757d; } const { createApp } = Vue; createApp({ data() { return { boardSize: 10, difficulty: 'medium', wordList: 'apple,banana,orange,grape,pear,kiwi,mango,peach,plum,melon', board: [], wordsToFind: [], foundWords: [], selectedCells: [], wordPositions: [] } }, methods: { generateBoard() { this.wordsToFind = this.wordList.split(',').map(word => word.trim().toUpperCase()).filter(word => word.length > 0); this.foundWords = []; this.board = this.createEmptyBoard(); this.wordPositions = this.placeWords(); this.fillEmptyCells(); }, createEmptyBoard() { return Array.from({ length: this.boardSize }, () => Array.from({ length: this.boardSize }, () => '') ); }, placeWords() { const positions = []; const directions = [ { dr: 1, dc: 0 }, // down { dr: 0, dc: 1 }, // right { dr: 1, dc: 1 }, // down-right { dr: 1, dc: -1 } // down-left ]; const maxAttempts = 100; for (const word of this.wordsToFind) { let placed = false; let attempts = 0; while (!placed && attempts < maxAttempts) { attempts++; const direction = directions[Math.floor(Math.random() * directions.length)]; const row = Math.floor(Math.random() * (this.boardSize - word.length * direction.dr)); const col = Math.floor(Math.random() * (this.boardSize - word.length * direction.dc)); if (this.canPlaceWord(word, row, col, direction)) { this.placeWord(word, row, col, direction); positions.push({ word, cells: this.getWordCells(word, row, col, direction) }); placed = true; } } } return positions; }, canPlaceWord(word, row, col, direction) { for (let i = 0; i < word.length; i++) { const r = row + i * direction.dr; const c = col + i * direction.dc; if (this.board[r][c] !== '' && this.board[r][c] !== word[i]) { return false; } } return true; }, placeWord(word, row, col, direction) { for (let i = 0; i < word.length; i++) { const r = row + i * direction.dr; const c = col + i * direction.dc; this.board[r][c] = word[i]; } }, getWordCells(word, row, col, direction) { const cells = []; for (let i = 0; i < word.length; i++) { cells.push({ row: row + i * direction.dr, col: col + i * direction.dc }); } return cells; }, fillEmptyCells() { const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; for (let r = 0; r < this.boardSize; r++) { for (let c = 0; c < this.boardSize; c++) { if (this.board[r][c] === '') { this.board[r][c] = letters[Math.floor(Math.random() * letters.length)]; } } } }, startSelection(row, col) { this.selectedCells = [{ row, col }]; }, continueSelection(row, col) { if (this.selectedCells.length > 0) { const lastCell = this.selectedCells[this.selectedCells.length - 1]; if (lastCell.row !== row || lastCell.col !== col) { this.selectedCells.push({ row, col }); } } }, endSelection() { if (this.selectedCells.length < 2) { this.selectedCells = []; return; } const selectedWord = this.selectedCells.map(cell => this.board[cell.row][cell.col]).join(''); const reversedWord = [...selectedWord].reverse().join(''); for (const wordPos of this.wordPositions) { if (!this.foundWords.includes(wordPos.word) && (wordPos.word === selectedWord || wordPos.word === reversedWord)) { const selectedCellsStr = JSON.stringify(this.selectedCells.map(c => ({ row: c.row, col: c.col }))); const wordCellsStr = JSON.stringify(wordPos.cells); const reversedWordCellsStr = JSON.stringify([...wordPos.cells].reverse()); if (selectedCellsStr === wordCellsStr || selectedCellsStr === reversedWordCellsStr) { this.foundWords.push(wordPos.word); break; } } } this.selectedCells = []; }, isSelected(row, col) { return this.selectedCells.some(cell => cell.row === row && cell.col === col); }, isFound(row, col) { for (const wordPos of this.wordPositions) { if (this.foundWords.includes(wordPos.word)) { if (wordPos.cells.some(cell => cell.row === row && cell.col === col)) { return true; } } } return false; } }, mounted() { this.generateBoard(); } }).mount('#app');