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

188

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

2 months ago

341
Boost Your Business with a Stunning Website!
Take your online presence to the next level with a high-performing, visually captivating website. Let’s build something amazing together!

Author:
Vikas Kushwah

4 months ago

222
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Author:
Prajwal Hallale

1 year ago

10.2k
Call to Action section for home page

Author:
Sophia Baker

2 years ago

9k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

18.4k
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.

Author:
KULDEEP

1 month ago

436
Simple Btn animation

Author:
Ranit Saha

6 months ago

1.2k
Survey CTA

Author:
JaxStone

2 years ago

13.7k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

11 months ago

988
Promotion Block
It features a large, centered title, a brief description, and a prominent CTA button, all centered within a visually appealing layout.

Author:
Computer guy

1 year ago

7.2k
Drinkware landing page

Author:
Maxim

4 months ago

770
Hero section with image

Author:
Sophia Baker

2 years ago

12.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components