拼图、jquery拼图、javascript拼图

最新推荐文章于 2022-03-07 20:33:05 发布

QVGPkey

最新推荐文章于 2022-03-07 20:33:05 发布

阅读量296

点赞数

分类专栏： html + css3 + javascript 笔记文章标签： jquery拼图

本文链接：https://blog.csdn.net/qq_41915181/article/details/102515605

版权

html + css3 + javascript 笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用javascript、jquery制作简单拼图

拥有分级机制

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>拼图</title>
    <script src="jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="pinTo.css" />
    <script>
        var level = 2;
        //拼块对象
        speller = {
            img: function (imgindex) {

                return "url('" + imgindex + ".jpg')  no-repeat";//图片
            },
            //初始化
            init: function () {
                var imgindex = Math.ceil(Math.random(1) * 4);//图片名称
                level = Number(level) + 1;
                if(level < 3){
                    level = 3;
                }
                //级别判定
                if (level > 11) {
                    alert("你输入的级别已经高于最高级,默认为1级");
                    level = 3;
                }
                else if (level <= 1) {
                    alert("你输入的级别已经低于最低级,默认为1级");
                    level = 3;
                }
                //isNaN : 判断变量是否是数字，是返回假，不是返回真
                else if (typeof (level) != "number" || isNaN(level)) {
                    alert("你输入的级别不正确，默认为1级");
                    level = 3;
                }


                var content = $("#content");
                //设置显示原图
                console.log(speller.img());
                $(".content").css({
                    "background": speller.img(imgindex),
                    "float": "left",
                });

                // 生成拼块前，删除容器内的所有拼块
                $("#content").empty();
                var divCount = level * level;//拼块总数
                //生成拼块,拼块数量
                var p = 0;
                //设置拼块的位置
                var left = 0;
                var top = 0;
                //拼块背景图片的位置
                var pkW = 0;
                var pkH = 0;
                //求出每个拼块的高
                var blockH = parseInt(content.height() / level);
                //求出每个拼块的宽
                var blockW = parseInt(content.width() / level);

                for (let i = 0; i < level; i++) {
                    for (let j = 0; j < level; j++) {
                        $("#content").append("<div class=" + p + " id='" + p
                            + "'></div>");
                        //设置拼块的背景
                        $(" #content>div#"+p).css({
                            "background": speller.img(imgindex),
                            "top": top + "px",  
                            "left": left + "px",
                            "background-position": "-" + pkW + "px -" + pkH + "px",
                            "width": blockW + "px",
                            "height": blockH + "px",
                           
                            "float": "left",
                        });
                        p++;
                        //增加一个拼块的宽度
                        left = left + blockW;
                        //每设置一个拼块的背景，就获取下一个拼块背景的宽度位置
                        pkW = pkW + blockW;
                    }
                    left = 0;//一行的拼块设置完毕，宽度恢复初始位置
                    top = top + blockH;//拼块的高提升一个拼块
                    pkW = 0;
                    pkH = pkH + blockH;//拼块的背景高提升一个拼块
                }

                this.boxs = $("#content>div");//拼图中的小拼块对象
                this.blank = this.boxs.length - 1;
                this.hardNum = divCount;
                this.levelq = level;
                onclickgo();//所有拼块的点击事件
                this.rndBox();
            },
            /*打乱方格布局*/
            rndBox: function () {
                var count = 0;
                var html = [], sum = 0;
                //获取拼块的class值保存在数组中
                for (let i = 0; i < this.boxs.length; i++) {
                    html.push(parseInt(this.boxs[i].className));
                }

                while (count < html.length-2) {
                    //随机一个数，取出数组中的值
                    var d = parseInt(Math.random() * html.length);
                    //如果取值失败，结束
                    if (html.length < 2) {
                        break;
                    }
                    var h1 = html[d];
                    //删除取出的一个值，在取出一个数
                    html.splice(d, 1);
                    var d = parseInt(Math.random() * html.length);
                    var h2 = html[d];
                    html.splice(d, 1);
                    //两个数交换位置
                    this.swapTwo(this.getByClass(h1), this.getByClass(h2));
                    count++;
                }
                // 设置最后一个拼块隐藏
                this.divList = $("#content>div:last").css("display", "none");
                // this.getByClass(this.blank).style.display = "none";
            },
            /*点击移动,参数：当前对象*/
            move: function (currBox) {
                var content = $("#content");
                //求出每个拼块的高
                var blockH = parseInt(content.height() / this.levelq);
                //求出每个拼块的宽
                var blockW = parseInt(content.width() / this.levelq);
                //如果当前点击的拼块附近有一块隐藏的拼块，就和其交换位置，否则，点击无效
                var divList = this.divList[0];
                var listTop = parseInt(divList.style.top);
                var listLeft = parseInt(divList.style.left);
                var thisTop = parseInt(currBox.style.top);
                var thisLeft = parseInt(currBox.style.left);
                //判断当前点击的拼块是否与隐藏的拼块相邻
                //高度相减 的绝对正值 结果为 一个拼块的高度 并且 宽度相等 || 
                //宽度相减 的绝对正值 结果为 一个拼块的宽度 并且 高度相等
                if (Math.abs(listTop - thisTop) == blockH && listLeft == thisLeft ||
                    Math.abs(listLeft - thisLeft) == blockW && listTop == thisTop) {
                    this.swapTwo(currBox, divList);
                }
                if (this.check()) {
                    this.getByClass(this.blank).style.display = "block";
                    alert("哇，你真棒！");
                }
            },
            /*根据className获取对象*/
            getByClass: function (cls) {
                for (var i = 0; i < this.boxs.length; i++) {
                    if (parseInt(this.boxs[i].className) == cls) return this.boxs[i];
                }
                return null;
            },
            /*检查是否完成*/
            check: function () {
                for (var i = 0; i < this.boxs.length; i++) {
                    if (this.boxs[i].className != this.boxs[i].id) return false;
                }
                return true;
            },
            /*交换两个方格*/
            swapTwo: function (boxA, boxB) {
                var left = boxA.style.left;
                var top = boxA.style.top;
                var cls = boxA.className;
                boxA.style.top = boxB.style.top;
                boxA.style.left = boxB.style.left;
                boxA.className = boxB.className;
                boxB.style.top = top;
                boxB.style.left = left;
                boxB.className = cls;
            },

        };


        $(window).ready(function () {
            //number :把空的字符串改为0，字符串转换为数值
            level = Number(prompt("请选择级别(1~10),默认1级", ""));//级别,一行的拼块个数
            speller.init(); //初始化
            afterDiv();//追加生成的拼块

            $(".alterLevel").click(function () {
                level = $("#putLevel").val();
                $("#putLevel").val("");
                speller.init();
            });
        })
        /*所有拼块的点击事件*/
        function onclickgo() {

            $("#content>div").click(function () {
                speller.move(this);
            });
        };
        /* 追加拼块的方法 */
        function afterDiv() {
            $("#hard").append(
                "<div>"
                + "<button class='flush' οnclick='javascript:speller.rndBox();'>重新加载</button>"
                + "</div>"
                + "<div>"
                + "<input id='putLevel' type='text' style='height:30px;line-height:100%' placeholder='输入拼图等级(1~10)' value='' />"
                + "<button class='alterLevel'  >确定</button>"
                + "</div>")
        };
    </script>
</head>

<body>
    <div id="pinTo">
        <div id="move">
            <div class="show">
                <div class="content borderMargin"></div>
                <div id="content" class="borderMargin"></div>
            </div>
            <div id="hard"></div>
        </div>
    </div>
</body>
</html>

QVGPkey

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
拼图、jquery拼图、javascript拼图

使用javascript、jquery制作简单拼图拥有分级机制<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>拼图</title> <script src="jquery-3.4.1.js"&gt...
复制链接

扫一扫