بازی Drag & Drop با استفاده از jQuery

در این مقاله می خواهیم با کمک توابع drag & drop جی کوئری یک بازی Drag & Drop ایجاد کنیم. دو جعبه ایجاد خواهیم کرد که محتوای جعبه اول را کشیده و در جعبه دیگر می اندازیم.

در این برنامه می خواهیم از توابع مرتب سازی استفاده کنیم.

در ابتدا نیاز است که یک صفحه html5 مانند زیر ایجاد کنیم و برای زیباتر شدن، یک تصویر در زمینه قرار دهیم. بنابراین از کد زیر استفاده می کنیم.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body >
    <form id="form1" runat="server">
        <div>

        </div>
    </form>
</body>

</html>

<style>
    body {
        background: url("2.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

تصویری مانند زیر را خواهید داشت.

هنگامی که یک بازی سمت کلاینت ایجاد می کنیم لازم است که jQuery و jQuery UI را در صفحه لینک دهیم.

<script src="jquery-2.0.2.min.js"></script>  
<script src="jquery-ui.js"></script>

در مرحله بعد محتویات قابل Drag کردن را مانند زیر ایجاد می کنیم.

            <div class="dragDiv">
                <div id="dragDivInner">
                    <div myid="1" class="droppable" myval="I"></div>
                    <div myid="2" class="droppable"></div>
                    <div myid="3" class="Notdroppable"></div>
                    <div myid="6" class="droppable"></div>
                    <div myid="7" class="droppable"></div>
                    <div myid="8" class="Notdroppable"></div>
                    <div myid="9" class="droppable" myval="R"></div>
                    <div myid="10" class="Notdroppable"></div>
                    <div myid="11" class="droppable"></div>
                    <div myid="12" class="droppable"></div>
                    <div myid="17" class="droppable"></div>
                    <div myid="18" class="Notdroppable"></div>
                    <div myid="19" class="droppable"></div>
                    <div myid="20" class="Notdroppable" myval="A"></div>
                    <div myid="21" class="droppable"></div>
                    <div myid="22" class="droppable"></div>
                    <div myid="23" class="Notdroppable"></div>
                    <div myid="24" class="droppable"></div>
                    <div myid="25" class="Notdroppable" myval="N"></div>
                    <div myid="26" class="droppable"></div>
                    <div myid="27" class="droppable"></div>
                    <div myid="28" class="Notdroppable"></div>
                    <div myid="29" class="droppable"></div>
                    <div myid="30" class="Notdroppable"></div>
                   
                </div>
            </div>

اکنون ما نیاز داریم که یک div درجایی که می توانیم محتویات را در آن بکشیم قرار دهیم.

<div class="dropDiv">  
   <div id="draggedContent" style="display: none;"></div>  
</div>

بازی نیاز به قوانین دارد. پس باید قوانین آن را تنظیم کنیم.

<div id="gamerules" dir="rtl">
                <ul>
                    <li class="caption">IRAN قوانین بازی یافتن کلمه </li>
                    <li>می توانید هر جعبه رنگی را بگیرید و بکشید </li>
                    <li>هر حرف از کلمهIRAN در پشت این جعبه ها پنهان شده اند </li>
                    <li>بازی به اینصورت است که با کشیدن و انداختن هرکدام از جعبه ها به کادر کناری، حروف های کلمه را پیدا کنید</li>
                    <li>بازی را شروع کنید</li>
                </ul>
            </div>

الان می خواهیم برای المان ها استایل قرار دهیم.

.dropDiv {  
    border: 1px solid#ccc;  
    width: 25 % ;  
    height: auto;  
    padding: 10px;  
    display: inline;  
    position: absolute;  
    margin - left: 5px;  
    min - height: 265px;  
}.dragDiv {  
    border: 1px solid#ccc;  
    width: 27 % ;  
    height: auto;  
    padding: 10px;  
    float: left;  
    margin - left: 5px;  
    min - height: 265px;  
}#parent {  
    /*border: 1px solid #ccc;*/  
    height: 307px;  
    width: 70 % ;  
    padding: 20px;  
}.droppable {  
    width: 25px;  
    height: 28px;  
    padding: 5px;  
    background - color: green;  
    margin: 3px;  
    float: left;  
    cursor: move;  
}.Notdroppable {  
    width: 25px;  
    height: 28px;  
    padding: 5px;  
    background - color: red;  
    margin: 3px;  
    float: left;  
}#countdiv {  
    margin - top: 10px;  
    float: left;  
}#gamerules {  
    border: 1px solid#ccc;  
    width: 250px;  
    height: 280px;  
    padding: 5px;  
    float: right;  
    margin - left: 5px;  
}.caption {  
    list - style: none;  
    color: green;  
    padding: 5px;  
    font - weight: bold;  
}

