Flow Free Game [tcb-script] const gridData = [ [“green”, “”, “”, “”, “blue”], [“”, “”, “”, “”, “”], [“”, “”, “red”, “”, “”], [“”, “”, “red”, “”, “”], [“green”, “”, “blue”, “”, “red”] ]; const gameGrid = document.getElementById(‘game-grid’); let selectedPath = null; function createGrid() { for (let row = 0; row < gridData.length; row++) { for (let col = 0; col < gridData[row].length; col++) { const cell = document.createElement(‘div’); cell.classList.add(‘cell’); cell.dataset.row = row; cell.dataset.col = col; if (gridData[row][col]) { const circle = document.createElement(‘div’); circle.classList.add(‘circle’, gridData[row][col]); cell.appendChild(circle); } cell.addEventListener(‘mousedown’, onCellMouseDown); cell.addEventListener(‘mouseup’, onCellMouseUp); cell.addEventListener(‘mouseenter’, onCellMouseEnter); gameGrid.appendChild(cell); } } } function onCellMouseDown(event) { const target = event.currentTarget; const row = target.dataset.row; const col = target.dataset.col; const circle = target.querySelector(‘.circle’); if (circle) { selectedPath = { color: circle.classList[1], path: [{ row: parseInt(row), col: parseInt(col) }] }; drawPath(selectedPath); } } function onCellMouseUp(event) { if (selectedPath) { selectedPath = null; } } function onCellMouseEnter(event) { if (selectedPath) { const target = event.currentTarget; const row = parseInt(target.dataset.row); const col = parseInt(target.dataset.col); const lastPath = selectedPath.path[selectedPath.path.length – 1]; if (Math.abs(lastPath.row – row) + Math.abs(lastPath.col – col) === 1) { selectedPath.path.push({ row, col }); drawPath(selectedPath); } } } function drawPath(pathData) { pathData.path.forEach(({ row, col }) => { const cell = document.querySelector(`.cell[data-row=’${row}’][data-col=’${col}’]`); let path = cell.querySelector(‘.path’); if (!path) { path = document.createElement(‘div’); path.classList.add(‘path’, pathData.color); cell.appendChild(path); } else { path.className = `path ${pathData.color}`; } }); } createGrid(); [/tcb-script]