JavaScript写一个拼图游戏

　　拼图游戏的代码400行， 有点多了， 在线DEMO的地址是：打开；

　　因为使用canvas，所以某些浏览器是不支持的： you know；  

　　为什么要用canvas(⊙o⊙)？  因为图片是一整张jpg或者png， 我们要用把图片导入到canvas画布， 然后再调用上下文context的getImageData方法， 把图片处理成小图， 这些小图就作为拼图的基本单位；

　　如何判断游戏是否结束， 或者说如何判断用户拼成的大图是正确的？ 我们就要在刚刚生成的小图上面添加自定义属性， 后期在小图被移动后再一个个判断，如果顺序是对的， 那么这张大图就拼接成功， 允许进入下一关；

　　

　　游戏一共有四个关卡, 不会有人通关的，真的....因为第四关把图片的宽高分别切成了6份， 看着都晕好吧(∩_∩)；

　　　　

　　

　　因为要考虑到移动端的效果， 所以主界面图片是根据屏幕适配， 拼图大图的大小是屏幕宽度和屏幕高度之间最小值的一半， 都是为了不出现滚动条。 比如：用户的手机是横屏模式， 这个横屏的宽度是1000px，高度是300px， 如果我们把主图片的宽设置为屏幕1000px的一半500， 那么垂直方向就出滚动条了；

　　用户的事件只要考虑上下左右四个方向键即可， 要判断图片是否可以移动， 也要考虑到当图片移动的时候的动画效果 ，感兴趣的话考虑我的实现， 和我写的2048是一样的道理；2048的DEMO；

　　如果用户觉得这些图片不好看， 甚至可以上传自己手机的图片， 浏览器要支持FileReader的API， 移动是基于webkit的内核，可以不用考虑兼容性；

　　代码包含工具方法和一些基本的配置， 比如， 图片地址的配置， 图片要切成的块数 ， 加载图片的工具方法等：

        //游戏关卡的图片和游戏每一个关卡要切成的图片快个数
        var levels = ["lake.jpg","cat.jpg","follower.jpg","view.jpg"];
        var numbers = [3,4,5,6];


        //工具方法
        var util = {
            /**
             * @desc 图片加载成功的话就执行回调函数
             * @param 图片地址 || 图片的DataUrl数据;
             */
            loadImg : function(e, fn) {

                var img = new Image;
                if( typeof e !== "string" ) {
                    img.src = ( e.srcElement || e.target ).result;
                }else{
                    img.src = e;
                };

                img.onload = function() {//document.body.appendChild( canvas );
                    //document.getElementById("content").appendChild( canvas );
                    fn&&fn();
                };

            }
        };

　　代码是基于面向对象（oop）， 包含了两个类 ：ClipImage 类， Block 类： 

　　ClipImage类

        /**
         *  @desc 把图片通过canvas切成一块块;
         */
        function ClipImage(canvas , number) {
        };

        $.extend(ClipImage.prototype, {
            /**
            * @desc 根据关卡把图片canvas切成块canvas
            * 然后渲染到DOM;
            * */
            clip :  function () {

            },
            /**
             * @param 把canvas块混排， 打乱排序;
             * */
            //使用底线库的方法shuffle打乱排序;
            random : function( ) {
            },
            /**
             * @desc 把canvas渲染到DOM;
             * */
            renderToDom : function () {
            },

            updataDom : function(cav, obj) {

                this.updataMap();
                $(cav).animate({top:obj.y*this.avH,left:obj.x*this.avW});

            },

            updataMap : function () {
            },

            testSuccess : function () {
            }
        });

　　Block类

        /**
         * @desc 对每一个canvas进行包装;
         * @param canvas
         * @param left
         * @param top
         * @param avW
         * @param avH
         * @constructor Block
         */
        var Block = function(canvas, left, top,avW, avH) {
        };

        $.extend(Block.prototype, {
            /**
             * @desc 对每一个canvas进行定位, 然后添加到界面中;
             * */
            init : function () {

            },

            /**
             * @desc 对每一个canvas进行定位
             * */
            setPosition : function() {

            },

            /**
             * @desc 向上移动会执行的函数  ，通过判断maps下有没有对应的key值判断， 界面中的固定位置是否被占用;
             * */
            upF : function(maps,numbers,cb) {


                };

            },

            /**
             * @desc 同上
             * */
            rightF : function(maps, numbers, cb) {


            },

            /**
             * @desc 同上
             * */
            downF : function (maps,numbers,cb) {


            },

            /**
             * @desc 同上
             * */
            leftF : function(maps,numbers,cb) {


            }
        });

