html5拼圖小游戲代碼



153 611 204



特效描述:html5 拼圖小游戲代碼,html5拼圖小游戲代碼

代碼結構

1. HTML代碼

<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:"6.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.setElement;
                ev.preventDefault();
               var obj=document.getElementById(this.id);
                if(obj){
                    _sg.boxObj.removeChild(obj);
                }
            },
            mousemove:function(ev){
                ev=ev|| ev.event;
                this.style.left=getX_Y.call(this,"x",ev)+"px";
                this.style.top=getX_Y.call(this,"y",ev)+"px";
            }
        },
        //正確檢查 對比兩個數組
        gameCheck:function(){
            var s= 0,bols=true;
            var _arry=this.sortObj.rightlist;
            var _arryRom=this.sortObj.romdlist;
            console.log(_arry);
            console.log(_arryRom);
            for(;s<_arry.length;s++){
               if(_arry[s]!=_arryRom[s].id){
                   bols=false;
                   break;
               }
            }
         return bols;
        },
        eventHand: function () {
         var _obj= _sg.boxObj.getElementsByTagName("div");
            var i= 0,olen=_obj.length;
            var that=this;
            var m=that.mouseEvent;
             var box_index=0;
            for(;i<olen;){
                    (function(n){
                        //按下鼠標
                        _obj[n].addEventListener("mousedown",function(e){
                            var _this=this;
                            m.mousedown.call(_this,e);
                            _st.background=_this.style.background;
                            _this.style.background="#FFF";
                            //生成可移動的div
                            var _newObj=that.addElement();
                            _sg.boxObj.appendChild(_newObj);
                            _newObj.style.opacity=_sg.opacity;
                            //移動位置
                            _newObj.onmousemove=function(e){
                                m.mousemove.call(_newObj,e);
                               // console.log("____"+this.offsetLeft);
                                var _i= 0;
                                for(;_i<olen;_i++){
                                    var _w=parseInt(_obj[_i].style.width)/1.5;
                                    var _h=parseInt(_obj[_i].style.height)/1.5;
                                    var _left=_obj[_i].offsetLeft;
                                    var _top=_obj[_i].offsetTop;
                                    var _boxX=parseInt(this.style.left);
                                    var _boxY=parseInt(this.style.top);
                                    //還原樣式
                                    eachBox(_obj,function(d){
                                        _obj[d].style.opacity=1.0;
                                    });
                                    //計算拖動到的位置
                                    if(_left+_w>_boxX||_left>_boxX+_w)
                                    {
                                        if(_top+_h>_boxY||_top>_boxY+_h)
                                        {
                                            box_index=_i;
                                            _obj[_i].style.opacity=_st.opacity;
                                            break;
                                        }
                                    }
                                }
                            };
                            //鼠標松開
                            _newObj.addEventListener("mouseup",function(e){
                               //刪除移動事件
                                _newObj.onmousemove=function(e){};
                                //獲取當前停留元素的坐標
                                var tagObj={
                                    id1:_obj[box_index].id,
                                    id2: _this.id,
                                    bg1:_obj[box_index].style.background,
                                    bg2:this.style.background
                                };
                                //交換位置
                                _this.id=tagObj.id1;
                                _this.style.background=tagObj.bg1;
                                _obj[box_index].id=tagObj.id2;
                                _obj[box_index].style.background=tagObj.bg2;
                                //獲取拖動后的排序
                                 that.sortObj.romdlist=_obj;
                                //還原樣式
                                eachBox(_obj,function(d){
                                    _obj[d].style.opacity=1.0;
                                });
                                //刪除浮動div
                                m.mouseup.call(_newObj,e);
                                //計算是否完成拼圖
                                if(that.gameCheck()){
                                    alert("O(∩_∩)O哈哈~");
                                }
                            },false);
                        },false);
                    })(i++);
            }
        }
    }
    //隨機數
    function randomsort(a, b) {
        return Math.random()>.5 ? -1 : 1;//用Math.random()函數生成0~1之間的隨機數與0.5比較,返回-1或1
    }
    function eachBox(obj,fn){
        var _s=0;
        for(;_s<obj.length;_s++){
            fn(_s);
        }
    }
    function getX_Y(s,ev){
        var _b=(ev.clientX-this.parentNode.offsetLeft)-(this.offsetWidth/2);
        if(s==="y"){
            _b=(ev.clientY-this.parentNode.offsetTop)-(this.offsetHeight/2);
        }
        return _b;
    }
        $g.gameInfo =new gameInfo();
})(window)
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 小游戲 H5游戲 游戲源碼 手機游戲 微信游戲 網頁游戲 拼圖游戲 H5拼圖游戲 拼圖游戲源碼 拖動排序 拖拽排序
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表