طراحی بازی با ریاضی با css3
گه شما یه سایت تفریحی داشته باشید و یا یه سایت آموزشی داشته باشید، ترجیح میدید قابلیت هایی رو در سایتتون قرار بدید تا بازدیدکننده ها سرگرم بشن و تو سایتتون زمان بیشتری و سپری کنند…
همونطور که میدونید طراحی سایت در موضوعات مختلفی صورت میگیره ، مثلا اگه شما یه سایت تفریحی داشته باشید و یا یه سایت آموزشی داشته باشید، ترجیح میدید قابلیت هایی رو در سایتتون قرار بدید تا بازدیدکننده ها سرگرم بشن و تو سایتتون زمان بیشتری و سپری کنند که این امر برای سئو سایتتون هم میتونه مفید باشه.
در این مقاله قصد دارم طراحی یه بازی ساده رو بهتون آموزش بدم که فقط با خصوصیت های جدید در css3 و html5 پیاده سازی شده و جی کوئری یا زبان های دیگه دخالتی در طراحی این بازی ندارند.
طراحی سایت معقوله ی گستره ای هست ، در این آموزش شمارو با خصوصیات و selector های جدید آشنا میکنم. بعد از خوندن این مقاله حتی شاید بگید اصلا فکرش و نمیکردم css3 همچین توانایی داشته باشه ?
قبل از شروع آموزش بهتره دموی بازی رو ببینید . برای مشاهده دمو کلیک کنید .
در این بازی چند عدد مثبت و منفی به شما نمایش داده میشه و شما باید اعداد رو باهم جمع و تفریق کنید تا نتیجه عدد ۷۲ بدست بیاد و بعد به شما متنی رو مبنی بر اینکه ” شما برنده شدید ” نمایش میده.
برای شروع کار کد html زیر رو مینویسیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
|
<section>
<h2>اعدادی رو انتخاب کنید که نتیجه ی جمع و تفریق آنها عدد ۷۲ باشد</h1>
<input id=“a” type=“checkbox”><label for=“a”>+64</label>
<input id=“b” type=“checkbox”><label for=“b”>+16</label>
<input id=“c” type=“checkbox”><label for=“c”>–32</label>
<input id=“d” type=“checkbox”><label for=“d”>+128</label>
<input id=“e” type=“checkbox”><label for=“e”>+4</label>
<input id=“f” type=“checkbox”><label for=“f”>–8</label>
<span class=“sum”></span>
</section>
|
اگر به کدهای بالا دقت کرده باشید برای label ها از صفت for استفاده کردیم ، از این صفت زمانی استفاده می کنیم که بخوایم یک label رو به یک checkbox اختصاص بدیم ، به عبارتی زمانی که شما روی یک label کلیک می کنید ، ckeckbox مربوط به اون label تیک میخوره و انتخاب میشه. از این روش میتونید برای استایل دهی های مختلف به checkbox ها و radio ها استفاده کنید.
حالا به چه صورت انجام میشه؟ ابتدا به هر checkbox یه id اختصاص میدیم ، سپس مقدار id هر checkbox رو برای for لیبل مربوط به خودش قرار میدیم. به این صورت هر زمان که مثلا روی label با مقدار a کلیک کنیم checkbox با id=a انتخاب میشه.
در انتها یه span برای نمایش نتایج قرار دادیم ، ما براش کلاس sum رو در نظر گرفتیم شما هر نامی که دلتون میخواد براش قرار بدید.
حالا بهتره یه مقدار محیط بازی رو زیباتر کنیم، بنابراین به sectionمون استایل زیر رو میدیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
|
section {
margin–bottom: 16px;
padding: 16px;
border–radius: 4px;
overflow: hidden;
background–color: #008DDE;
}
|
یه استایل شیک هم به checkbox ها و label ها میدیم :
ما میخوایم checkbox ها از دید کاربر مخفی بشه و کاربر فقط label رو با اعداد ببینه بنابریان استایل زیر رو به checkbox میدیم:
|
۱
۲
۳
۴
۵
۶
۷
|
input {
position: absolute;
right: –9999px;
}
|
حالا به label ها استایل زیر رو اختصاص میدیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
|
label {
float: right;
margin: 8px;
padding: 16px;
border–radius: 4px;
border: solid 2px rgba(255, 255, 255, .4);
background–color: rgba(255, 255, 255, .2);
cursor: pointer;
transition: all .1s;
font–size:20px;
direction:ltr
}
label::before {
display: inline;
}
|
استایل ها کاملا واضحه پس توضیح نمیدم ، استایل بعدی باز مربوط میشه به label ها و چک باکس ها همراه باهم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
|
input:checked + label {
border: solid 2px #fff;
background–color: rgba(255, 255, 255, .4);
box–shadow: 10px #fff;
}
|
در استایل بالا گفتیم هر وقت که چک باکسی انتخاب شد، label مربوط به اون چک باکس استایل بالارو به خودش بگیره.
حالا به span یی که قراره نتیجه رو در اون مشاهده کنیم استایل میدیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
|
span {
float: right;
margin: 8px;
padding: 21px 18px;
border–radius: 4px;
background–color: #2C547A;
}
|
تا اینجا ما فقط محیط بازی و زیبا کردیم ف حالا باید عملیات رو تعریف کنیم .
حالا باید بگیم زمانی که روی چک باکس ها کلیک شد مقادیر label مربوط به اون چک باکس در span نمایش داده بشه ، در اینجا از خصوصیت جدید counter-increment استفاده می کنیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
|
#a:checked { counter-increment: ac +64; }
#b:checked { counter-increment: ac +16; }
#c:checked { counter-increment: ac -32; }
#d:checked { counter-increment: ac +128; }
#e:checked { counter-increment: ac +4; }
#f:checked { counter-increment: ac -8; }
|
در کد بالا ما با استفاده از counter-increment برای هر checkbox انتخاب شده یک نام و یک عدد در نظر میگیریم ، دقت داشته باشید این اعداد با اعداد نمایشی در html برابر هست.
حالا میخوایم بگیم که هروقت روی چک باکس کلیک کردیم عدد مربوطه در span نمایش داده بشه ، برای اینکار از کد زیر استفاده می کنیم:
|
۱
۲
۳
۴
۵
|
.sum::before {
content: ‘= ‘ counter(ac);
}
|
در کد بالا گفتیم محتوای قبل از span رو مقدار ac قرار بده. حالا با انتخاب هر چک باکس عدد مثبت و منفی چک باکس باهم جمع و تفریق شده و نتیجه رو در کلاس span میبینیم.
در این بازی اگر ما اعداد +۶۴ و +۱۶ و -۸ رو همزمان باهم انتخاب کنیم عدد ۷۲ بدست میاد که نتیجه ی برد بازی ماست. پس میگیم در صورتی که چک باکس های a و b و f تیک خورده بودند، در span که کلاس sum رو براش در نظر گرفتیم ، متن ” شما برنده شدید ” رو نمایش بده ، برای این کار استایل زیر رو در نظر میگیریم:
|
۱
۲
۳
۴
۵
|
#a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #e:not(:checked) ~ #f:checked ~ .sum::after {
content: ‘ ( شما برنده شدید ) ‘;
}
|
در کد بالا شما selector های جدید :checkو :not(checked) رو میبینید ، این انتخابگرها یعنی زمانی که چک باکس ” انتخاب شده بود ” یا ” انتخاب نشده بود” .
متن ” شما برنده شدید ” رو در after کلاس sum یا همون span نمایش میدیم، به عبارتی نتیجه ی اعداد رو در before یعنی قبل span و متن برنده شدن رو در after یعنی بعد span نمایش میدیم.
خوب تبریک میگم شما تونستید با css3 یک بازی با ریاضی طراحی کنید ? حالا با دانسته های خودتون میتونید این بازی رو زیباتر و جذاب تر کنید.
منبع : armanic.com
