限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 抽奖&游戏

jquery数字华容道小游戏代码

所属分类： 网页特效-抽奖&游戏    2024-10-23 08:09:06

 4.2K  0  查看评论 (0)
jquery数字华容道小游戏代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

jquery数字华容道小游戏代码（共4个文件）

    • kuli8.js
    • kuli8.css
    • jquery-1.7.1.js
    • index.html

使用方法

  • code
  • source
  1. function kuli8(elem, btn) {

  2.     // 先把自己用变量储存起来,后面要用

  3.     var myself = this;

  4. 

  5.     //    if (!window.layer)

  6.     //        throw new Error('kuli8 need layer.js');

  7. 

  8.     var $elem = $(elem), $startBtn = $(btn);

  9.     $elem.addClass('layui-row layui-col-space1 box');

  10.     var noNum = 'no-num', defRadix = 3, isStop = true;

  11. 

  12.     //1.先默认显示1-8类数字，以示规则：

  13.     myself.init = function(radix) {

  14.         radix = getRadix(radix);

  15.         for (var i = 1; i < radix * radix; i++) {

  16.             $elem.append('<div class="layui-col-xs1 box-item" ' + getItemStyle(radix) + '><div>' + i + '</div></div>');

  17.         }

  18.         $elem.append('<div class="layui-col-xs1 box-item no-num" ' + getItemStyle(radix) + '><div></div></div>');

  19.         $elem.after('<audio src="./mp3/fall.mp3"></audio>');

  20. 

  21.         // 添加事件：

  22.         addEventListener(radix);

  23.     }

  24. 

  25.     // 2.重新、开始游戏

  26.     myself.restart = function(radix) {

  27.         radix = getRadix(radix);

  28.         var array = getTempArray(radix);

  29.         $elem.html('');

  30.         $.each(array, function(i, number) {

  31.             $elem.append('<div class="layui-col-xs1 box-item" ' + getItemStyle(radix) + '><div>' + number + '</div></div>');

  32.         });

  33.         $elem.append('<div class="layui-col-xs1 box-item no-num" ' + getItemStyle(radix) + '><div></div></div>');

  34. 

  35.         if (checkGameOver(false))

  36.             return myself.restart(radix);

  37.         isStop = false;

  38.         // 添加事件：

  39.         addEventListener(radix);

  40.     }

  41.     

  42.     /**

  43.      * @see 数列的逆序数为偶数

  44.      * @see 数字华容道，必然有解，只存在于如下3个细分情形：

  45.      * @see 若格子列数为奇数，则逆序数必须为偶数；

  46.      * @see 若格子列数为偶数，且逆序数为偶数，则当前空格所在行数与初始空格所在行数的差为偶数；

  47.      * @see 若格子列数为偶数，且逆序数为奇数，则当前空格所在行数与初始空格所在行数的差为奇数。

  48.      */

  49.     function getTempArray(radix) {

  50.         var array = [];

  51.         for (var i = 1; i < radix * radix; i++)

  52.             array.push(i);

  53.         array.sort(function() {

  54.             return Math.random() - 0.5;

  55.         });

  56.         if (!canUse(array))

  57.             return getTempArray(radix);

  58.         return array;

  59.     }

  60. 

  61.     // 判断生成的数组是否符合规则

  62.     function canUse(numbers) {

  63.         // 声明标识逆序数的个数

  64.         var ivsNumber = 0;

  65.         // 遍历数组

  66.         for (var i = 0; i < numbers.length; i++) {

  67.             for (var j = i + 1; j < numbers.length; j++) {

  68.                 // 依次两两对比,判断前一个是否比后一个大

  69.                 if (numbers[i] > numbers[j]) {

  70.                     // 是,则ivsNumber加1

  71.                     ivsNumber++;

  72.                 }

  73.             }

  74.         }

  75.         // 判断ivsNumber变量是否为偶数

  76.         return (ivsNumber % 2 == 0);

  77.     }

  78. 

  79.     function getRadix(radix) {

  80.         radix = !radix || isNaN(radix) ? defRadix : parseInt(radix);

  81.         return defRadix = Math.max(Math.min(radix, 30), 3);

  82.     }

  83. 

  84.     function getItemStyle(radix) {

  85.         var w = chuyu(300, radix), fs = [0, 100, 80, 60, 40, 30, 30, 24, 20, 18, 16, 14, 12, 10, 10][radix];

  86.         return 'style="width:' + w + 'px;height:' + w + 'px;line-height:' + w + 'px;font-size:' + (fs || 10) + 'px;"';

  87.     }

  88. 

  89.     function msg(msg, isAlert) {

  90.         if (window.layer)

  91.             return isAlert ? layer.alert(msg) : layer.msg(msg);

  92.         return alert(msg);

  93.     }

  94. 

  95.     function addEventListener(radix) {

  96.         $elem.find('.box-item').click(function() {

  97.             if (isStop) return msg('请先点击开始游戏！');

  98.             var $me = $(this);

  99.             if ($me.hasClass(noNum)) return;//点击了空！

  100.             var html = $me.html();

  101.             var index = $elem.find('.box-item').index(this) + 1;

  102.             var bln, check = function($target) {

  103.                 if ($target.length > 0 && $target.hasClass(noNum)) {

  104.                     $me.html($target.html()).addClass(noNum);

  105.                     $target.html(html).removeClass(noNum);

  106.                     return true;

  107.                 }

  108.                 return false;

  109.             };

  110. 

  111.             //上

  112.             if (!bln && index - radix > 0) {

  113.                 bln = check($elem.find('.box-item:eq(' + (index - radix - 1) + ')'));

  114.             }

  115.             //下

  116.             if (!bln) {

  117.                 bln = check($elem.find('.box-item:eq(' + (index + radix - 1) + ')'));

  118.             }

  119.             //左

  120.             if (!bln && index % radix != 1) {

  121.                 bln = check($me.prev());

  122.             }

  123.             //右

  124.             if (!bln && index % radix != 0) {

  125.                 bln = check($me.next());

  126.             }

  127.             if (bln) {

  128.                 checkGameOver(bln);

  129. 

  130.                 $elem.next('audio')[0].play();

  131.             }

  132.         });

  133. 

  134.         if ($startBtn.length > 0)

  135.             $startBtn.text(isStop ? '开始游戏' : '重新开始');

  136.     }

  137. 

  138.     function checkGameOver(isTips) {

  139.         var isOver = true;

  140.         $elem.find('.box-item').each(function(index, item) {

  141.             var $me = $(item), text = $me.text();

  142.             if (!text || $me.hasClass(noNum)) return;//空！

  143.             if (index + 1 != text)

  144.                 return isOver = false;

  145.         });

  146.         if (isOver && isTips) {

  147.             isStop = true;

  148.             msg('恭喜您，游戏通关！', true);

  149.             if ($startBtn.length > 0)

  150.                 $startBtn.text('重新开始');

  151.         }

  152.         return isOver;

  153.     }

  154. 

  155.     function chuyu(m, n) {

  156.         return n == 0 ? 0 : m / n;

  157.     }

  158. 

  159.     return myself.init();

  160. }

