Geeks Andijan

JSX
    const [isJumping, setIsJumping] = useState(false);
    const [dinoImage, setDinoImage] = useState(dinoStationary);
    const [runIndex, setRunIndex] = useState(0);
    const [cactusArray, setCactusArray] = useState([]);

    const jump = () => {
        setIsJumping(true);
        setTimeout(() => {
            setIsJumping(false);
        }, 400);
    };

    const generateCactus = () => {
        const randomX = Math.random() * (window.innerWidth - 50); 
        return { id: Date.now(), position: window.innerWidth + randomX }; 
    };

    useEffect(() => {
        const handleKeyPress = (e) => {
            if (e.code === 'Space') {
                jump();
            }
        };

        window.addEventListener('keydown', handleKeyPress);

        const cactusInterval = setInterval(() => {
            setCactusArray((prev) => [...prev, generateCactus()]);
        }, 3000);

        return () => {
            window.removeEventListener('keydown', handleKeyPress);
            clearInterval(cactusInterval);
        };
    }, []);

    useEffect(() => {
        const moveCacti = setInterval(() => {
            setCactusArray((prev) =>
                prev
                    .map((cactus) => ({ ...cactus, position: cactus.position - 5 }))
                    .filter((cactus) => cactus.position > -200)
            );
        }, 100);

        return () => clearInterval(moveCacti);
    }, []);

    useEffect(() => {
        setDinoImage(isJumping ? dinoStationary : runIndex === 0 ? dinoRun0 : dinoRun1);

        const runInterval = !isJumping && setInterval(() => {
            setRunIndex((prevIndex) => (prevIndex + 1) % 2);
        }, 100);

        return () => runInterval && clearInterval(runInterval);
    }, [isJumping, runIndex]);

SCSS
    @import '../../../../assets/variables';

    .dinoGame {
        margin-top: 2rem;

        &__content {
            display: flex;
            justify-content: space-between;
            gap: 1rem;

            &__game {
                width: 49%;
                position: relative;
                background-color: $light-black;
                border-radius: 1rem;
                overflow: hidden;
                height: 350px;

                &__elemets {
                    &__dino {
                        position: absolute;
                        bottom: 0;
                        left: 50px;
                        width: 45px;
                        height: auto;
                        transition: bottom 0.2s ease;
                        z-index: 2;
                    }

                    &__obstacle {
                        position: absolute;
                        bottom: .3rem;
                        width: 25px;
                        height: auto;
                        animation: moveObstacle 5s linear infinite;
                        z-index: 1;
                    }

                    &__marquee {
                        overflow: hidden;
                        white-space: nowrap;
                        width: 100%;
                        position: absolute;
                        bottom: 0;

                        .list {
                            position: relative;
                            display: inline-block;
                            animation: marquee 10s linear infinite;
                        }
                    }
                }


                &__btn {
                    display: none;
                }
            }

            &__code {
                width: 49%;
                height: 350px;
                overflow-y: scroll;

                &::-webkit-scrollbar {
                    width: .2rem;
                    height: .2rem;
                }
            }
        }
    }

    .top {
        top: 1rem;
        bottom: auto;
    }

    .jumping {
        animation: jump 0.5s ease forwards;
    }

    @keyframes jump {
        0% {
            bottom: 0;
        }

        50% {
            bottom: 100px;
        }

        100% {
            bottom: 0;
        }
    }

    @keyframes moveObstacle {
        0% {
            right: -50px;
        }

        100% {
            right: 100vw;
        }
    }

    @keyframes marquee {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }