بازی رانندگی روی پیست

حالا خودت بازی کن

روی گوشی هر ماشین پد خودش را پایین صفحه دارد. «ماشین صورتی» و «ماشین آبی». یکی را بردار و راه بیفت. 🏁

با کامپیوتر، یک نفر با W و A و D بازی می‌کند. نفر دوم با کلیدهای جهت‌دار.

پیست با گرافیک برداری کشیده شده

پیست این بازی یک عکس معمولی نیست. با گرافیک برداری (SVG) کشیده شده است. گرافیک برداری شکل‌ها را با ریاضی توصیف می‌کند. مثلا می‌گوید از این نقطه تا آن نقطه یک منحنی بکش.

برای همین هرچقدر بزرگش کنی، لبه‌ها تمیز می‌مانند. ولی مهم‌تر از ظاهر، خود مسیر است. آن منحنی یک خط ریاضی دقیق دارد که کد می‌تواند آن را بخواند. همین مسیر بعدا ریل حرکت ماشین‌ها می‌شود. 🛣️

ماشین‌ها چطور روی مسیر می‌روند

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

مسیر را از همان منحنی پیست می‌گیرد. بعد در هر لحظه می‌گوید ماشین کجای مسیر باشد و رویش به کدام سمت. برای همین ماشین در پیچ‌ها خودش می‌چرخد و جلویش همیشه رو به جهت حرکت است. 🎯

بررسی کن چقدر یاد گرفتی

حالا یک سوال کوتاه درباره ساخت همین بازی؛ جوابش را در همین درس دیدی.