an off line game of catching afox

This tailwind example is contributed by Bonimater, on 29-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,Masonry, Image grid

Call to Action Image gallery

Author Bonimater

Tailwind v3.4 1.1k 6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Catch the Fox Game</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .fox {
      position: absolute;
      font-size: 2rem;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .fox:active {
      transform: scale(1.2);
    }
  </style>
</head>
<body class="bg-green-100 flex flex-col items-center justify-center min-h-screen text-center px-4">

<h1 class="text-3xl font-bold mb-4 text-orange-600">🦊 Catch the Fox!</h1>
  <p class="mb-2 text-lg">Click the fox as many times as you can in <span id="time" class="font-bold">15</span> seconds!</p>
  <p class="mb-6 text-xl">Score: <span id="score" class="font-bold text-blue-600">0</span></p>

<button onclick="startGame()" class="mt-6 bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">
    Start Game
  </button>

let score = 0;
    let timeLeft = 15;
    let gameInterval = null;
    let moveInterval = null;

function startGame() {
      score = 0;
      timeLeft = 15;
      scoreDisplay.textContent = score;
      timeDisplay.textContent = timeLeft;
      randomPosition();

fox.onclick = () => {
        score++;
        scoreDisplay.textContent = score;
        randomPosition();
      };

gameInterval = setInterval(() => {
        timeLeft--;
        timeDisplay.textContent = timeLeft;
        if (timeLeft <= 0) {
          clearInterval(gameInterval);
          clearInterval(moveInterval);
          fox.style.display = 'none';
          alert(`Time's up! You scored ${score} points.`);
        }
      }, 1000);

moveInterval = setInterval(randomPosition, 800);
      fox.style.display = 'block';
    }
  </script>
</body>
</html>

Related Examples

ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Homayoun

1 year ago

1.3k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Pixel Perfect

2 years ago

2.1k
Drinkware landing page

Maxim

1 year ago

2k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Homayoun

10 months ago

748
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Bonimater

1 year ago

1.5k
Responsive CTA
Tailwind CTA card

Dika Rahman

2 years ago

2.9k
Waitlist signup form

Anonymous

2 years ago

5.5k
Galerie Interactive
Galerie Interactive

Omer fils ELENGA

8 months ago

471
Footer
A footer is a critical part of any professional website. A footer ensures your website is complete, professional, user-friendly, and legally compliant. It's where users go for answers when they're done scrolling.

KULDEEP

1 year ago

1.4k
Modern CTA section
CTA banner

Pixel Perfect

2 years ago

2.5k
Call to action banner

isolde

2 years ago

6.1k