جوجه‌ای که موس شما را دنبال می‌کند! | پروژه تعاملی با HTML, CSS, JavaScript

,

در این مقاله قصد داریم یک پروژه جالب و تعاملی را به شما معرفی کنیم که می‌تواند هم جنبه آموزشی داشته باشد و هم به عنوان یک المان سرگرم‌کننده در صفحات وب استفاده شود. در این پروژه، یک جوجه انیمیشنی طراحی شده که به صورت خودکار موس شما را دنبال می‌کند و در صورت توقف موس، اقدام به نوک زدن می‌کند. تمام این انیمیشن و رفتارها با استفاده از HTML، CSS و JavaScript پیاده‌سازی شده‌اند.

ویژگی‌های پروژه

  • طراحی کامل فقط با HTML، CSS و JavaScript بدون نیاز به کتابخانه‌های خارجی

  • دارای حرکت طبیعی و دنبال‌کننده موس

  • انیمیشن راه رفتن جوجه هنگام حرکت

  • انیمیشن نوک زدن جوجه هنگام توقف موس

  • طراحی ریسپانسیو و بهینه برای اجرا در مرورگرهای مدرن

  • قابل استفاده در پروژه‌های آموزشی، سایت‌های سرگرمی یا بخش‌هایی از وب‌سایت‌های تعاملی

 

نحوه عملکرد

در این پروژه، یک دایره قرمز کوچک به عنوان “دانه” در مکان موس قرار می‌گیرد. جوجه که از عناصر HTML و استایل‌دهی CSS ساخته شده، به‌طور پیوسته تلاش می‌کند به سمت این دانه حرکت کند. زمانی که به دانه نزدیک می‌شود، سرعت حرکتش کاهش یافته و در نهایت، وقتی فاصله‌اش به حد مشخصی برسد، از حرکت می‌ایستد و نوک می‌زند.

هم‌زمان با حرکت جوجه، پاها و بال‌های آن نیز با استفاده از انیمیشن‌های CSS به صورت پویا تکان می‌خورند که حس واقعی‌تری از حرکت را ایجاد می‌کند.

دموی زنده این پروژه را ببینید

اگر هنوز ویدیوی مربوط به این پروژه را مشاهده نکرده‌اید، پیشنهاد می‌کنیم حتماً آن را در کانال ما در یوتیوب ببینید:

👉 @highlearn_ir

کد کامل پروژه

در ادامه می‌توانید کد کامل این پروژه را مشاهده کنید. کافی‌ست آن را در یک فایل با پسوند .html ذخیره کرده و در مرورگر خود باز کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جوجه طلایی</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background-color: #f0f8ff;
            cursor: none;
        }
        
        #seed {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #d62c1a;
            border-radius: 50%;
            z-index: 1001;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        
        #chicken {
            position: absolute;
            width: 80px;
            height: 80px;
            pointer-events: none;
            z-index: 1000;
            transform-origin: center;
        }
        
        .chicken-body {
            position: absolute;
            width: 50px;
            height: 60px;
            background: #ffeb3b;
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
            top: 20px;
            left: 15px;
            box-shadow: inset -3px -3px 7px rgba(0,0,0,0.1);
        }
        
        .chicken-head {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ffeb3b;
            border-radius: 50%;
            top: 10px;
            left: 40px;
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
        }
        
        .eye {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 10px;
            right: 7px;
        }
        
        .beak {
            position: absolute;
            width: 10px;
            height: 7px;
            background: #ff9800;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            top: 17px;
            right: -3px;
            transform: rotate(15deg);
            z-index: 1002;
            transform-origin: left center;
        }
        
        .leg {
            position: absolute;
            width: 4px;
            height: 25px;
            background: #ff9800;
            bottom: -10px;
        }
        
        .leg.left {
            left: 25px;
            transform: rotate(5deg);
        }
        
        .leg.right {
            left: 40px;
            transform: rotate(-5deg);
        }
        
        .foot {
            position: absolute;
            width: 15px;
            height: 5px;
            background: #ff9800;
            bottom: -5px;
            border-radius: 3px;
        }
        
        .foot.left {
            left: -7px;
            transform: rotate(-10deg);
        }
        
        .foot.right {
            right: -7px;
            transform: rotate(10deg);
        }
        
        .wing {
            position: absolute;
            width: 35px;
            height: 35px;
            background: #ffd54f;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            top: 30px;
            left: 17px;
            transform: rotate(-10deg);
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
        }
        
        .walking .leg {
            animation: legMove 0.5s infinite alternate;
        }
        
        @keyframes legMove {
            0% { transform: rotate(5deg) translateY(0); }
            50% { transform: rotate(-5deg) translateY(-5px); }
            100% { transform: rotate(5deg) translateY(0); }
        }
        
        .walking .wing {
            animation: wingMove 0.5s infinite alternate;
        }
        
        @keyframes wingMove {
            0% { transform: rotate(-10deg) translateY(0); }
            100% { transform: rotate(-5deg) translateY(-3px); }
        }
        
        .eating {
            animation: eat 0.3s 3;
        }
        
        @keyframes eat {
            0% { transform: rotate(15deg); }
            50% { transform: rotate(0deg) scale(1.2); }
            100% { transform: rotate(15deg); }
        }
    </style>