　　为了考虑移动端，我们使用了zepto封装的swipe系列事件， 默认并没有这个模块， 我们要通过script标签引用进来， github的地址为 https://github.com/madrobby/zepto/blob/master/src/touch.js#files：

            $(document).swipeLeft(function() {
                run(clipImage,"leftF")
            }).swipeUp(function() {
                run(clipImage,"upF")
            }).swipeRight(function() {
                run(clipImage,"rightF")
            }).swipeDown(function() {
                run(clipImage,"downF")
            });

　　虽然是一个小游戏，都是要考虑的东西真的不少，包括动画效果， 是否可以移动， 更改数据模型， 是否成功进入下一个关卡等， 包含挺多的判断；

　　全部代码， 提供思路， 代码可以作为参考：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="http://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
    <script src="http://cdn.bootcss.com/underscore.js/1.8.3/underscore.js"></script>
    <style>
        body{
            margin:0;
        }
        #content{
            position: relative;
            margin:40px auto;
        }
        canvas{
            border:1px solid #f0f0f0;
            box-shadow: 2px 2px 2px #eee;
        }
    </style>
</head>
<body>
<input type="file" name="file" id="file"/>
<div class="container">
    <div class="row">
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style=" 25%">
                <span class>当前是第<span id="now">1</span>关，共4关</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="content" class="clearfix ">

        </div>
    </div>
