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:
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
This content originally appeared on DEV Community and was authored by Mads Stoumann
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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.