بنابراین صفحه ما مانند تصویر زیر خواهد بود.

گام بعدی، اضافه کردن قابلیت مرتب سازی با استفاده از jQuery sortable برای div که کلاس dropDiv را دارا می باشد.

$(".dropDiv").sortable({  
   connectWith: '.dropDiv',  
   forcePlaceholderSize: true,  
   forceHelperSize: true,  
   opacity: 0.60,  
   placeholder: 'placeholder',  
   tolerance: 'touch',  
   scroll: false,  
   cancel: '.dropDiv',  
   start: function (event, ui) {  
   },  
   stop: function (event, ui) {  
   },  
   update: function (event, ui) {  
   },  
   receive: function (event, ui) {  
   }  
});

توجه داشته باشید که خصوصیت connectwith را برای کشیده شدن از یک div و انداختن در div دیگر با استفاده از کلاس dropDiv. ایجاد کرده ایم.

connectWith: '.dropDiv'

همچنین یک ویژگی به نام cancel ایجاد کردیم تا از div مربوط به drop نتوان عمل drag یا کشیدن را انجام داد.

cancel: '.dropDiv',

در مرحله بعد، قابلیت draggable را برای div داخلی ایجاد می کنیم.

$('.Notdroppable,.droppable').draggable({  
   connectToSortable: '.dropDiv',  
   containment: "#dropDiv",  
   helper: 'clone',  
   revert: 'invalid'  
});

همانطور که در dragdiv مشاهده می کنید، صفاتی با نام myval برای بعضی از divها ایجاد کردیم. کاری که انجام می دهند این است که، هنگامی که یک کاربر یک div را می کشد، بررسی می شود که آیا آن div خاص، آن صفت را دارد یا نه. اگر دارای صفت بود، کاربر یک حرف را دریافت می کند. در این روش کاربر نیاز به جمع آوری 4 حروف می باشد.

بنابراین در تابع stop اسکریپت های زیر را اضافه خواهیم کرد.


stop: function (event, ui) {  
            ++count;  
            if (ui.item.attr('myval')) {  
                $('#draggedContent').show().append(ui.item.attr('myval'));  
            }  
            $(".dragDiv div[myid=" + ui.item.attr('myid') + "]").remove();  
            var res = maxTrial - count;  
            if (res == 0) {  
                $('#countdiv').show().html('متاسفانه شانس دیگری وجود ندارد. صفحه را رفرش کنید تا بازی مجددا شروع شود');  
                $('.dragDiv .droppable, .dragDiv .Notdroppable').remove();  
            } 
            else {  
                $('#countdiv').show().html('You still have ' + res + ' tries');  
            }  
            $('.dropDiv .droppable, .dropDiv .Notdroppable').remove();  
            if ($('#draggedContent').html().length == 5) {  
                alert('تبریک! شما برنده شدید');  
                $('#countdiv').show().html('تبریک! شما برنده شدید!برای شروع بازی صفحه را رفرش کنید');  
                $('.dragDiv .droppable, .dragDiv .Notdroppable').remove();  
            }  
        }

در اینجا بررسی می کنیم که آیا div داخلی دارای صفات مدنظر است یا نه و هنگامی که آن را یافت، آن div را از قسمت dragDiv حذف می کنیم.

if (ui.item.attr('myval')) {  
   $('#draggedContent').show().append(ui.item.attr('myval'));  
}  
$(".dragDiv div[myid=" + ui.item.attr('myid') + "]").remove();

بعد از اینکه کاربر آن تعداد حروف موردنظر را پیدا کرد، بهتر است که یک پیغامی به آن نشان دهیم. این بررسی را درتابع start قرار می دهیم.

start: function (event, ui) {  
   if (count > maxTrial) {  
      $('#countdiv').show().html('متاسفانه شانس دیگری ندارید!!! برای انجام مجدد بازی رفرش کنید');  
   } 
   else 
   {  
   }  
}

بازی Drag And Drop

اگر کاربر دیگر هیچ شانسی در سمت چپ نداشته باشد، یک پیغام دریافت خواهد کرد.

کاری که در مرحله بعد باید انجام دهیم این است که محتوای div را جابجا کنیم، در غیر اینصورت، کاربر کاشی ها را اگر در همان محل قبلی و به همان ترتیب قبلی باشند به راحتی پیدا خواهد کرد.

برای انجام این کار بصورت داینامیک از اسکریپت های زیر استفاده می کنیم.

var parent = $("#dragDivInner");  
var divs = parent.children();  
while (divs.length) {  
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);  
}

سپس راست کلیک و رویداد ماوس را باید غیرفعال کنیم.

document.onmousedown = function (event) {  
   event = (event || window.event);  
   if (event.keyCode == 123) {  
      return false;  
   }  
}  
document.onkeydown = function (event) {  
   event = (event || window.event);  
   if (event.keyCode == 123) {  
      return false;  
   }  
}  
$(document).on("contextmenu", function (e) {  
   return false;  
});

همچنین کلید f12 روی صفحه کلید را نیز غیرفعال می کنیم.

document.onkeypress = function (event) {  
   event = (event || window.event);  
   if (event.keyCode == 123) {  
      return false;  
   }  
}

مانند بازی های دیگر تنظیماتی را ایجاد می کنیم.

<div id="gameSettings">  
<br />  
Select Game Level :  
<select id="selectGameLevel">  
   <option value="Easy">آسان</option>  
   <option value="Medium">متوسط</option>  
   <option value="Hard">سخت</option>  
</select>  
</div>

و در گزینه های drop down تعداد حداکثر انتخاب های مجاز را کم خواهیم کرد.