</head>
<body>
    <div id="seed"></div>
    <div id="chicken">
        <div class="chicken-body"></div>
        <div class="wing"></div>
        <div class="chicken-head">
            <div class="eye"></div>
            <div class="beak" id="beak"></div>
        </div>
        <div class="leg left">
            <div class="foot left"></div>
        </div>
        <div class="leg right">
            <div class="foot right"></div>
        </div>
    </div>

    <script>
        const chicken = document.getElementById('chicken');
        const seed = document.getElementById('seed');
        const beak = document.getElementById('beak');
        let seedX = window.innerWidth / 2;
        let seedY = window.innerHeight / 2;
        let chickenX = seedX - 100;
        let chickenY = seedY - 100;
        let isMoving = false;
        let isEating = false;
        let stopTimer;
        let eatTimer;
        
        // موقعیت دانه ثابت می‌ماند
        seed.style.left = seedX + 'px';
        seed.style.top = seedY + 'px';
        
        document.addEventListener('mousemove', (e) => {
            seedX = e.clientX;
            seedY = e.clientY;
            seed.style.left = seedX + 'px';
            seed.style.top = seedY + 'px';
        });
        
        function animate() {
            const distX = seedX - (chickenX + 40);
            const distY = seedY - (chickenY + 30);
            const distance = Math.sqrt(distX * distX + distY * distY);
            
            if (distance > 15) {
                const speed = Math.min(distance / 8, 12);
                
                chickenX += distX / speed;
                chickenY += distY / speed;
                
                const angle = Math.atan2(distY, distX);
                if (angle > Math.PI/2 || angle < -Math.PI/2) {
                    chicken.style.transform = 'scaleX(-1)';
                } else {
                    chicken.style.transform = 'scaleX(1)';
                }
                
                if (isEating) {
                    isEating = false;
                    beak.classList.remove('eating');
                }
                
                isMoving = true;
                chicken.classList.add('walking');
                clearTimeout(stopTimer);
                stopTimer = setTimeout(() => {
                    isMoving = false;
                    chicken.classList.remove('walking');
                }, 300);
            } else {
                if (!isEating && !isMoving) {
                    isEating = true;
                    beak.classList.add('eating');
                    
                    clearTimeout(eatTimer);
                    eatTimer = setTimeout(() => {
                        beak.classList.remove('eating');
                    }, 1000);
                }
            }
            
            chicken.style.left = chickenX + 'px';
            chicken.style.top = chickenY + 'px';
            
            requestAnimationFrame(animate);
        }
        
        animate();
    </script>
</body>
</html>

 

💡 نکته: برای مشاهده کد کامل همراه با استایل‌ها و اسکریپت‌های داخلی، به ادامه همین مقاله مراجعه فرمایید یا از طریق باکس پایین کامنت بگذارید تا لینک مستقیم دریافت فایل را برایتان ارسال کنیم.

نحوه استفاده

  1. کد را در فایل HTML جدید کپی کنید.

  2. آن را با مرورگر (Chrome, Firefox یا …) باز کنید.

  3. نشانگر موس را حرکت دهید و از دنبال کردن آن توسط جوجه لذت ببرید!

 

نتیجه‌گیری

این پروژه ساده، یک مثال عالی از ترکیب HTML، CSS و JavaScript برای خلق تجربه‌ای تعاملی و بصری در محیط وب است. پیاده‌سازی آن نه تنها سرگرم‌کننده است، بلکه می‌تواند به عنوان تمرینی برای یادگیری انیمیشن‌ها، تعامل با کاربر و برنامه‌نویسی گرافیکی کاربردی باشد.

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *