Nonogram Puzzle Game — Free HTML CSS JS Snippet

<div class="ng-app">
  <div class="ng-header">
    <h2>Nonogram</h2>
    <div class="stats">
      <div class="stat"><span class="stat-label">Filled</span><span class="stat-val" id="ng-filled">0</span></div>
      <div class="stat"><span class="stat-label">Mistakes</span><span class="stat-val" id="ng-mistakes">0</span></div>
    </div>
  </div>

  <p class="ng-goal" id="ng-goal">Left-click to fill a cell, right-click (or long-press) to mark it empty. Match the row and column clue numbers.</p>

  <div class="ng-board" id="ng-board"></div>

  <div class="ng-actions">
    <button class="ghost-btn" id="ng-new">New Puzzle</button>
    <button class="ghost-btn" id="ng-clear">Clear Marks</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; min-height: 100vh; }

.ng-app { max-width: 420px; margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.ng-header { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ng-header h2 { font-size: 19px; font-weight: 800; color: #1e293b; }

.stats { display: flex; gap: 10px; }
.stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 6px 14px; min-width: 60px; text-align: center; }
.stat-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.stat-val { display: block; font-size: 15px; font-weight: 800; color: #6366f1; }

.ng-goal { font-size: 12px; color: #475569; text-align: center; line-height: 1.6; }
.ng-goal.win { color: #16a34a; font-weight: 800; font-size: 13px; }

.ng-board {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; gap: 4px;
  user-select: none; -webkit-user-select: none;
}
.ng-corner { }
.ng-col-clues { display: flex; }
.ng-row-clues { display: flex; flex-direction: column; }
.ng-grid { display: grid; }

.ng-col-clue, .ng-row-clue {
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 10px; font-weight: 700; color: #475569; line-height: 1.1;
  flex-direction: column; text-align: center;
}
.ng-row-clue { align-items: center; justify-content: flex-end; flex-direction: row; gap: 3px; padding-right: 4px; }

.ng-cell {
  border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
  transition: background 0.08s;
}
.ng-cell:hover { background: #eef2ff; }
.ng-cell.filled { background: #6366f1; border-color: #6366f1; }
.ng-cell.marked { background: #f1f5f9; position: relative; }
.ng-cell.marked::after {
  content: '\2715'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 10px;
}
.ng-cell.block-r { border-right-width: 2px; border-right-color: #94a3b8; }
.ng-cell.block-b { border-bottom-width: 2px; border-bottom-color: #94a3b8; }

.ghost-btn {
  background: none; border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 8px 16px; font-size: 12px; font-weight: 700; color: #475569;
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s;
}
.ghost-btn:hover { border-color: #6366f1; color: #6366f1; }

const SIZE = 6;
const CELL = 34;

// A small library of hand-picked 6x6 solutions (true = filled). Each solve
// draws the next puzzle from this pool, so the game genuinely varies while
// every puzzle is guaranteed to have a valid, unique-looking picture.
const PUZZLES = [
  [
    [0,0,1,1,0,0],
    [0,1,1,1,1,0],
    [1,1,0,0,1,1],
    [1,1,1,1,1,1],
    [0,1,0,0,1,0],
    [0,1,0,0,1,0],
  ],
  [
    [0,1,1,1,1,0],
    [1,0,0,0,0,1],
    [1,0,1,1,0,1],
    [1,0,0,0,0,1],
    [1,0,1,0,1,1],
    [0,1,1,1,1,0],
  ],
  [
    [1,1,0,0,1,1],
    [1,1,0,0,1,1],
    [0,0,1,1,0,0],
    [0,0,1,1,0,0],
    [1,1,0,0,1,1],
    [1,1,0,0,1,1],
  ],
  [
    [0,0,0,1,0,0],
    [0,0,1,1,1,0],
    [0,1,1,1,1,1],
    [0,0,1,1,1,0],
    [0,1,1,1,1,1],
    [1,1,0,1,0,1],
  ],
];

let solution = [];
let state = []; // 0 = empty, 1 = filled, 2 = marked-empty
let mistakes = 0;
let won = false;

const boardEl = document.getElementById('ng-board');
const filledEl = document.getElementById('ng-filled');
const mistakesEl = document.getElementById('ng-mistakes');
const goalEl = document.getElementById('ng-goal');

function runsFor(line) {
  const runs = [];
  let count = 0;
  for (const v of line) {
    if (v === 1) count++;
    else { if (count) runs.push(count); count = 0; }
  }
  if (count) runs.push(count);
  return runs.length ? runs : [0];
}

function rowClue(r) { return runsFor(solution[r]); }
function colClue(c) { return runsFor(solution.map(row => row[c])); }

function buildBoard() {
  boardEl.innerHTML = '';
  boardEl.style.gridTemplateColumns = 'auto ' + (SIZE * CELL) + 'px';

  const corner = document.createElement('div');
  corner.className = 'ng-corner';
  boardEl.appendChild(corner);

  const colCluesWrap = document.createElement('div');
  colCluesWrap.className = 'ng-col-clues';
  for (let c = 0; c < SIZE; c++) {
    const cell = document.createElement('div');
    cell.className = 'ng-col-clue';
    cell.style.width = CELL + 'px';
    cell.style.height = '38px';
    colClue(c).forEach(n => {
      const line = document.createElement('span');
      line.textContent = n;
      cell.appendChild(line);
    });
    colCluesWrap.appendChild(cell);
  }
  boardEl.appendChild(colCluesWrap);

  const rowCluesWrap = document.createElement('div');
  rowCluesWrap.className = 'ng-row-clues';
  for (let r = 0; r < SIZE; r++) {
    const cell = document.createElement('div');
    cell.className = 'ng-row-clue';
    cell.style.height = CELL + 'px';
    cell.style.width = '46px';
    cell.textContent = rowClue(r).join(' ');
    rowCluesWrap.appendChild(cell);
  }
  boardEl.appendChild(rowCluesWrap);

  const grid = document.createElement('div');
  grid.className = 'ng-grid';
  grid.style.gridTemplateColumns = 'repeat(' + SIZE + ', ' + CELL + 'px)';
  grid.style.gridTemplateRows = 'repeat(' + SIZE + ', ' + CELL + 'px)';
  for (let r = 0; r < SIZE; r++) {
    for (let c = 0; c < SIZE; c++) {
      const cell = document.createElement('div');
      cell.className = 'ng-cell';
      if ((c + 1) % 3 === 0 && c !== SIZE - 1) cell.classList.add('block-r');
      if ((r + 1) % 3 === 0 && r !== SIZE - 1) cell.classList.add('block-b');
      cell.addEventListener('click', () => onCellClick(r, c));
      cell.addEventListener('contextmenu', (e) => { e.preventDefault(); onCellRightClick(r, c); });
      grid.appendChild(cell);
    }
  }
  boardEl.appendChild(grid);
}

function renderCells() {
  const cells = boardEl.querySelectorAll('.ng-grid .ng-cell');
  cells.forEach((cell, i) => {
    const r = Math.floor(i / SIZE), c = i % SIZE;
    cell.classList.toggle('filled', state[r][c] === 1);
    cell.classList.toggle('marked', state[r][c] === 2);
  });
}

function onCellClick(r, c) {
  if (won || state[r][c] !== 0) return;
  if (solution[r][c] === 1) {
    state[r][c] = 1;
  } else {
    state[r][c] = 2;
    mistakes++;
    mistakesEl.textContent = String(mistakes);
  }
  afterMove();
}

function onCellRightClick(r, c) {
  if (won) return;
  if (state[r][c] === 0) state[r][c] = 2;
  else if (state[r][c] === 2) state[r][c] = 0;
  afterMove();
}

function afterMove() {
  renderCells();
  const filledCount = state.flat().filter(v => v === 1).length;
  filledEl.textContent = String(filledCount);
  checkWin();
}

function checkWin() {
  for (let r = 0; r < SIZE; r++) {
    for (let c = 0; c < SIZE; c++) {
      const shouldBeFilled = solution[r][c] === 1;
      const isFilled = state[r][c] === 1;
      if (shouldBeFilled !== isFilled) return;
    }
  }
  won = true;
  goalEl.textContent = 'Solved! Every filled cell matches the picture, with ' + mistakes + ' mistake' + (mistakes === 1 ? '' : 's') + '.';
  goalEl.className = 'ng-goal win';
}

function newPuzzle() {
  solution = PUZZLES[Math.floor(Math.random() * PUZZLES.length)];
  state = Array.from({ length: SIZE }, () => Array(SIZE).fill(0));
  mistakes = 0;
  won = false;
  filledEl.textContent = '0';
  mistakesEl.textContent = '0';
  goalEl.textContent = 'Left-click to fill a cell, right-click (or long-press) to mark it empty. Match the row and column clue numbers.';
  goalEl.className = 'ng-goal';
  buildBoard();
  renderCells();
}

function clearMarks() {
  if (won) return;
  state = Array.from({ length: SIZE }, () => Array(SIZE).fill(0));
  mistakes = 0;
  mistakesEl.textContent = '0';
  filledEl.textContent = '0';
  renderCells();
}

document.getElementById('ng-new').addEventListener('click', newPuzzle);
document.getElementById('ng-clear').addEventListener('click', clearMarks);

newPuzzle();