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

355

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

6 months ago

959
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

8 months ago

658
Call to action

Author:
Leon Bachmann

2 years ago

9.6k
Call to action section

Author:
Odessa Young

2 years ago

12.6k
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

2 years ago

10.4k
REGISTER - CTA - SECTION animation

Author:
ABDO-SY

7 months ago

520
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.4k
Product review card

Author:
Moriba Traore

2 years ago

15.1k
Modern CTA section
CTA banner

Author:
Pixel Perfect

1 year ago

1.8k
Call to action
Call to action section. find it makecomponents.com

Author:
makecomponents

1 year ago

1.9k
GamingOnline
used to pray game online

Author:
INGRIDE MUZIRANENGE

4 weeks ago

382
Call to Action

Author:
Abdul Baset Bappy

5 months ago

576

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components