Build A CSS Word Search Game In ... CSS!

#css #html #webdev #showdev

I've heard it so many times: CSS is not a programming language — or — why do it in CSS, when you can do it in JavaScript?

Why, indeed? Because I love CSS, and love a fun challenge!

In this tutorial, we'll be building a CSS Word Search Game in CSS:

In an earlier article, I looked into creative ways you can utilize CSS grid.

The approach for the word game is similar: A 12x12 grid using grid-area for the words.

Let's dive in.

Markup

For each word, we create a <fieldset>:



<fieldset name="w7" class="horizontal">
  <input type="checkbox" value="G">
  <input type="checkbox" value="A">
  <input type="checkbox" value="P">
</fieldset>

name is a unique identifier for the word, and for class we can use either horizontal or vertical.

CSS

First, we need a wrapper with the 12x12 grid:



.word-search {
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  font-family: system-ui, sans-serif;
  font-size: 3.5cqi;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  padding: 1px;
}

Then, we style the <input type="checkbox">-tags:



input {
  all: unset;
  aspect-ratio: 1 / 1;
  background: #FFF;
  display: grid;
  place-content: center;
  user-select: none;
  width: calc((100cqi / 12) - 1px);
  &:checked {
    background: var(--bg, #FF0);
    color: var(--c, #000);
  }
  &::after {
    content: attr(value);
  }
}

First, we unset all the defaults, then set the width of each to a 12th of the total width minus the gap.

A pseudo-element with the value of the input is placed ::after.

Now, let's add the CSS for the word we created in the markup earlier – including the "logic" of the game:



[name=w7] {
  grid-area: 2/ 10 / 2 / 13;
  &:has(:checked + :checked + :checked) {
    --bg: #FF69B4;
  }
}

So, what's going on?

The grid-area-declaration places the word in the second row, the tenth column, ends at the same row and at the 13th column, as the word is 3 characters, so 10 + 3 = 13.

Next, we check if all the <input>s in the fieldset are :checked. Because it's a 3-letter word, we need to check for :checked 3 times.

Can you guess how many :checked are required for 4-letter words?! 😂

Let's click on those 3 letters — the final 3 in the second row. When you click on a single letter, the background color turns yellow, but when all 3 have been clicked/checked, we get:

And that's it — now find 25 words more (or just click all the letters!). When you've found all the words, you'll have 3 slots left, with the letters A, B and C.