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.
Demo
Top comments (0)