Create Crossword Puzzle
February 13, 2025
No Comments
Real-time crossword puzzle generator for creating your own interactive crossword puzzles with ease in code js
Here’s a simple interactive crossword puzzle generator in JavaScript using HTML5 and CSS. This code will allow users to input words and automatically generate a crossword grid.
Creating a real-time interactive crossword puzzle generator using JavaScript and PHP involves multiple components:
- Frontend (JS, HTML, CSS): Users can input words and clues to generate a crossword puzzle dynamically.
- Backend (PHP, MySQL – optional): To process and store puzzles.
- Logic for Generating Crossword: Algorithm to arrange words into a grid.
- Interactive UI: Allow users to solve the puzzle online.
Would you like a basic prototype with a simple word-placement logic, or a more advanced version with database storage and word validation?
class Crossword {
constructor(containerId) {
this.container = document.getElementById(containerId);
this.gridSize = 10;
this.grid = Array.from({ length: this.gridSize }, () => Array(this.gridSize).fill(null));
this.words = [];
this.createGrid();
}
createGrid() {
this.container.innerHTML = '';
const table = document.createElement('table');
for (let i = 0; i < this.gridSize; i++) {
const row = document.createElement('tr');
for (let j = 0; j < this.gridSize; j++) {
const cell = document.createElement('td');
cell.dataset.row = i;
cell.dataset.col = j;
row.appendChild(cell);
}
table.appendChild(row);
}
this.container.appendChild(table);
}
addWord(word, row, col, direction) {
if (direction === 'horizontal' && col + word.length > this.gridSize) return false;
if (direction === 'vertical' && row + word.length > this.gridSize) return false;
for (let i = 0; i < word.length; i++) {
let r = row + (direction === 'vertical' ? i : 0);
let c = col + (direction === 'horizontal' ? i : 0);
if (this.grid[r][c] && this.grid[r][c] !== word[i]) return false;
}
for (let i = 0; i < word.length; i++) {
let r = row + (direction === 'vertical' ? i : 0);
let c = col + (direction === 'horizontal' ? i : 0);
this.grid[r][c] = word[i];
document.querySelector(`[data-row='${r}'][data-col='${c}']`).textContent = word[i];
}
return true;
}
}
document.addEventListener("DOMContentLoaded", () => {
const crossword = new Crossword("crossword-container");
document.getElementById("add-word").addEventListener("click", () => {
const word = document.getElementById("word").value.toUpperCase();
const row = parseInt(document.getElementById("row").value);
const col = parseInt(document.getElementById("col").value);
const direction = document.getElementById("direction").value;
crossword.addWord(word, row, col, direction);
});
});
This code initializes a crossword grid and allows users to add words dynamically via an input form. Let me know if you need enhancements like automatic word placement, clues, or UI improvements! 🚀