بازی پازل با Html

جمعه 25 دی 1394

در این مقاله قصد داریم یک بازی پازل با استفاده از html,javascript و css بسازیم، ابن بازی به صورت 2D اجرا خواهد شدو برای توسعه دهندگان بازی با استفاده از html مفید خواهد بود.

بازی پازل با Html

در این مقاله قصد داریم با استفاده از css,html, javascript به یک روش ساده یک بازی پازل دو بعدی بسازیم، و بتوانیم یک تصویر را از یک جایی به جای دیگر منتقل نماییم. برای درک موضوع به ادامه ی مطالعه ی مقاله بپردازید.

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

برای درک بهتر بازی باید به 3 بخش آن را تقسیم کنیم یکی html است که به ظاهر بازی می پردازد یک بخش css که برای طراحی و responsive بودن آن است و یک بخش به نام javascript که برای منطق خود بازی استفاده خواهد شد.

در این بازی پازل تصاویر به تعدادی شکسته شده است، که هر کدام از li  ها داخل یک ul قرار گرفته است، برای نمایش تصاویر از یک li استفاده می کنیم، زیر هر عکس از یک background استفاده می نماییم و عکس مورد نظر را قرار می دهیم.

کد قسمت html به صورت زیر خواهد بود:

   setImage: function (images, gridSize) {
        console.log(gridSize);
        gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
        console.log(gridSize);
        var percentage = 100 / (gridSize - 1);
        var image = images[Math.floor(Math.random() * images.length)];
        $('#imgTitle').html(image.title);
        $('#actualImage').attr('src', image.src);
        $('#sortable').empty();
        for (var i = 0; i < gridSize * gridSize; i++) {
            var xpos = (percentage * (i % gridSize)) + '%';
            var ypos = (percentage * Math.floor(i / gridSize)) + '%';
            var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
                'background-image': 'url(' + image.src + ')',
                'background-size': (gridSize * 100) + '%',
                'background-position': xpos + ' ' + ypos,
                'width': 400 / gridSize,
                'height': 400 / gridSize
            });
            $('#sortable').append(li);
        }
        $('#sortable').randomize();
    }

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

اندازه شبکه نشان می دهد که قطعات تصاویر چگونه باید شکسته شود، حالا در این قسمت بازی پازل را به صورت 3*3 که این روش easy است ، 4*4 روش متوسط است و 5*5 روش پیچیده در نظر گرفته شده است.که کاربر می تواند آن را انتخاب نماید.

شما می توانید از تابع جی کوئری زیر برای کنار هم قرار گرفتن تصاویر و شکسته شدن آن استفاده نمایید به صورت زیر :

$.fn.randomize = function (selector) {
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function () {
        $(this).children(selector).sort(function () {
            return Math.round(Math.random()) - 0.5;
        }).remove().appendTo(this);
    });
    return this;
}; 

در کد بالا شما یک شماره به صورت random دریافت می نمایید که باید بین 0 و مجموعه فرزاندان انتخاب یک مجموعه باشد، که هر کدام از آن ها یک مقداری را دریافت می نماید و با این element مورد نظر این انتقال خواهد یافت.

drag & drop کردن قطعات:

زمانی که می خواهیم یک پازل را درست نمایید باید تصویر مورد نظر را از جایی که قرار دارد به محلی که می خواهد برود بگذاریم.

enableSwapping: function (elem) {
        $(elem).draggable({
            snap: '#droppable',
            snapMode: 'outer',
            revert: "invalid",
            helper: "clone"
        });
        $(elem).droppable({
            drop: function (event, ui) {
                var $dragElem = $(ui.draggable).clone().replaceAll(this);
                $(this).replaceAll(ui.draggable);

                currentList = $('#sortable > li').map(function (i, el) { 
                    return $(el).attr('data-value'); });
                if (isSorted(currentList))
                    $('#actualImageBox').empty().html($('#gameOver').html());

                imagePuzzle.enableSwapping(this);
                imagePuzzle.enableSwapping($dragElem);
            }
        });
    } 

در قطعه کد بالا isstored که صدا زده می شود در حال چک کردن این است که تصاویر درست کنار هم قرار گرفته است یا نه

استفاده از کلاس های css برای این است که کاربر بتواند آن را در گوشی و یا کامپیوتر و وسایل دیگر بتواند بازی نماید.

در تابع جی کوئری که نوشته شده است اگر تصاویری که درست کنار هم قرار گرفته شده اند پس بازی تمام می شود و اگر تصاویر به درستی کنار هم قرار نگرفته اند پس بازی ادامه خواهد داشت.

تایمر یک بخش مهمی در این بازی خواهد بود با شروع بازی زمان به صورت ثانیه ای شروع می نماید و زمان ادامه خواهد داشت و وقتی که پازل مورد نظر درست شد زمان متوقف خواهد شد.برای شروع بازی دیگر هم دوباره زمان از 0 شروع خواهد شد.

tick: function () {
        var now = new Date().getTime();
        var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
        $('#timerPanel').text(elapsedTime);
        timerFunction = setTimeout(imagePuzzle.tick, 1000);
    } 

در اینجا از متد gettime برای محاسبه ی زمان استفاده کرده ایم.

ممکن است این بازی در مرورگرهای کم تر از IE8 کار نکند، و جی کوئری درست کار نکند، اگر شما در نسخه های قدیمی می خواهید باز ی نمایید بهتر است که که از ورژن جی کوئری قبل از نسخه ی 1.9 استفاد نمایید.

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

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

نویسنده 3355 مقاله در برنامه نویسان
  • HTML
  • 4k بازدید
  • 3 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید