Как создать игру Drag and Drop

Здравствуй! Сегодня мы создадим игру перетаскивания, которая использует функции перетаскивания jQuery . Мы создадим два блока, из одного блока нам нужно перетащить блок содержимого и перенести его в другой блок. Мы будем использовать сортируемую функцию и ее события. Я надеюсь, вам понравится эта игра.

Фон

В последний день независимости Индии я хотел создать игру, связанную со словом «ИНДИЯ». Я создал и разместил его на своем сайте.

Играть в игру

Вы можете играть в игру здесь: http://sibeeshpassion.com/FindINDIA/

Использование кода

Сначала мы создадим страницу html5 следующим образом.


<!DOCTYPE html>
<html>
<head>
    <title>Find INDIA Game - Sibeesh Passion</title>   
</head>
<body id="body">
</body>
</html>

А теперь мы установим стиль для тела. Чтобы установить фоновое изображение по размеру экрана, мы будем использовать следующие стили.


 #body {
            background: url("http://sibeeshpassion.com/content/images/indian%20flag%20banner.jpg") no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

Теперь мы можем увидеть страницу следующим образом.

Сделать изображение подходящим для экрана

Поскольку мы собираемся создать игру на стороне клиента, необходимо загрузить ссылки на jquery и jquery ui.


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

Далее мы создадим перетаскиваемое содержимое следующим образом.


<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="N"></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="I"></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 myid="31" class="Notdroppable" myval="D"></div>
                <div myid="32" class="droppable"></div>
                <div myid="33" class="droppable"></div>
                <div myid="34" class="Notdroppable"></div>
                <div myid="35" class="droppable"></div>
                <div myid="40" class="Notdroppable"></div>
            </div>
        </div>

Теперь нам нужно установить div, куда мы можем перетаскивать содержимое на него.


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

Поскольку это игра, мы должны установить правила игры тоже правильно?


<div id="gamerules">
            <ul>
                <li class="caption">Find "INDIA" Game Rules </li>
                <li>You can drag and drop any boxes. </li>
                <li>We have set each letters from "INDIA" in the boxes. It is hidden</li>
                <li>The game is, you need to find out the letters of "INDIA" by drag and drop the boxes to nearest box</li>
                <li>Let us play the game now...</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 из dropDiv.


cancel: '.dropDiv',

Далее мы установим перетаскивание для наших внутренних элементов.


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

Игра Insights

Как вы можете видеть в html нашего dragDiv, мы установили атрибут myval для некоторых элементов div. Итак, что мы собираемся сделать, когда пользователь перетаскивает элемент div, мы проверим, имеет ли этот конкретный элемент div этот атрибут и, если он есть, пользователь получил одну букву. Таким образом, пользователь должен собрать 5 букв из dragDiv.

Таким образом, в функции остановки sortable мы напишем несколько скриптов следующим образом.


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('Sorry, you have no more chances left!!!. Please refresh to start the game again');
                        $('.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('You have won the game!!!. Please collect the prize from somewhere ;)');
                        $('#countdiv').show().html('You have won the game!!!. Please collect the prize from somewhere ;)!. Please refresh to start the game again');
                        $('.dragDiv .droppable, .dragDiv .Notdroppable').remove();
                    }


                }

Мы проверяем, имеет ли внутренний div определенный атрибут следующим образом, и как только мы его найдем, мы удаляем его из dragDiv.


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

Если пользователь уже получил эти пять букв, мы должны предупредить пользователя правильно? Мы сделаем эту проверку в функции остановки .


start: function (event, ui) {
                    if (count > maxTrial) {
                        $('#countdiv').show().html('Sorry, you have no more chances left!!!. Please refresh to start the game again');
                    } else {

                    }
                }

Если шансов не осталось, пользователь получит сообщение:

Теперь, что нам нужно делать дальше? Да, нам нужно перетасовать содержимое div, иначе пользователю может быть легко, когда плитки расположены в том же порядке и в том же месте.

Для динамического перемешивания элементов 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">Easy</option>
            <option value="Medium">Medium</option>
            <option value="Hard">Hard</option>
        </select>
    </div>

А при изменении выпадающего параметра мы уменьшим максимально допустимые испытания.


 $("#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>
    <style>
        #body {
            background: url("http://sibeeshpassion.com/content/images/indian%20flag%20banner.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;
        }

        #gameSettings {
            width: auto;
        }
    </style>
    <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('Sorry, you have no more chances left!!!. Please refresh to start the game again');
                    } 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('Sorry, you have no more chances left!!!. Please refresh to start the game again');
                        $('.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('You have won the game!!!. Please collect the prize from somewhere ;)');
                        $('#countdiv').show().html('You have won the game!!!. Please collect the prize from somewhere ;)!. Please refresh to start the game again');
                        $('.dragDiv .droppable, .dragDiv .Notdroppable').remove();
                    }


                },
                update: function (event, ui) {
                },
                receive: function (event, ui) {
                }
            });
        });
    </script>
</head>
<body id="body">
    <div id="gameSettings">
        <br />
        Select Game Level : 
        <select id="selectGameLevel">
            <option value="Easy">Easy</option>
            <option value="Medium">Medium</option>
            <option value="Hard">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="N"></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="I"></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 myid="31" class="Notdroppable" myval="D"></div>
                <div myid="32" class="droppable"></div>
                <div myid="33" class="droppable"></div>
                <div myid="34" class="Notdroppable"></div>
                <div myid="35" class="droppable"></div>
                <div myid="40" 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">
            <ul>
                <li class="caption">Find "INDIA" Game Rules </li>
                <li>You can drag and drop any boxes. </li>
                <li>We have set each letters from "INDIA" in the boxes. It is hidden</li>
                <li>The game is, you need to find out the letters of "INDIA" by drag and drop the boxes to nearest box</li>
                <li>Let us play the game now...</li>
            </ul>
        </div>
    </div>
</body>
</html>

Теперь давайте играть в игру .

Вывод

Надеюсь, вам понравилась моя статья. Теперь, пожалуйста, поделитесь со мной своим мнением. Заранее спасибо.

Как создать игру Drag and Drop

Фон

Играть в игру

Использование кода

Сделать изображение подходящим для экрана

Игра Insights

Полный код

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC