js实现一个拼图游戏效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现一个拼图游戏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">


<style>
    body,html {
        padding: 0px;
        margin: 0px;
        background: #eee;
    }
    #gameDiv {
        width: 460px;
        height: 460px;
        margin: 20px auto;
        background: #F9F9F9;
        padding: 1px 1px;
        position: relative;
    }
    #maskBox {
        opacity: 0.5;
        display: block;
    }
</style>
</head>
<body>

    <div style="width:460px;margin:20px auto;text-align:center;line-height:30px;">
        游戏说明：点击选中一个区块，在点击到其它区块，图片互相替换过程。
    </div>

    <div id="gameDiv"></div>

    <script>
        window.onload = function() {
            //生成函数
            gameInfo.init();
        }

    </script>
    <script>
        /**
        * Created by jsonpeter on 2015/8/13.
        */
        (function($g) {
            //游戏配置
            setting = {
                gameConfig: {
                    url: "//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png",
                    id: "gameDiv",
                    //生成规格横4 纵4
                    size: "4*4",
                    //每个元素的间隔
                    margin: 1,
                    //拖动时候块透明度
                    opacity: 0.8
                },
                setElement: {
                    type: "div",
                    id: "",
                    float: "",
                    display: "",
                    margin: "",
                    background: "",
                    width: "",
                    height: "",
                    left: "",
                    top: "",
                    position: "", //absolute
                    opacity: 0.4,
                    animate: 0.8
                }
            };
            //元素生成参数
            var _sg = setting.gameConfig;
            var _st = setting.setElement;
            var gameInfo = function() {};
            gameInfo.prototype = {
                init: function() {
                    this.creatObj();
                    this.eventHand();
                },
                sortObj: {
                    rightlist: [], //正确的排序
                    romdlist: []   //打乱后的排序
                },
                creatObj: function () {
                    _sg.boxObj = document.getElementById(_sg.id) || "";
                    //尺寸自动获取
                    var _size = _sg.size.split('*') || [0, 0];
                    //计算单个div的高宽
                    var w = Math.floor(_sg.boxObj.offsetWidth / _size[0]);
                    var h = Math.floor(_sg.boxObj.offsetHeight / _size[1]);
                    //图片生成div
                    var _size = _sg.size.split('*') || [0, 0];
                    var wt = _size[0], hg = _size[1];
                    //创建一个素组并排序打散
                    var sortList = [];
                    for (var a = 0; a < wt*hg; a++) {
                        sortList.push(a);
                    }
                    sortList.sort(randomsort);
                    this.sortObj.rightlist = sortList;
                    //---------
                    var _i = 0,
                    sid = 0;
                    for (; _i < wt; _i++) {
                        var _s = 0;
                        for (; _s < hg; _s++) {
                            //赋值随机打散后的id
                            _st.id = sortList[sid++];
                            _st.display = "block";
                            _st.float = "left";
                            //_st.top=w*_i+"px";
                            //_st.left=h*_s+"px";
                            _st.margin = _sg.margin + "px";
                            _st.background = "url('" + _sg.url + "') " + (-w * _s) + "px " + (-h * _i) + "px";
                            _st.width = w-_sg.margin*(wt/2) + "px";
                            _st.height = h-_sg.margin*(hg/2) + "px";
                            this.sortObj.romdlist.push(this.addElement());
                            // console.log( (_w*_i)+"px "+(_h*_s)+"px ");
                        }
                    }

                    this.boxSort();
                },
                boxSort: function() {
                    var _arrySort = this.sortObj.romdlist;
                    var _tmp = [],
                    _n = 0;
                    eachBox(_arrySort, function(d) {
                        _tmp.push(parseInt(_arrySort[d].id));
                    });
                    //排序新数组
                    _tmp.sort(function(a, b) {
                        return a > b?1: -1;
                    });
                    //排序后的带dom的素组
                    for (; _n < _tmp.length; _n++) {
                        var _s = 0;
                        for (; _s < _arrySort.length; _s++) {
                            if (_arrySort[_s].id == _tmp[_n]) {
                                _sg.boxObj.appendChild(_arrySort[_s]);
                            }
                        }
                    }
                    return _tmp;
                },
                //添加元素
                addElement: function() {
                    var _obj = document.createElement(_st.type);
                    _obj.id = _st.id;
                    _obj.style.display = _st.display;
                    _obj.style.float = _st.float;
                    _obj.style.margin = _st.margin;
                    _obj.style.background = _st.background;
                    _obj.style.width = _st.width;
                    _obj.style.position = _st.position;
                    _obj.style.top = _st.top;
                    _obj.style.left = _st.left;
                    _obj.style.height = _st.height;
                    return _obj;
                },
                mouseEvent: {
                    mousedown: function(ev) {
                        ev = ev || ev.event;
                        ev.preventDefault();
                        //元素类型div
                        _st.type = "span";
                        _st.id = "maskBox";
                        _st.width = this.offsetWidth + "px";
                        _st.height = this.offsetHeight + "px";
                        _st.position = "absolute";
                        _st.background = "";
                        //_st.opacity=_sg.opacity;
                        _st.left = this.offsetLeft + "px";
                        _st.top = this.offsetTop + "px";
                    },
                    mouseup: function(ev) {
                        ev = ev || ev.event;
                        //var _e=t.setEleme.........完整代码请登录后点击上方下载按钮下载查看