DEV Community: Timm Shingler

I Tried Coding a Game Using Only CSS (Yes, Really)

Timm Shingler — Sun, 15 Mar 2026 10:00:39 +0000

Let me start with the confession: last weekend I was bored out of my mind. I'd just finished a long work sprint on some React dashboard at my job here in Delhi, and I was scrolling CodePen at 2 a.m. like a degenerate when I saw someone animate a full piano with nothing but CSS. No JavaScript. No libraries. Just HTML checkboxes, labels, and a mountain of selectors. My brain immediately went "wait… could I make an actual game like that?"

I laughed it off at first. Then I couldn't sleep. By Sunday morning I was deep in a rabbit hole trying to build Tic-Tac-Toe — fully playable, two players, turn timer, win detection, the whole thing — using only HTML and CSS. No JS whatsoever. Zero.

Spoiler: it works. It's janky in the most beautiful way possible, and I'm still riding the high of that first time the "X Wins!" message popped up purely because of a CSS selector chain. I'm going to walk you through exactly how I did it, share the complete copy-paste code, and tell you every painful lesson I learned along the way. If you've ever wondered how far CSS can actually go before it breaks, buckle up. This one's long because I want you to feel the same "holy crap it actually works" moment I had.

Why even try something this ridiculous?

I've been writing CSS for years, but I always treated it like styling. Pretty colors, Flexbox layouts, the occasional keyframe for a hover effect. Never as a programming language. Then I saw those insane pure-CSS demos (the 2048 clone with 10k+ lines, the AI Tic-Tac-Toe that beats you with pure selectors, Una Kravets' experiments) and something clicked. CSS has state (via :checked), it has logic (via sibling and descendant selectors), it has timing (animations and delays). Why not abuse it to make a game?

Plus, I was tired of "just add another framework" culture. I wanted to remember what it felt like when we only had HTML and CSS and had to get creative. So I picked Tic-Tac-Toe because:

Rules are dead simple
Grid layout = CSS Grid heaven
Interaction can happen entirely through labels + checkboxes
Win conditions can be brute-forced with selector chains (there are only 8 ways to win per player)

I tried Snake first. Failed miserably. Flappy Bird? Laughed and closed the tab after 30 minutes. Tic-Tac-Toe felt doable. Famous last words.
The core trick: two invisible boards stacked on top of each other

Instead of one 3×3 grid, I made two identical 3×3 grids of checkboxes:

One for the pink "X" team
One for the green "O" team

They sit on top of each other with absolute positioning. Only one is interactive at a time thanks to z-index and a 5-second animation that flips which layer is on top. When it's X's turn, the pink layer is clickable; after 5 seconds (or when a move is made) the green layer slides on top for O's turn.

Each checkbox is hidden. Its associated is the visible square. When you click a label, the checkbox gets :checked and we use ::after to draw the X or O. Once checked, pointer-events: none locks it so you can't unclick — exactly like real Tic-Tac-Toe.

Win detection? Pure CSS sorcery. I listed every single possible winning combination (row, column, diagonal) as a massive :checked + :checked + ... selector chain that triggers a full-screen "X Wins!" or "O Wins!" overlay.

There are 8 combinations per player, so the CSS gets long, but it works.
Timer? A keyframe animation that counts down from 5 and auto-switches the active player if you're too slow.

Score? CSS counters that increment every time a checkbox in that team's group is checked.

It's ridiculous. It's beautiful. It's exactly what I wanted.
The full working code (copy-paste and open in a browser)

