DEV Community

Cover image for Build A CSS Word Search Game In ... CSS!
Mads Stoumann
Mads Stoumann

Posted on

19 1 1 2 1

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

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:

CSS Word Search

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>


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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);
  }
}


Enter fullscreen mode Exit fullscreen mode

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;
  }
}


Enter fullscreen mode Exit fullscreen mode

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:

gap

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.


Demo

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up