</div>
<script>
    (function(fn) {

        fn($);

    })(function($) {

        //这个canvas是缓存图片用的;
        var canvas = document.createElement("canvas");
        var minScreenWidth = Math.min( document.documentElement.clientWidth/ 2, document.documentElement.clientHeight/2 );
        canvas.width = minScreenWidth;
        canvas.height = minScreenWidth;
        document.getElementById("content").style.width =  minScreenWidth + "px";
        //保存了所有的block;
        var blocks = [];

        //工具方法
        var util = {
            /**
             * @desc 图片加载成功的话就执行回调函数
             * @param 图片地址 || 图片的DataUrl数据;
             */
            loadImg : function(e, fn) {

                var img = new Image;
                if( typeof e !== "string" ) {
                    img.src = ( e.srcElement || e.target ).result;
                }else{
                    img.src = e;
                };

                img.onload = function() {
                    //canvas.width = img.width;
                    //canvas.height = img.height;
                    canvas.getContext("2d").drawImage( img, 0, 0 ,canvas.width, canvas.height);
                    //document.body.appendChild( canvas );
                    //document.getElementById("content").appendChild( canvas );
                    fn&&fn();
                };

            }
        };

        //绑定事件;
        function bindEvents () {

            var file = $("#file");

            file.bind("change", function(ev) {
                var reader = new FileReader;
                reader.onload = function(e) {
                    util.loadImg(e, function() {
                        window.clipImage = new ClipImage(canvas, numbers[window.lev]);
                        window.clipImage.random();
                        Controller( window.clipImage, numbers[window.lev]);
                    });
                };
                reader.readAsDataURL(this.files[0]);
            });

        };

        //游戏关卡的图片和游戏每一个关卡要切成的图片快个数
        var levels = ["http://sqqihao.github.io/games/jigsaw/lake.jpg","http://sqqihao.github.io/games/jigsaw/cat.jpg","http://sqqihao.github.io/games/jigsaw/follower.jpg","http://sqqihao.github.io/games/jigsaw/view.jpg"];
        var numbers = [3,4,5,6];

        /**
         *  @desc 把图片通过canvas切成一块块;
         */
        function ClipImage(canvas , number) {
            //blocks是一个二维数组，保存的是所有的canvas方块;
            this.blocks = [];
            //instances是一维数组，保存的是实例化的数组;
            this.instances = [];
            this.maps = {};
            this.canvas = canvas;
            this.context = this.canvas.getContext("2d");
            this.number = number;
            this.clip();

        };

        $.extend(ClipImage.prototype, {
            /**
            * @desc 根据关卡把图片canvas切成块canvas
            * 然后渲染到DOM;
            * */
            clip :  function () {

                var avW = this.avW = this.canvas.width/this.number;
                var avH = this.avH = this.canvas.height/this.number;

                for(var i=0; i< this.number; i++ ) {
                    for(var j=0; j<this.number; j++ ) {
                        this.blocks[i] = this.blocks[i] || [];
                        var canvas = document.createElement("canvas");
                        canvas.width = avW;
                        canvas.height = avH;
                        canvas.x = j;
                        canvas.y = i;
                        canvas.map = i+"_"+j;
                        canvas.correctMap = i+"_"+j;
                        var imageData = this.context.getImageData(j*avW, i*avH, avW, avH);
                        canvas.getContext("2d").putImageData( imageData, 0, 0 );
                        if( i === j && j=== (this.number-1) )break;
                        // 把canvas放到二维数组blocks中;
                        this.blocks[i][j] =  canvas;
                    };
                };
                this.renderToDom();

            },
            /**
             * @param 把canvas块混排， 打乱排序;
             * */
            random : function( ) {
                var len = this.instances.length;
                while(len--) {
                    $(this.instances[len].canvas).remove();
                };
                //使用底线库的方法shuffle打乱排序;
                this.blocks = _.shuffle(this.blocks);
                for(var i=0 ;i <this.blocks.length; i++) {
                    this.blocks[i] = _.shuffle(this.blocks[i]);
                }
                this.renderToDom();
            },
            /**
             * @desc 把canvas渲染到DOM;
             * */
            renderToDom : function () {
                document.getElementById("content").innerHTML = "";
                this.maps = {};
                this.doms = [];
                this.instances = [];
                for(var i=0; i<this.blocks.length; i++ ) {
                    for(var j=0; j<this.blocks[i].length; j++) {
                        var instance = new Block( this.blocks[i][j], j, i ,this.avW, this.avH);
                        //把实例化的数据保存到instances
                        this.instances.push( instance );
                        this.maps[i+"_"+j] = true;
                    };
                };
            },

            updataDom : function(cav, obj) {

                this.updataMap();
                $(cav).animate({top:obj.y*this.avH,left:obj.x*this.avW});

            },

            updataMap : function () {
                this.maps = {};

                var len = this.instances.length;
                while(len--) {
                    this.maps[this.instances[len].canvas.y + "_" + this.instances[len].canvas.x] = true;
                    this.instances[len].canvas.map = this.instances[len].canvas.y + "_" + this.instances[len].canvas.x;
                };
                /*
                for(var i=0; i<this.blocks.length; i++ ) {
                    for (var j = 0; j < this.blocks[i].length; j++) {
                        this.maps[this.blocks[i][j].y + "_" + this.blocks[i][j].x] = true;
                    }
                }*/
            },

            testSuccess : function () {

                var len = this.instances.length;
                while(len--) {
                    //只要有一个不等就无法成功;
                    if(this.instances[len].canvas.correctMap !== this.instances[len].canvas.map) {
                       return ;
                    };
                };
                console.log("成功");
                if( ++window.lev >=4 ) {
                    alert("已经通关");
                    return ;
                } ;
                $("#now").html( window.lev + 1 );
                $(".progress-bar").width( (window.lev+ 1) * 25 + "%" );
                init(window.lev);
            }
        });

        /**
         * @desc 对每一个canvas进行包装;
         * @param canvas
         * @param left
         * @param top
         * @param avW
         * @param avH
         * @constructor Block
         */
        var Block = function(canvas, left, top,avW, avH) {
            this.canvas = canvas;
            this.left = left;
            this.top = top;
            this.avW = avW;
            this.avH = avH;
            this.init();
        };

        $.extend(Block.prototype, {
            /**
             * @desc 对每一个canvas进行定位, 然后添加到界面中;
             * */
            init : function () {

                this.canvas.style.position = "absolute";
                this.canvas.style.left = this.avW*this.left +"px";
                this.canvas.style.top = this.avH*this.top +"px";
                this.canvas.x = this.left;
                this.canvas.y = this.top;
                document.getElementById("content").appendChild( this.canvas );

            },

            /**
             * @desc 对每一个canvas进行定位
             * */
            setPosition : function() {

                this.canvas.style.left = this.avW*this.canvas.x +"px";
                this.canvas.style.top = this.avH*this.canvas.y +"px";

            },

            /**
             * @desc 向上移动会执行的函数  ，通过判断maps下有没有对应的key值判断， 界面中的固定位置是否被占用;
             * */
            upF : function(maps,numbers,cb) {

                //如果目标有
                var temp = (this.canvas.y>0 ? (this.canvas.y-1) : this.canvas.y);
                var targetXY =  temp+"_"+this.canvas.x;
                if( !maps[targetXY] ) {
                    this.canvas.y = temp;
                    this.canvas.map = targetXY;
                    //alert("可以走")
                    cb(this.canvas, {
                        x : this.canvas.x,
                        y : this.canvas.y
                    });
                    return true;
                };

            },

            /**
             * @desc 同上
             * */
            rightF : function(maps, numbers, cb) {

                var temp = ((this.canvas.x+1>numbers-1) ? this.canvas.x : this.canvas.x+1);
                var targetXY = this.canvas.y+"_"+temp;
                if( !maps[targetXY] ) {
                    this.canvas.x = temp;
                    this.canvas.map = targetXY;
                    //alert("可以走")
                    cb(this.canvas, {
                        x : this.canvas.x,
                        y : this.canvas.y
                    });
                    return true;
                };

            },

            /**
             * @desc 同上
             * */
            downF : function (maps,numbers,cb) {

                var temp = ((this.canvas.y+1>numbers-1) ? this.canvas.y : this.canvas.y+1);
                var targetXY = temp+"_"+this.canvas.x
                if( !maps[targetXY] ) {
                    this.canvas.y = temp;
                    this.canvas.map = targetXY;
                    cb(this.canvas, {
                        x : this.canvas.x,
                        y : this.canvas.y
                    });
                    //alert("可以走");
                    return true;
                };

            },

            /**
             * @desc 同上
             * */
            leftF : function(maps,numbers,cb) {

                var temp = ( (this.canvas.x-1)>=0 ? this.canvas.x-1 : this.canvas.x );
                var targetXY = this.canvas.y+"_"+temp;
                if( !maps[targetXY] ) {
                    this.canvas.x = temp;
                    this.canvas.map = targetXY;
                    //alert("可以走")
                    cb(this.canvas, {
                        x : this.canvas.x,
                        y : this.canvas.y
                    });
                    return true;
                };

            }
        });

        /**
         * @desc 主要控制器;
         *
         * */
        function Controller( clipImage, number) {
            var run = function( clipImage, name ) {
                //window.clipImage.doms ,window.clipImage.maps, numbers[level], window.clipImage.updataDom.bind(window.clipImage)
                for(var i=0; i<clipImage.instances.length; i++ ) {
                    var instance = clipImage.instances[i];
                    if( instance[name].bind(instance)(clipImage.maps, number, clipImage.updataDom.bind(clipImage)) ) {
                        clipImage.testSuccess();
                        return
                    };
                };
            }

            $(window).unbind("keydown");

            $(window).bind("keydown", function(ev) {
                var name;
                switch(ev.keyCode) {
                    case 37 :
                        name = "leftF";
                        break;
                    case 38 :
                        name = "upF";
                        break;
                    case 39 :
                        name = "rightF";
                        break;
                    case 40 :
                        name = "downF";
                        break;
                    default :
                        ev.preventDefault();
                        return false
                };
                run( clipImage, name );
                ev.preventDefault();
            });

            $(document).swipeLeft(function() {
                run(clipImage,"leftF")
            }).swipeUp(function() {
                run(clipImage,"upF")
            }).swipeRight(function() {
                run(clipImage,"rightF")
            }).swipeDown(function() {
                run(clipImage,"downF")
            });


        };

        function init(level) {

            util.loadImg( levels[level] ,function() {

                window.clipImage = new ClipImage(canvas, numbers[level]);
                window.clipImage.random();
                Controller( window.clipImage, numbers[level] || 3);

            });

        };

        $(function() {

            window.lev = 0;
            init(lev);
            bindEvents();

        });
    });
</script>
</body>
</html>

        如果有bug直接评论， 我会修正， 提git的issue也行,

　　DEMO地址查看：打开

作者： NONO
出处：http://www.cnblogs.com/diligenceday/
QQ：287101329