طراحی بازی اعداد در css 3

آموزش طراحی بازی با اعداد در CSS3 و html5

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

css game making

خب در ابتدا فایل index.html را بسازید سپس این فایل را در ادیتور مورد علاقه خود (مثل sublime، dreamWeaver، Notepad++) باز کنید و دستورات زیر را در آن کپی کنید.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>chasboon- CSS3 Digit Game</title>
</head>

<body>
    <div>
        <section>
            <h1>***چسبون*** <strong>مرجع برنامه نویسی و طراحی وب</strong></h1>
            <h2>اعدادی را انتخاب کنید که مجموع آن ها ۴۰ باشد :)</h2>
            <input type="checkbox" id="a">
            <label for="a">16</label>
            <input type="checkbox" id="b">
            <label for="b">19</label>
            <input type="checkbox" id="c">
            <label for="c">9</label>
            <input type="checkbox" id="d">
            <label for="d">23</label>
            <input type="checkbox" id="e">
            <label for="e">15</label> <span class='result'></span> </section>
    </div>
</body>

</html>

جهت نمایش اعداد و انتخاب آنها از checkbox استفاده کردیم. به هر checkbox یک ID منحصر به فرد دادیم تا بتوانیم عنصر انتخاب شده را تشخیص دهیم. سپس به هر یک از این عناصر یک برچسب (Label) اختصاص دادیم تا اعداد مورد نظر را به کاربر نمایش دهیم. با استفاده از خاصیت for مشخص می کنیم که برچسب برای کدام عنصر است (شناسه ID عنصر مورد نظر را وارد کردیم) در این صورت زمانی که کاربر روی برچسبی کلیک کند chechbox متناظر با آن نیز انتخاب خواهد شد. در خط آخر نیز از یک عنصر span جهت نمایش مقدار حاصل جمع استفاده کردیم. تا اینجای کار خروجی به شکل زیر خواهد بود.

CSS Game Desing

جهت زیباتر شدن اعداد نمایش داده شده از استایل زیر استفاده خواهیم کرد. فایلی با نام style.css درون پوشه ای که فایل index.html را ساختید، بسازید و کد زیر را در آن کپی کنید.

section {
    position: relative;
    display: inline-block;
    margin: 0 0 15px 0;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    background: #008DDE;
}

input {
    position: absolute;
    left: -1000px;
}

label {
    margin: 10px;
    padding: 10px 25px;
    float: left;
    border-radius: 4px;
    background: rgba(255, 255, 255, .4);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: all .5s;
    font-size: 20px;
    cursor: pointer;
    direction: ltr;
}

label::before {
    display: inline;
}

استایل فوق عناصر checkbox را از دید کاربر مخفی خواهد کرد و کاربر تنها عنصر برچسب را مشاهده خواهد کرد. خب حالا استایلی جهت متمایز کردن برچسب انتخاب شده با سایر برچسب ها می نویسیم. کد زیر را در ادامه استایل ها اضافه کنید

input:checked + label {
    border: 1px solid rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 0px 10px #fff;
}

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

حالا استایل عنصر span که حاصل جمع را نمایش خواهد داد اضافه می کنیم:

span {
    margin: 10px auto;
    padding: 10px 25px;
    float: left;
    background: #ff0087;
    border-radius: 4px;
    font-size: 20px;
    border: 1px solid #7d0044;
    opacity: .9;
    box-shadow: 0 0 10px #ff0;
}

خروجی کدها تا این مرحله بصورت زیر خواهد بود:

css game design part 2

قسمت مهم کار نمایش حاصل جمع اعداد انتخاب شده می باشد. کد های زیر را جهت محاسبه مقادیر انتخاب شده به ادامه فایل های css اضافه کنید.

#a:checked {
    counter-increment: sum 16;
}

#b:checked {
    counter-increment: sum 19;
}

#c:checked {
    counter-increment: sum 9;
}

#d:checked {
    counter-increment: sum 23;
}

#e:checked {
    counter-increment: sum 15;
}

.result::before {
    content: '=' counter(sum);
}

در صورتیکه عنصری با ID=a انتخاب شده باشد (#a:checked) مقدار عدد ۱۶ با متغیر sum جمع خواهد شد. در صورتیکه پشت عدد علامت منفی بگذارید این مقدار از متغیر sum کم خواهد شد (مثلاً sum -16).

زمانیکه عنصری انتخاب شد باید مقدار حاصل درون عنصر span نمایش داده شود. بنابراین در خط آخر مقدار befor برای عنصری با کلاس result را با متغیر sum که در پاراگراف قبلی توضیح دادیم، مقدار دهی کردیم.

حال اگر روی هر برچسبی کلیک کنید حاصل جمع آن با اعداد قبلی درون span با کلاس result نمایش داده می شود. با توجه به اعداد نمایش داده شده در صورتیکه کاربر اعداد (۱۶، ۹ و ۱۵) را انتخاب کند برنده بازی خواهد بود بنابر این در انتها نوبت به نمایش یک پیغام مناسب جهت پایان بازی می رسد. کد های زیر را به انتهای فایل css اضافه کنید

#a:checked ~ #b:not(:checked) ~ #c:checked ~ #d:not(:checked) ~ #e:checked ~ .result::after {
    content: 'شما برنده شدید';
    color: yellow;
    text-shadow: 0 0 5px #000;
    font-size: 20px;
}

با استفاده از خاصیت (checked) و (not: (checked)) عناصر انتخاب شده و انتخاب نشده را تشخیص می دهیم. دراین مثال اعداد مورد نظر ما دارای شناسه های (a, c, e) بودند و سایر checkbox ها (b, d) نباید انتخاب شوند. در این صورت پیغام "شما برنده شدید" نمایش داده خواهد شد.

خب به پایان این آموزش رسیدیم. امیدوارم از این آموزش خوشتون اومده باشه.

لطفا نظرات سازنده خود را با ما در میان بگذارید. چسبون مجله برنامه نویسی و طراحی وب

آموزش طراحی بازی با اعداد در CSS3 و html5

دیدگاهی وجود ندارد