$("#selectGameLevel").change(function (e) {  
   var selected = $("#selectGameLevel option:selected").val();  
      if (selected == "Easy") {  
         maxTrial = 25;  
      } else if (selected == "Medium") {  
         maxTrial = 15;  
         } else if (selected == "Hard") {  
            maxTrial = 10;  
         }  
}

بنابراین صفحه کامل ما مانند زیر خواهد بود.

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

<!DOCTYPE html>
<html>
<head>
    <title>Find INDIA Game - Sibeesh Passion</title>
    <script src="jquery-2.0.2.min.js"></script>
    <script src="jquery-ui.js"></script>


    <script>
        var count = 0;
        var maxTrial = 25;
        document.onkeypress = function(event) {
            event = (event || window.event);
            if (event.keyCode == 123) {
                return false;
            }
        }
        document.onmousedown = function(event) {
            event = (event || window.event);
            if (event.keyCode == 123) {
                return false;
            }
        }
        document.onkeydown = function(event) {
            event = (event || window.event);
            if (event.keyCode == 123) {
                return false;
            }
        }
        $(function() {
            $(document).on("contextmenu", function(e) {
                return false;
            });
            var parent = $("#dragDivInner");
            var divs = parent.children();
            while (divs.length) {
                parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
            }
            $("#selectGameLevel").change(function(e) {
                var selected = $("#selectGameLevel option:selected").val();
                if (selected == "Easy") {
                    maxTrial = 25;
                } else if (selected == "Medium") {
                    maxTrial = 15;
                } else if (selected == "Hard") {
                    maxTrial = 10;
                }
            });
            $('.Notdroppable,.droppable').draggable({
                connectToSortable: '.dropDiv',
                containment: "#dropDiv",
                helper: 'clone',
                revert: 'invalid'
            });
            $(".dropDiv").sortable({
                connectWith: '.dropDiv',
                forcePlaceholderSize: true,
                forceHelperSize: true,
                opacity: 0.60,
                placeholder: 'placeholder',
                tolerance: 'touch',
                scroll: false,
                cancel: '.dropDiv',
                start: function(event, ui) {
                    if (count > maxTrial) {
                        $('#countdiv').show().html('متاسفانه شانس دیگری ندارید!!!. صفحه را رفرش کنید تا بازی مجددا شروع شود');
                    } else {
                    }
                },
                stop: function (event, ui) {
                    ++count;
                    if (ui.item.attr('myval')) {
                        $('#draggedContent').show().append(ui.item.attr('myval'));
                    }
                    $(".dragDiv div[myid=" + ui.item.attr('myid') + "]").remove();
                    var res = maxTrial - count;
                    if (res == 0) {
                        $('#countdiv').show().html('متاسفانه شانس دیگری وجود ندارد. صفحه را رفرش کنید تا بازی مجددا شروع شود');
                        $('.dragDiv .droppable, .dragDiv .Notdroppable').remove();
                    }
                    else {
                        $('#countdiv').show().html('شماهنوز ' + res + ' شانس دارید');
                    }
                    $('.dropDiv .droppable, .dropDiv .Notdroppable').remove();
                    if ($('#draggedContent').html().length == 4) {
                        alert('تبریک! شما برنده شدید');
                        $('#countdiv').show().html('تبریک! شما برنده شدید!برای شروع بازی صفحه را رفرش کنید');
                        $('.dragDiv .droppable, .dragDiv .Notdroppable').remove();
                    }

                },
                update: function(event, ui) {},
                receive: function(event, ui) {}
            });
        });

    </script>

    </head>
    <body id="body">
        <div id="gameSettings">
            <br />
            سطح بازی را انتخاب کنید :

            <select id="selectGameLevel">
                <option value="Easy">آسان</option>
                <option value="Medium">متوسط</option>
                <option value="Hard">سخت</option>
            </select>
        </div>
        <div id="parent" style="float: left;">
            <div class="dragDiv">
                <div id="dragDivInner">
                    <div myid="1" class="droppable" myval="I"></div>
                    <div myid="2" class="droppable"></div>
                    <div myid="3" class="Notdroppable"></div>
                    <div myid="6" class="droppable"></div>
                    <div myid="7" class="droppable"></div>
                    <div myid="8" class="Notdroppable"></div>
                    <div myid="9" class="droppable" myval="R"></div>
                    <div myid="10" class="Notdroppable"></div>
                    <div myid="11" class="droppable"></div>
                    <div myid="12" class="droppable"></div>
                    <div myid="17" class="droppable"></div>
                    <div myid="18" class="Notdroppable"></div>
                    <div myid="19" class="droppable"></div>
                    <div myid="20" class="Notdroppable" myval="A"></div>
                    <div myid="21" class="droppable"></div>
                    <div myid="22" class="droppable"></div>
                    <div myid="23" class="Notdroppable"></div>
                    <div myid="24" class="droppable"></div>
                    <div myid="25" class="Notdroppable" myval="N"></div>
                    <div myid="26" class="droppable"></div>
                    <div myid="27" class="droppable"></div>
                    <div myid="28" class="Notdroppable"></div>
                    <div myid="29" class="droppable"></div>
                    <div myid="30" class="Notdroppable"></div>
                    
                </div>
                <div id="countdiv" style="display: none;"></div>
            </div>
            <div class="dropDiv">
                <div id="draggedContent" style="display: none;"></div>
            </div>
            <div id="gamerules" dir="rtl">
                <ul>
                    <li class="caption">IRAN قوانین بازی یافتن کلمه </li>
                    <li>می توانید هر جعبه رنگی را بگیرید و بکشید </li>
                    <li>هر حرف از کلمهIRAN در پشت این جعبه ها پنهان شده اند </li>
                    <li>بازی به اینصورت است که با کشیدن و انداختن هرکدام از جعبه ها به کادر کناری، حروف های کلمه را پیدا کنید</li>
                    <li>بازی را شروع کنید</li>
                </ul>
            </div>
        </div>
    </body>
</html>

<style>
    body {
        background: url("2.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .dropDiv {
        border: 1px solid #ccc;
        width: 25%;
        height: auto;
        padding: 10px;
        display: inline;
        position: absolute;
        margin-left: 5px;
        min-height: 265px;
    }

    .dragDiv {
        border: 1px solid #ccc;
        width: 27%;
        height: auto;
        padding: 10px;
        float: left;
        margin-left: 5px;
        min-height: 265px;
    }

    #parent {
        /*border: 1px solid #ccc;*/
        height: 307px;
        width: 70%;
        padding: 20px;
    }

    .droppable {
        width: 25px;
        height: 28px;
        padding: 5px;
        background-color: green;
        margin: 3px;
        float: left;
        cursor: move;
    }

    .Notdroppable {
        width: 25px;
        height: 28px;
        padding: 5px;
        background-color: red;
        margin: 3px;
        float: left;
    }

    #countdiv {
        margin-top: 10px;
        float: left;
    }

    #gamerules {
        border: 1px solid #ccc;
        width: 250px;
        height: 280px;
        padding: 5px;
        float: right;
        margin-left: 5px;
    }

    .caption {
        list-style: none;
        color: green;
        padding: 5px;
        font-weight: bold;
    }
</style>

اکنون می توانید بازی را شروع کنید.

فایل های ضمیمه

3700_DragDropGame.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

بازی Drag & Drop با استفاده از jQuery

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید