ul 中使用  16 li 元素。每个li 的显示属性设置为内联块,这样会看上去像是网格。每个 li 的背景图像设置...">
Home » Source Code » Image Puzzle: A Html Game

Image Puzzle: A Html Game

maninwest
2015-02-05 03:56:48
The author
View(s):
Download(s): 0
Point (s): 1 
Category Category:
ASP.NETASP.NET HTML/XHTML, CSSHTML/CSS

Description

family:Consolas, 'Courier New', Courier, mono;color:#990000;font-size:14.399999618530273px;line-height:normal;background-color:#FFFFFF;">ul 中使用  16 li 元素。每个li 的显示属性设置为内联块,这样会看上去像是网格。每个 li 的背景图像设置为仅显示图像的 1/16,并据此设置背景图像的位置。 .data-value 属性赋值给每个 li 来识别图片片段的索引。 
代码看上去这样:
  
for (var i = 0; i < 16; i++) {
        var xpos = (33.33 * (i % 4)) + '%';
        var ypos = (33.33 * Math.floor(i / 4)) + '%';
        var li = $('
  • ').css({ 'background-image': 'url(' + image.src + ')', 'background-position': xpos + ' ' + ypos });

    你可以看出使用简单 background-image和 background-position 样式获得看上去像是打破的效果。设置好打破的图像后,使用随机化方法将图片片段随机化。在游戏中,用户得重新排列图片来形成完整图 
    拖动图片片段


    要让每个图片片段可以拖动,要使用 jquery 拖动。请确保在页面中包含 jquery-ui.js 以实现拖放功能。 
    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);
                }
            });
        }    

    上述代码片段中可以看出,每次放下后,调用 isSortedis 来检查图片片段是否已经排序。会根据 包含 li 元素的数据值属性查看每个图片片段是否被排序。如果片段已排序,说明图片拼完了。
    设置样式
    使用最少的 css 让其简单易懂。使用的 css 让页面响应,你可以在平板或者手机上玩游戏。没用到 css的第三方库,这样你可以了解原生的   css 样式。
    计数步数

    计数步数或任何用户的操作是游戏都能用到的。这里,每次放下后,会检查是否拼成了图片。如果是,则游戏结束,如果不是,stepCount 变量自增 1.,并使用 jquery更新 UI 中的stepCount.

    浏览器兼容性


    为了简单,我没有使用 Html 5 或 CSS 3 ,这样就可以在多数浏览器中可用。这个游戏可能无法使用旧的浏览器如< IE8(因为用到了 JQuery 版本 )。
    Sponsored links

    File list

    Tips: You can preview the content of files by clicking file names^_^
    Name Size Date
    01.97 kB
    image-puzzle.css1.19 kB2014-09-02|13:59
    style.css208.00 B2014-08-28|22:18
    01.97 kB
    london-bridge.jpg147.01 kB2014-08-28|23:33
    lotus-temple.JPG139.22 kB2014-08-28|23:17
    qutub-minar.jpg120.15 kB2014-08-28|22:56
    statue-of-liberty.jpg124.09 kB2014-08-28|23:43
    taj-mahal.jpg129.16 kB2014-08-28|22:42
    01.97 kB
    image-puzzle.js2.37 kB2014-09-02|14:39
    jquery-2.1.1.min.js82.27 kB2014-09-02|13:24
    jquery-ui.js469.54 kB2014-09-02|13:24
    puzzle.html3.05 kB2014-09-02|14:46
    ...
    Sponsored links

    Comments

    (Add your comment, get 0.1 Point)
    Minimum:15 words, Maximum:160 words
    • 1
    • Page 1
    • Total 1

    Image Puzzle: A Html Game (796.16 kB)

    Need 1 Point(s)
    Your Point (s)

    Your Point isn't enough.

    Get 22 Point immediately by PayPal

    Point will be added to your account automatically after the transaction.

    More(Debit card / Credit card / PayPal Credit / Online Banking)

    Submit your source codes. Get more Points

    LOGIN

    Don't have an account? Register now
    Need any help?
    Mail to: support@codeforge.com

    切换到中文版?

    CodeForge Chinese Version
    CodeForge English Version

    Where are you going?

    ^_^"Oops ...

    Sorry!This guy is mysterious, its blog hasn't been opened, try another, please!
    OK

    Warm tip!

    CodeForge to FavoriteFavorite by Ctrl+D