آموزش طراحی وب

طراحی بازی با CSS3

در این مقاله قصد دارم طراحی ” بازی با اعداد ” رو خدمتتون آموزش بدم که با استفاده از خصیصه های جدید در css3 و html5 نوشته میشه و جی کوئری یا زبان های دیگه هیچ دخالتی در ایجاد این بازی ندارند.

game

بازی با اعداد با CSS3

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

با یکی دیگه از مقالات آموزشی در زمینه css3 در خدمت شما هستم. در این مقاله قصد دارم طراحی ” بازی با اعداد ” رو خدمتتون آموزش بدم که با استفاده از خصیصه های جدید در css3 و html5 نوشته میشه و جی کوئری یا زبان های دیگه هیچ دخالتی در ایجاد این بازی ندارند.

البته بهتره به این مقاله به چشم طراحی یک بازی نگاه نکنیم. در این آموزش شما با انتخابگرهای جدید :not(:checked) , :not(:checked) ، خصیصه های جدید counter-reset , counter-increment , content , صفت for و عملیات محاسباتی و نحوه ی استفاده از این موارد آشنا خواهید شد.

خوب ابتدای کار بهتره دموی این بازی رو ببینید « کلیک کنید »

در این بازی چند عدد مثبت و منفی به شما نمایش داده میشه و شما باید اعداد رو باهم جمع و تفریق کنید تا نتیجه ۷۲ بدست بیاد و بعد به شما پیغام میده که برنده شدید.

برای ابتدای کار کد html این بازی رو پیاده سازی می کنیم:

اگر دقت کرده باشید از صفت for برای label ها استفاده کردیم. در اینجا از این صفت زمانی استفاده می کنیم که بخوایم یک label رو به یک checkbox اختصاص بدیم. برای این منظور به checkbox یک id اختصاص میدیم و مقدار id رو برای صفت for در نظر میگیریم. در این حالت با کلیک روی label با for=”a” چک باکس با id=”a” رو انتخاب می کنیم.

یک spanدر نظر گرفتیم تا نتیجه رو نمایش بدیم. برای این عنصر کلاس sum رو در نظر میگریم. شما میتونید هر نامی که میخواین به این کلاس اختصاص بدید.

یک استایل برای section در نظر میگیریم:

حالا باید یک استایل به چک باکس ها و label ها بدیم تا به درستی و به زیبایی نمایش داده شوند:

این استایل رو به چک باکس ها میدیم تا از دیده پنهان شوند تا ما فقط label هارو نمایش بدیم و کاربر فقط label هارو ببینه. چون به label ها استایل میدیم و با استفاده از اونها اعداد رو به کاربر نمایش میدیم. با تعریف for در label ها برای هر چک باکس دیگه نیازی نیست چک باکس هارو ببینیم و بر روی چک باکس مورد نظر کلیک کنیم. همینکه روی label مورد نظر کلیک کنیم چک باکس مربوط به اون label انتخاب میشه.

حالا به label ها استایل زیر رو اختصاص میدیم:

استایل ها کاملا واضحه ، استایل بعدی باز مربوط میشه به label ها و چک باکس ها میشه:

در این استایل گفتیم هر زمان که چک باکسی تیک خورد و فعال شد، label مربوط به اون چک باکس استایل بالارو به خودش بگیره.

حالا به span یی که قراره نتیجه رو در اون مشاهده کنیم استایل میدیم:

خوب تا اینجا استایل های مربوط به label ها و چک باکس هارو دادیم. حالا میخوایم بگیم زمانی که روی چک باکس ها یا همون label ها کلیک کردیم عدد مربوطه رو در span کلاس sum بهمون نمایش بده. برای اینکار لازمه که اول مقاله ی مربوط به counter-increment رو مطالعه کرده باشید.

برای مطالعه مقاله ی آموزشی در این زمینه به لینک مقابل رجوع کنید: http://goo.gl/CHkFGz

حالا به استایل زیر دقت کنید:

در کدهای بالا ما با استفاده از counter-increment برای هر چک باکس تیک خورده و فعال یک نام و یک عدد در نظر گرفتیم. این اعداد همان اعدادی هستند که با استفاده از label ها به کابر نمایش دادیم.

حالا میخوایم زمانی که کاربر مثلا روی چک باکس a کلیک کرد و اون رو انتخاب کرد عدد مربوطه در span با کلاس sum نمایش پیدا کنه. برای اینکار از کد زیر استفاده می کنیم:

در این کد گفتیم محتوای قبل از span با کلاس sum رو مقدار iwl قرار بده. حالا با انتخاب هر چک باکس عدد مثبت و منفی چک باکس باهم جمع و تفریق شده و نتیجه رو در کلاس sum میبینیم.

تو این بازی اگر ما عدد +۶۴ و +۱۶ و -۸ رو انتخاب کنیم عدد ۷۲ بدست میاد که نتیجه ی برد بازی ماست. پس میگیم در صورتی که چک باکس های a و b و f تیک خورده بودند، در span که کلاس sum رو براش در نظر گرفتیم ، متن ” شما برنده شدید ” رو نمایش بده ، برای این منظور استایل زیر رو در نظر میگیریم:

در اینجا ما متن رو با استفاده از after بعد از کلاس sum نمایش میدیم. یعنی اول محتوای اصلی span نمایش داده میشه ، بعد عبارت درخواستی ما به نمایش درمیاد.

خوب تبریک میگم ، شما تونستید با css3 و html5یک بازی ساده طراحی کنید 😀

مقاله هایی که بهتون پیشنهاد می کنم مطالعه کنید تا این کدها براتون بیشتر جا بیوفته رو در زیر لیست میکنم:

یکی از کاربران گرامی بنام آقای حسنی بعد از مطالعه ی این مطلب یک نمونه برای ما ارسال کردند که میتونید از طریق این لینک دانلود کنید.

امیدوارم که مقاله طراحی بازی با css3 براتون مفید بوده باشه.

موفق و پاینده باشید.

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۷

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

اموزش تصادفی