Home
Bonimater
an off line game of catching afox

an off line game of catching afox

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

Call to Action Image gallery

Author Bonimater

469

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.

Author:
ORGIN_DREAMS

7 months ago

1.1k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

2 months ago

328
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.3k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

19.8k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

11 months 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.

Author:
Homayoun

3 months ago

582
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

8 months ago

1.3k
CTA section with floating icos as background

Author:
EliteAI Tools

11 months ago

1.2k
CTA with image

Author:
Fagundo67

3 years ago

9.9k
CTA - call to action section

Author:
ABDO-SY

8 months ago

873
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
Highlighted Important section with button

Author:
Amit Pachange

2 years ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components