ساخت بازی با اعداد در CSS3

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

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

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

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

<section>
<h1>اعدادی رو انتخاب کنید که نتیجه ی جمع و تفریق آنها عدد ۷۲ باشد</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>

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

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

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

section {
margin-bottom: 16px;
padding: 16px;
border-radius: 4px;
overflow: hidden;
background-color: #008DDE;
}

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

ایــن اســتایل رو بــه چــک باکــس هــا میدیــم تــا از دیــده پنهــان شــوند تــا ما فقــط label هــارو نمایــش بدیــم و کاربــر فقــط label هــارو ببینــه. چون بــه label هــا اســتایل میدیــم و بــا اســتفاده از اونهــا اعــداد رو بــه کاربــر نمایــش میدیــم. بــا تعریــف for در label هــا بــرای هــر چــک باکــس دیگــه نیــازی نیســت چــک باکــس هــارو ببینیــم و بــر روی چــک باکــس مــورد نظــر کلیــک کنیــم. همینکــه روی label مــورد نظــر کلیک کنیــم چک باکــس مربــوط بــه اون 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: 0 0 10px #fff;
}

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

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

span {
float: right;
margin: 8px;
padding: 21px 18px;
border-radius: 4px;
background-color: #2C547A;
}

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

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

#a:checked { counter-increment: iwl +64; }
#b:checked { counter-increment: iwl +16; }
#c:checked { counter-increment: iwl -32; }
#d:checked { counter-increment: iwl +128; }
#e:checked { counter-increment: iwl +4; }
#f:checked { counter-increment: iwl -8; }

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

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

.sum::before {
content: ‘= ‘ counter(iwl);
}

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

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

#a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #e:not(:checked) ~ #f:checked ~ .sum::after {content: ‘(شما برنده شدید ) ‘;
}

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

امیدوارم که مقاله آموزشی ساخت بازی با اعداد در CSS3 براتون مفید بوده باشه .