بازی برج‌سازی

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

پس هر ضربه‌ی دقیق، جا را برای ضربه‌ی بعدی باز نگه می‌دارد. ولی هر ضربه‌ی بد، برج را باریک‌تر می‌کند. همین که دیگر جایی نماند، صفحه‌ی «پایان بازی» می‌آید و می‌نویسد «عالی بازی کردی». 🏗️

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

بلوک‌ها را دقیق روی هم بگذار و برجت را تا جای ممکن بلند کن. ببینیم تا کجا می‌رسی؟ 🎮

هر ضربه‌ی دقیق، پایه‌ی ضربه‌ی بعدی شد. تعادل و زمان‌بندی بودند که برجت را ساختند. 🌟

بلوک‌های سه‌بعدی چطور ساخته می‌شوند

این بازی بلوک‌ها را واقعا سه‌بعدی می‌کشد و کار را three.js انجام می‌دهد. three.js یک صحنه (scene) می‌سازد و مکعب‌ها را داخلش می‌چیند. بعد همه را روی بوم (canvas) صفحه می‌کشد.

یک دوربین (camera) هم داخل صحنه هست. با بلندتر شدن برج، دوربین آرام بالا می‌رود تا همیشه بالای برج جلوی چشمت باشد. حالا چرا برج تخت به نظر نمی‌رسد؟ چون نور صحنه به هر مکعب یک وجه روشن و یک وجه تاریک می‌دهد. 🎥

بریدن اضافه و انیمیشن افتادن

وقتی ضربه می‌زنی، برنامه لبه‌های بلوک تازه را با بلوک زیرش می‌سنجد. هر مقدار که بیرون زده باشد، از بلوک جدا می‌شود. باقی‌مانده روی برج می‌نشیند و بلوک بعدی هم‌اندازه‌ی همان می‌شود.

ولی تکه‌ی بریده‌شده همان‌جا نمی‌ماند. GSAP آن را می‌چرخاند و تا پایین صفحه می‌برد. GSAP یک کتابخانه‌ی انیمیشن است. تو نقطه‌ی شروع و پایان را می‌دهی و او بقیه‌ی حرکت را نرم می‌کند. 💫

توضیح تصویر

حالا نوبت توست

یک سوال کوتاه درباره‌ی ساخت همین بازی.

توی بازی برج‌سازی، مکعب‌های سه‌بعدی چطور روی صفحه کشیده می‌شوند؟

با عکس‌های آماده‌ی مکعب که پشت سر هم عوض می‌شوند

با جدول‌های HTML که خانه‌هایشان رنگی می‌شوند

با یک ویدیوی ضبط‌شده که داخل صفحه پخش می‌شود

با three.js که یک صحنه می‌سازد و مکعب‌ها را روی بوم (canvas) می‌کشد

آفرین! دقیقا همین است.

نه، یک بار دیگر نگاه کن.