بازی برج‌سازی
یک بلوک بالای برج، چپ و راست می‌رود. تو ضربه می‌زنی و بلوک همان‌جا می‌افتد. هر بخشی که بیرون بزند، بریده می‌شود و پایین می‌افتد. بلوک بعدی هم‌اندازه‌ی بخش باقی‌مانده می‌شود.
پس هر ضربه‌ی دقیق، جا را برای ضربه‌ی بعدی باز نگه می‌دارد. ولی هر ضربه‌ی بد، برج را باریک‌تر می‌کند. همین که دیگر جایی نماند، صفحه‌ی «پایان بازی» می‌آید و می‌نویسد «عالی بازی کردی». 🏗️
حالا خودت بازی کن
بلوک‌ها را دقیق روی هم بگذار و برجت را تا جای ممکن بلند کن. ببینیم تا کجا می‌رسی؟ 🎮
هر ضربه‌ی دقیق، پایه‌ی ضربه‌ی بعدی شد. تعادل و زمان‌بندی بودند که برجت را ساختند. 🌟
بلوک‌های سه‌بعدی چطور ساخته می‌شوند
این بازی بلوک‌ها را واقعا سه‌بعدی می‌کشد و کار را three.js انجام می‌دهد. three.js یک صحنه (scene) می‌سازد و مکعب‌ها را داخلش می‌چیند. بعد همه را روی بوم (canvas) صفحه می‌کشد.
یک دوربین (camera) هم داخل صحنه هست. با بلندتر شدن برج، دوربین آرام بالا می‌رود تا همیشه بالای برج جلوی چشمت باشد. حالا چرا برج تخت به نظر نمی‌رسد؟ چون نور صحنه به هر مکعب یک وجه روشن و یک وجه تاریک می‌دهد. 🎥
بریدن اضافه و انیمیشن افتادن
وقتی ضربه می‌زنی، برنامه لبه‌های بلوک تازه را با بلوک زیرش می‌سنجد. هر مقدار که بیرون زده باشد، از بلوک جدا می‌شود. باقی‌مانده روی برج می‌نشیند و بلوک بعدی هم‌اندازه‌ی همان می‌شود.
ولی تکه‌ی بریده‌شده همان‌جا نمی‌ماند. GSAP آن را می‌چرخاند و تا پایین صفحه می‌برد. GSAP یک کتابخانه‌ی انیمیشن است. تو نقطه‌ی شروع و پایان را می‌دهی و او بقیه‌ی حرکت را نرم می‌کند. 💫
حالا نوبت توست
یک سوال کوتاه درباره‌ی ساخت همین بازی.
توی بازی برج‌سازی، مکعب‌های سه‌بعدی چطور روی صفحه کشیده می‌شوند؟
جواب درست، همان گزینهی three.js است. بازی برج‌سازی مکعب‌ها را واقعا سه‌بعدی می‌سازد. three.js یک صحنه می‌سازد و مکعب‌ها و دوربین را داخلش می‌چیند. بعد همه را روی بوم (canvas) صفحه می‌کشد. برای همین با بلند شدن برج، دوربین بالا می‌رود. هر مکعب هم وجه روشن و سایه دارد. حرکت نرم بلوک و افتادن تکه‌ی بریده‌شده هم کار GSAP است. نه عکس، نه ویدیوی آماده.