function kuli8(elem, btn) {
    // 先把自己用变量储存起来,后面要用
    var myself = this;

    //    if (!window.layer)
    //        throw new Error('kuli8 need layer.js');

    var $elem = $(elem), $startBtn = $(btn);
    $elem.addClass('layui-row layui-col-space1 box');
    var noNum = 'no-num', defRadix = 3, isStop = true;

    //1.先默认显示1-8类数字，以示规则：
    myself.init = function(radix) {
        radix = getRadix(radix);
        for (var i = 1; i < radix * radix; i++) {
            $elem.append('<div class="layui-col-xs1 box-item" ' + getItemStyle(radix) + '><div>' + i + '</div></div>');
        }
        $elem.append('<div class="layui-col-xs1 box-item no-num" ' + getItemStyle(radix) + '><div></div></div>');
        $elem.after('<audio src="./mp3/fall.mp3"></audio>');

        // 添加事件：
        addEventListener(radix);
    }

    // 2.重新、开始游戏
    myself.restart = function(radix) {
        radix = getRadix(radix);
        var array = getTempArray(radix);
        $elem.html('');
        $.each(array, function(i, number) {
            $elem.append('<div class="layui-col-xs1 box-item" ' + getItemStyle(radix) + '><div>' + number + '</div></div>');
        });
        $elem.append('<div class="layui-col-xs1 box-item no-num" ' + getItemStyle(radix) + '><div></div></div>');

        if (checkGameOver(false))
            return myself.restart(radix);
        isStop = false;
        // 添加事件：
        addEventListener(radix);
    }
    
    /**
     * @see 数列的逆序数为偶数
     * @see 数字华容道，必然有解，只存在于如下3个细分情形：
     * @see 若格子列数为奇数，则逆序数必须为偶数；
     * @see 若格子列数为偶数，且逆序数为偶数，则当前空格所在行数与初始空格所在行数的差为偶数；
     * @see 若格子列数为偶数，且逆序数为奇数，则当前空格所在行数与初始空格所在行数的差为奇数。
     */
    function getTempArray(radix) {
        var array = [];
        for (var i = 1; i < radix * radix; i++)
            array.push(i);
        array.sort(function() {
            return Math.random() - 0.5;
        });
        if (!canUse(array))
            return getTempArray(radix);
        return array;
    }

    // 判断生成的数组是否符合规则
    function canUse(numbers) {
        // 声明标识逆序数的个数
        var ivsNumber = 0;
        // 遍历数组
        for (var i = 0; i < numbers.length; i++) {
            for (var j = i + 1; j < numbers.length; j++) {
                // 依次两两对比,判断前一个是否比后一个大
                if (numbers[i] > numbers[j]) {
                    // 是,则ivsNumber加1
                    ivsNumber++;
                }
            }
        }
        // 判断ivsNumber变量是否为偶数
        return (ivsNumber % 2 == 0);
    }

    function getRadix(radix) {
        radix = !radix || isNaN(radix) ? defRadix : parseInt(radix);
        return defRadix = Math.max(Math.min(radix, 30), 3);
    }

    function getItemStyle(radix) {
        var w = chuyu(300, radix), fs = [0, 100, 80, 60, 40, 30, 30, 24, 20, 18, 16, 14, 12, 10, 10][radix];
        return 'style="width:' + w + 'px;height:' + w + 'px;line-height:' + w + 'px;font-size:' + (fs || 10) + 'px;"';
    }

    function msg(msg, isAlert) {
        if (window.layer)
            return isAlert ? layer.alert(msg) : layer.msg(msg);
        return alert(msg);
    }

    function addEventListener(radix) {
        $elem.find('.box-item').click(function() {
            if (isStop) return msg('请先点击开始游戏！');
            var $me = $(this);
            if ($me.hasClass(noNum)) return;//点击了空！
            var html = $me.html();
            var index = $elem.find('.box-item').index(this) + 1;
            var bln, check = function($target) {
                if ($target.length > 0 && $target.hasClass(noNum)) {
                    $me.html($target.html()).addClass(noNum);
                    $target.html(html).removeClass(noNum);
                    return true;
                }
                return false;
            };

            //上
            if (!bln && index - radix > 0) {
                bln = check($elem.find('.box-item:eq(' + (index - radix - 1) + ')'));
            }
            //下
            if (!bln) {
                bln = check($elem.find('.box-item:eq(' + (index + radix - 1) + ')'));
            }
            //左
            if (!bln && index % radix != 1) {
                bln = check($me.prev());
            }
            //右
            if (!bln && index % radix != 0) {
                bln = check($me.next());
            }
            if (bln) {
                checkGameOver(bln);

                $elem.next('audio')[0].play();
            }
        });

        if ($startBtn.length > 0)
            $startBtn.text(isStop ? '开始游戏' : '重新开始');
    }

    function checkGameOver(isTips) {
        var isOver = true;
        $elem.find('.box-item').each(function(index, item) {
            var $me = $(item), text = $me.text();
            if (!text || $me.hasClass(noNum)) return;//空！
            if (index + 1 != text)
                return isOver = false;
        });
        if (isOver && isTips) {
            isStop = true;
            msg('恭喜您，游戏通关！', true);
            if ($startBtn.length > 0)
                $startBtn.text('重新开始');
        }
        return isOver;
    }

    function chuyu(m, n) {
        return n == 0 ? 0 : m / n;
    }

    return myself.init();
}

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 游戏源码小游戏代码数字游戏在线游戏
相关资源 / 抽奖&游戏
查看更多

html5野狼捕杀兔子小游戏源码

 一款有趣的野狼猎食兔子的小游戏代码，兔子在前野狼在后追赶，点击屏幕或点击鼠标，使得兔子快速奔跑、跳跃，逃避野狼追捕，带剧情背景音乐、积分功能。
  抽奖&游戏
 7225  0

jquery创建的九宫格游戏源码

 这款游戏类似于常见的五子棋，也是大家熟知的圈圈叉叉双人游戏，也叫井字棋游戏。
  抽奖&游戏
 6344  0

原生js canvas弹珠打砖块小游戏源码

 一款带积分等级的弹珠打砖块小游戏源码，canvas画布绘制，很有趣的网页小游戏。
  抽奖&游戏
 2517  0

html5小游戏自动推箱子

 一款原生js编写的智能推箱子小游戏，支持开启机器人推箱子，也可以手动推箱子。
  抽奖&游戏
 9224  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论，快来抢个沙发！
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论