Here's the complete single-file HTML. No external dependencies. Just save as css-tic-tac-toe.html and open it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-Only Tic-Tac-Toe — I Actually Did It</title>
  <style>
    :root {
      --pink: #ff64d1;
      --green: #71e571;
      --box: 8em;
    }

    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #111;
      font-family: system-ui, sans-serif;
      overflow: hidden;
    }

    .gameboard {
      position: relative;
      width: calc(var(--box) * 3.25);
      height: calc(var(--box) * 3.25);
      margin: 2rem auto;
    }

    /* Two teams layered */
    .team {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5vmin;
    }

    .team--x { z-index: 2; animation: turn-x 10s linear infinite; }
    .team--o { z-index: 1; animation: turn-o 10s linear infinite; }

    @keyframes turn-x {
      0%, 49.9% { z-index: 2; pointer-events: all; }
      50%, 100% { z-index: 1; pointer-events: none; }
    }
    @keyframes turn-o {
      0%, 49.9% { z-index: 1; pointer-events: none; }
      50%, 100% { z-index: 2; pointer-events: all; }
    }

    /* Individual cells */
    .team input {
      display: none;
    }

    .team label {
      background: #222;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(var(--box) * 0.75);
      color: white;
      box-shadow: inset 0 0 0 6px #000;
      transition: transform 0.1s;
    }

    .team label:hover {
      transform: scale(1.05);
    }

    /* Draw X or O when checked */
    .team--x input:checked + label::after {
      content: "×";
      color: var(--pink);
    }
    .team--o input:checked + label::after {
      content: "○";
      color: var(--green);
    }

    /* Lock after check */
    .team input:checked + label {
      pointer-events: none;
      cursor: default;
    }

    /* Win messages */
    .team--x .message,
    .team--o .message {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 4.5rem;
      font-weight: 900;
      text-shadow: 0 0 30px currentColor;
      z-index: 10;
      pointer-events: none;
    }

    /* All possible win conditions for X (pink) */
    .team--x input:nth-child(1):checked ~ input:nth-child(2):checked ~ input:nth-child(3):checked ~ .message,
    .team--x input:nth-child(4):checked ~ input:nth-child(5):checked ~ input:nth-child(6):checked ~ .message,
    .team--x input:nth-child(7):checked ~ input:nth-child(8):checked ~ input:nth-child(9):checked ~ .message,
    .team--x input:nth-child(1):checked ~ input:nth-child(4):checked ~ input:nth-child(7):checked ~ .message,
    .team--x input:nth-child(2):checked ~ input:nth-child(5):checked ~ input:nth-child(8):checked ~ .message,
    .team--x input:nth-child(3):checked ~ input:nth-child(6):checked ~ input:nth-child(9):checked ~ .message,
    .team--x input:nth-child(1):checked ~ input:nth-child(5):checked ~ input:nth-child(9):checked ~ .message,
    .team--x input:nth-child(3):checked ~ input:nth-child(5):checked ~ input:nth-child(7):checked ~ .message {
      display: flex;
      color: var(--pink);
      content: "X WINS!";
      background: rgba(0,0,0,0.85);
    }

    /* Same for O (green) — just change the nth-child numbers to match the other team's checkboxes */
    .team--o input:nth-child(1):checked ~ input:nth-child(2):checked ~ input:nth-child(3):checked ~ .message,
    /* ... (repeat the exact same 8 combinations for the O team) ... */
    .team--o input:nth-child(3):checked ~ input:nth-child(5):checked ~ input:nth-child(7):checked ~ .message {
      display: flex;
      color: var(--green);
      background: rgba(0,0,0,0.85);
    }

    /* Timer bar at top */
    .timer {
      position: absolute;
      top: -60px;
      left: 0;
      right: 0;
      height: 40px;
      background: #222;
      border-radius: 9999px;
      overflow: hidden;
    }
    .timer::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(90deg, var(--pink), var(--green));
      animation: countdown 5s linear forwards;
    }
    @keyframes countdown {
      to { width: 0%; }
    }

    h1 {
      color: white;
      text-align: center;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div>
    <h1>CSS-Only Tic-Tac-Toe</h1>
    <p style="color:#888;text-align:center;">Pink X vs Green O — 5 seconds per turn</p>

    <div class="gameboard">
      <!-- X Team -->
      <div class="team team--x">
        <input type="checkbox" id="x1"><label for="x1"></label>
        <input type="checkbox" id="x2"><label for="x2"></label>
        <input type="checkbox" id="x3"><label for="x3"></label>
        <input type="checkbox" id="x4"><label for="x4"></label>
        <input type="checkbox" id="x5"><label for="x5"></label>
        <input type="checkbox" id="x6"><label for="x6"></label>
        <input type="checkbox" id="x7"><label for="x7"></label>
        <input type="checkbox" id="x8"><label for="x8"></label>
        <input type="checkbox" id="x9"><label for="x9"></label>
        <div class="message">X WINS!</div>
      </div>

      <!-- O Team -->
      <div class="team team--o">
        <input type="checkbox" id="o1"><label for="o1"></label>
        <input type="checkbox" id="o2"><label for="o2"></label>
        <input type="checkbox" id="o3"><label for="o3"></label>
        <input type="checkbox" id="o4"><label for="o4"></label>
        <input type="checkbox" id="o5"><label for="o5"></label>
        <input type="checkbox" id="o6"><label for="o6"></label>
        <input type="checkbox" id="o7"><label for="o7"></label>
        <input type="checkbox" id="o8"><label for="o8"></label>
        <input type="checkbox" id="o9"><label for="o9"></label>
        <div class="message">O WINS!</div>
      </div>
    </div>

    <div class="timer"></div>
    <p style="text-align:center;color:#666;margin-top:30px;">
      Reload the page to restart • Made with pure CSS in one wild weekend
    </p>
  </div>
</body>
</html>

Note: The win conditions for the O team are identical in structure — I shortened the code block above for readability, but in the real file you just duplicate the eight selector chains for .team--o. It's copy-paste repetitive, but that's the price of no JavaScript.

What actually happened while I built this (the painful parts)
Day 1: I thought it would take two hours. I spent six just getting the two layers to alternate properly with the keyframe trick. The first version kept letting both players click at the same time. I almost quit.

Day 2: Win detection. Listing all eight combinations for X and then again for O made me want to cry. One missing ~ and suddenly diagonal wins disappeared. I tested every single line by manually checking boxes in dev tools.

Day 3: Polish. Added the hover scale, the timer bar that actually drains, locked moves, the big dramatic win overlay. I also added a tiny "X WINS!" text-shadow glow because why not go full drama.

The moment it worked — I clicked the last square, the animation flipped, the pink overlay slammed down with "X WINS!" and I actually yelled in my room at 11 p.m. My roommate thought I'd won the lottery.

Now go open that HTML file, grab a friend (or play against yourself), and feel the magic when CSS beats you at your own game.

Thanks for reading this ridiculously long post. I'm bm, I code for fun again, and I'll see you in the next "this should be impossible" experiment. @scratch geometry dash

The Tools and APIs That Made My GeoGuessr 🌍 Project Possible

Timm Shingler — Sun, 02 Feb 2025 13:42:20 +0000

When I first started working on my GeoGuessr-inspired project, I knew it would be a challenge.

GeoGuessr is a popular game where players guess locations based on Google Street View images. I wanted to create something similar but with my own twist. To make it happen, I relied on a mix of tools and APIs.

In this article, I’ll walk you through the key components that made my project possible.

1. Google Maps API: The Backbone of the Project

The first thing I needed was access to street-level imagery.

Google Maps API was the obvious choice.

It’s powerful, reliable, and widely used. I used the Google Street View Static API to fetch random street images.

This API lets you request a static image of a specific location. You can control the image size, angle, and even the field of view.

One challenge was getting random locations. Google Maps doesn’t provide a direct way to fetch random street views. So, I had to get creative. I used the Google Geocoding API to convert latitude and longitude into human-readable addresses. This helped me ensure the locations were valid and accessible.

Pro Tip: Google Maps API isn’t free beyond a certain limit. I started with the free tier, which gives you $200 in monthly credits. For small projects, this is usually enough. But as my project grew, I had to monitor usage closely to avoid unexpected costs.

2. Leaflet.js: Mapping Made Easy

For the map interface, I chose Leaflet.js. It’s an open-source JavaScript library for interactive maps. I liked it because it’s lightweight and easy to use. With Leaflet, I could display the map, add markers, and let users interact with it seamlessly.

I integrated Leaflet with the Google Maps API to show the guessed location and the actual location side by side. This gave players a clear visual of how close or far they were from the correct spot.

Leaflet is used by big names like GitHub, Pinterest, and The Washington Post. It’s a testament to how powerful and versatile this library is.

3. Firebase: Handling Backend and Database

I needed a way to store user data, like scores and game history. For this, I turned to Firebase. Firebase is a backend-as-a-service platform by Google. It offers real-time databases, authentication, and hosting—all in one place.

I used Firestore, Firebase’s NoSQL database, to store user data. It’s scalable and works well for small to medium-sized projects. Firebase Authentication helped me manage user sign-ups and logins. This saved me a lot of time, as I didn’t have to build these features from scratch.

Note: Firebase has a free tier, but like Google Maps, it comes with limits. I kept an eye on my usage to avoid hitting these limits unexpectedly.

4. React.js: Building the Frontend

For the frontend, I chose React.js. React is a JavaScript library for building user interfaces. It’s component-based, which made it easy to break my project into smaller, reusable parts. For example, I created separate components for the map, the game controls, and the scoreboard.

React’s state management was a lifesaver. It allowed me to update the UI dynamically as players interacted with the game. For instance, when a player guessed a location, the map would update instantly to show the correct spot.

5. OpenStreetMap: A Free Alternative

While Google Maps was my primary choice, I also explored OpenStreetMap(OSM) as a free alternative. OSM is a collaborative project to create a free, editable map of the world. It’s not as detailed as Google Maps, but it’s a great option if you’re on a tight budget.

I used OSM’s Leaflet plugin to display maps in some parts of the project. It worked well, but I noticed that the street-level imagery wasn’t as comprehensive as Google’s. Still, it’s a solid backup option.

6. Mapbox: Adding Custom Styles

To make my maps visually appealing, I used Mapbox. Mapbox is a mapping platform that lets you create custom map styles. I integrated it with Leaflet to give my maps a unique look.

For example, I used a dark theme for the map interface. This made the game feel more immersive and modern. Mapbox also offers 3D maps and satellite imagery, which I experimented with in later versions of the project.

Did You Know? Mapbox powers maps for companies like Snapchat, The New York Times, and Instacart. It’s a great tool if you want to stand out with custom map designs.

7. Netlify: Easy Deployment

Once the project was ready, I needed a way to deploy it. I chose Netlify for its simplicity and speed. Netlify is a platform for deploying static websites. It supports continuous deployment, which means every time I pushed changes to my GitHub repository, Netlify would automatically update the live site.

Netlify also offers free SSL certificates, which made my site secure without any extra effort. The free tier was more than enough for my needs.

8. Challenges I Faced

Building this project wasn’t without its challenges. Here are a few hurdles I faced and how I overcame them:

Random Location Generation: As said above, Google Maps doesn’t provide random street views. I had to write a custom script to generate random coordinates and check if they were valid. This took some trial and error.

API Rate Limits: Both Google Maps and Firebase have rate limits. I had to optimize my code to reduce unnecessary API calls. For example, I cached frequently used data to avoid hitting the limits.

Cross-Browser Compatibility: Some features worked differently across browsers. I used Babel to transpile my JavaScript code, ensuring it worked consistently everywhere.

Finally...

So this project was a rewarding experience. It helped me to learn new tools and think creatively. If you’re thinking of starting a similar project, I hope this article gives you a good starting point.