Rabit

 

///==========================Css==============

.box-pos{
    position: relative;
    height: 200px;
    backgroundColor: "#e9ecef";
}

.rabit{
    position: absolute;
    bottom: 19px;
}

.start-game-panel{
    background: #000000bf;
    position: absolute;
    top: 0px;
    bottom: -13px;
    right: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-d{
    width: 400px;
}

====================React JS Componant=================

import React,{useState,useRef} from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./rabit.css";
import "./test.css";

//============Main Componant
export  function TestGame () {
    const [isGameOver,setIsGameOver]=useState(false);
    const [isGameStart,setIsGameStart]=useState(false);
    const [rabitPos,setRabitPos]=useState(0);
    const [score,setScore]=useState(0);

    const [gameOver,setGameOver]=useState(1);//minute
    const [timeOutCout,setTimeOutCout]=useState(0);
    let randomPos=0;
    let countTime=0;
    const previousNumber = useRef(null);


    const StartGame_Fun=()=>{
        Reset();
        setIsGameStart(true);
        //timer enable
        let interval1=setInterval(function () {
            RabitPosition();
        },3000-countTime);
        //random num 1-9
        //condition Event Key Up
        document.addEventListener("keyup", handleKeyUp);

        //==================Timeout=============
        let interval2=setInterval(()=>{
            setTimeOutCout((pre)=>++pre);
            if(timeOutCout%5===0){
                console.log("Time incress");
                countTime=countTime+350;
            }

        },1000);


        let gameOverOut=setTimeout(()=>{
            clearInterval(interval1);
            clearInterval(interval2);
            clearTimeout(gameOverOut);
            setIsGameOver(true);

        },1000*60*gameOver);
    }
    const Reset=()=>{
        setIsGameOver(false);
        setIsGameStart(false);
        setRabitPos(0);
        setScore(0);
        setGameOver(1); // Reset to 1 minute
        setTimeOutCout(0);
        randomPos = 0; // Reset the local variable
    }
    const handleKeyUp = (event) => {

        if(randomPos==event.key&&!isGameOver){
            RabitPosition();
            setScore((prevScore) => prevScore + 1);
        }
    };

    const RabitPosition=()=>{
        let randomNum;
        do {
            randomNum = Math.floor(Math.random() * 9) + 1;
        } while (randomNum === previousNumber.current);

        previousNumber.current = randomNum; // Update the previous number
        setRabitPos(randomNum);
        randomPos=randomNum;
    }
    return <>

        <div
            className="d-flex justify-content-center align-items-center vh-100"
            style={{ backgroundColor: "#f8f9fa" }}
        >
            <div className="container">
                <div className="d-flex justify-content-between">
                    <span>Time: {(60*gameOver)-timeOutCout}</span>
                    <span>Score: {score}</span>
                </div>
                <div className="row">
                    {Array.from({ length: 9 }).map((_, index) => (
                        <div className="col-4 mb-3" key={index}>
                            <div
                                className="border rounded d-flex justify-content-center align-items-center box-pos">
                                {
                                    rabitPos===(index+1)?
                                        <img className={"rabit"} src={"./img/R5.webp"} width={100}/>
                                        :<h1>Box {index + 1}</h1>
                                }

                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
        {
            isGameStart?<></>:<StartGame StartGame_Fun={StartGame_Fun}/>
        }
        {
            isGameOver&&<GameOver score={score} StartGame_Fun={StartGame_Fun}/>
        }

        </>
}

function StartGame({StartGame_Fun}) {
    return (
        <div className={"start-game-panel"}>
            <div>
                <h1 className={"text-white text-center"}>Start Game</h1>
                <img src={"./img/R4.webp"} className={"img-d"} />
                <div className="d-grid gap-2">
                    <button onClick={()=>{StartGame_Fun()}} className="btn btn-primary" type="button">Start Game</button>
                </div>
            </div>
        </div>
    )
}

function GameOver({score,StartGame_Fun}) {
    return (
        <div className={"start-game-panel"}>
            <div>
                <h1 className={"text-white text-center"}>Game Over</h1>
                <img src={"./img/R3.webp"} className={"img-d"}/>
                <h3 className={"text-white"}>Score:{score}</h3>
                <div className="d-grid gap-2">
                    <button onClick={()=>{StartGame_Fun()}} className="btn btn-primary" type="button">Try Aain</button>
                </div>
            </div>
        </div>
    )
}

export function TestRotate() {

    return(
        <div id="rotate-x" className="container">
            <div className="panel">
                <TestGame/>
            </div>
        </div>
    )
}