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:


This content originally appeared on DEV Community and was authored by Mads Stoumann

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>

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:

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


This content originally appeared on DEV Community and was authored by Mads Stoumann


Print Share Comment Cite Upload Translate Updates
APA

Mads Stoumann | Sciencx (2024-06-22T12:59:57+00:00) Build A CSS Word Search Game In … CSS!. Retrieved from https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/

MLA
" » Build A CSS Word Search Game In … CSS!." Mads Stoumann | Sciencx - Saturday June 22, 2024, https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/
HARVARD
Mads Stoumann | Sciencx Saturday June 22, 2024 » Build A CSS Word Search Game In … CSS!., viewed ,<https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/>
VANCOUVER
Mads Stoumann | Sciencx - » Build A CSS Word Search Game In … CSS!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/
CHICAGO
" » Build A CSS Word Search Game In … CSS!." Mads Stoumann | Sciencx - Accessed . https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/
IEEE
" » Build A CSS Word Search Game In … CSS!." Mads Stoumann | Sciencx [Online]. Available: https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/. [Accessed: ]
rf:citation
» Build A CSS Word Search Game In … CSS! | Mads Stoumann | Sciencx | https://www.scien.cx/2024/06/22/build-a-css-word-search-game-in-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.