JavaScript写一个连连看的游戏

时间：2015-06-23 00:40:19 阅读：270 评论：0 收藏：0 [点我收藏+]

标签：

　　天天看到别人玩连连看，表示没有认真玩过，不就把两个一样的图片连接在一起么，我自己写一个都可以呢。

　　使用Javascript写了一个，托管到github，在线DEMO地址查看：打开

　　最终的效果图：

　　技术分享

　　写连连看之前要先考虑哪些呢？

　　　　1：如何判断两个元素可以连接呢，刚刚开始的时候我也纳闷，可以参考这里：打开；

　　　　2：模板引擎怎么选择呢，我用了底线库的template，因为语法简单。本来想用Handlebars，但是这个有点大啊，而且底线库也提供很多常用工具方法( •? ω •? )y；

　　　　3：布局如何布局呢，用table， td加上边框，边框内部一个div，div就是连连看的棋子，界面更清爽，简单，其实直接用canvas写也行，没认真研究过canvas；

　　　　4：两个元素连接时连线的效果我们要怎么实现呢，如果用dom实现那么需要用到图片，元素连接时候把图片定位到连接的路径。或者用canvas，直接用canvas把连接的效果画出来，我选择后者；

　　因为我不考虑低浏览器，使用了zeptoJS库，基于习惯，把bootstrap也引用了；

　　使用了三个主要构造函数，包括Data， View， Score；

　　View的结构如下, 东西比较少包括事件绑定， 界面生成，以及当两个相同元素消失时的 绘图效果：

View

/**
 * @desc 根据数据生成map
 * */
 renderHTML : function

/**
* @desc 界面的主要事件绑定
* @return this;
* */
 bindEvents : function


/**
* @desc 工具方法，在canvas上面进行绘图;
* @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组， 会自动重绘;
* */
showSparkLine : function

　　tbody内部元素的模板是这样的:

<script type="text/template" id="tr-td-tpl">
    <% for(var i=0; i<data.length; i++) {%>
        <tr>
            <% for(var j=0; j< data[i].length; j++ ) { %>
                <td  id="<%=i%><%=j%>" class="bg<%=data[i][j]%>"  data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info=‘{"x":<%=[j]%>,"y":<%=[i]%>}‘>
                    <div>
                        <%=getImg(data[i][j])%>
                    </div>
                </td>
            <% } %>
        </tr>
    <% } %>
</script>

　　上面代码的getImg方法会调用全局window的getImg方法，这个方法是根据数据生成图片字符串，是一个辅助的函数：

    window.getImg = function( num ) {
        switch(num){
            case 1:
                return "<img src=‘imgs/ani (1).gif‘ />";
            case 2:
                return "<img src=‘imgs/ani (2).gif‘ />";
            case 3:
                return "<img src=‘imgs/ani (3).gif‘ />";
            case 4:
                return "<img src=‘imgs/ani (4).gif‘ />";
            case 5:
                return "<img src=‘imgs/ani (5).gif‘ />";
            case 6:
                return "<img src=‘imgs/ani (6).gif‘ />";
        }
    };

　　因为连连看的数据是个二维的数组，所以模板中必须使用两个for循环，循环产生HTML字符串，如果把数据和模板合在一起，会生成下图的DOM结构：

技术分享

　　分数模块构造函数Score，所有有关得分的代码就这些了 (把元素传进去，直接调用生成实例的addScore方法，会自动渲染DOM)，为分数单独写一个构造函数是因为为了解耦：

         Score = function(el) {
             this.el = $(el);
             this.score = 0;
         };

    $.extend( Score.prototype , {
        /**
         * @desc 改变元素的HTML，递增分数;
         * @param
         * */
        addScore : function() {
            this.el.html(++this.score);
        }
    });

　　构造函数Data，主要的结构如下，虽然方法比较少，实际上Data这块代码占了300行.... 要判断元素是否可以连接用canConnect方法，canConnect方法又会调用dirConnect方法，计算比较繁琐，想了解的话最好自己写写：

//新建初始化
newData : function

//工具方法，随机混肴数组;
suffer : function

 /**
* @desc set值，把地图中对应的数据清空或者设置，两用接口
 * @param x, y
* @return chain
* */
set : function

/**
 * @desc 判断两个元素之间是否可以连接
* @param [{x:1,y:1},{x:1,y:1}]
* @return false || []
* */
canConnect : function

/**
* @desc 判断元素是否可以直连
* @param  [{x:1,y:1},{x:1,y:1}]
* @return false || true
* */
dirConnect

　　所有所有代码如下，作为参考：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <title>link</title>
    <script src="js/zepto.js"></script>
    <script src="js/underscore1.8.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            border:1px solid #f5f5f5;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        td.active{
            opacity: 0.7;
        }
        td div{
            width:40px;
            height:40px;
        }
        .bg1{
            /*background: #2ECC71;*/
        }
        .bg2{
            /*background: #E67E22;*/
        }
        .bg3{
            /*background: #34495E;*/
        }
        .bg4{
            /*background: #1ABC9C;*/
        }
        .relative{
            position: relative;
        }
        .absolute{
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>

<div class="container ">
    <div class="row" style="width:80%;margin:0 auto;">
        <h3>得分<span class="label label-default" id="score">0</span></h3>
    </div>
</div>

<div class="container">
    <div class="row relative">
        <table  class="absolute">
            <thead></thead>
            <tbody id="tbody">
            </tbody>
        </table>
        <canvas id="canvas">
            <p>Your browserdoes not support the canvas element.</p>
        </canvas>
    </div>
</div>
<script type="text/template" id="tr-td-tpl">
    <% for(var i=0; i<data.length; i++) {%>
        <tr>
            <% for(var j=0; j< data[i].length; j++ ) { %>
                <td  id="<%=i%><%=j%>" class="bg<%=data[i][j]%>"  data-x="<%=j%>" data-y="<%=i%>" data-data="<%=data[i][j]%>" data-info=‘{"x":<%=[j]%>,"y":<%=[i]%>}‘>
                    <div>
                        <%=getImg(data[i][j])%>
                    </div>
                </td>
            <% } %>
        </tr>
    <% } %>
</script>
<script>
    var el = document.getElementById("tbody");
    var elCan = document.getElementById("canvas");
    var tpl = document.getElementById("tr-td-tpl");

    var cfg = {
        width : 8,
        height : 8
    };
    window.getImg = function( num ) {
        switch(num){
            case 1:
                return "<img src=‘imgs/ani (1).gif‘ />";
            case 2:
                return "<img src=‘imgs/ani (2).gif‘ />";
            case 3:
                return "<img src=‘imgs/ani (3).gif‘ />";
            case 4:
                return "<img src=‘imgs/ani (4).gif‘ />";
            case 5:
                return "<img src=‘imgs/ani (5).gif‘ />";
            case 6:
                return "<img src=‘imgs/ani (6).gif‘ />";
        }
    };

    var View = function(data, score) {
            this.data = data;
            this.score = score;
         },
         Data = function(cfg) {
            this.cfg = {
                width : cfg.width+2,
                height : cfg.height+2
            };
             this.getRandom = this.getRandom();
         },
         Score = function(el) {
             this.el = $(el);
             this.score = 0;
         };

    $.extend( Data.prototype, {
        /**
         * @desc 把两个
         * @param HTMLELEMENT
         * @return true || false
         * */
        clear : function(obj, target) {
        },
        /**
         * @desc 根据this.cfg新建数据到this.map
         * @param void
         * @return void
         * */
        newData : function() {
            var result = [];
            for(var i=0; i<=this.cfg.height+1; i++ ) {
                result[i] = result[i] || [];
                for(var j = 0; j<= this.cfg.width+1; j++) {

                    if(i === 0 || j===0 || (i===this.cfg.height+1) || j === (this.cfg.width+1) ) {
                        result[i][j] = 0;
                    }else{
                        //1-4
                        result[i][j] = this.getRandom();
                    }
                };
            };
            this.map = result;
            return this;
        },
        //随机混肴数组;
        suffer : function(obj) {
            function random(min, max) {
                if (max == null) {
                    max = min;
                    min = 0;
                }
                return min + Math.floor(Math.random() * (max - min + 1));
            };
            var set = obj;
            var length = set.length;
            var shuffled = Array(length);
            for (var index = 0, rand; index < length; index++) {
                rand = random(0, index);
                if (rand !== index) shuffled[index] = shuffled[rand];
                shuffled[rand] = set[index];
            }
            return shuffled;
        },
        /**
         * @return 返回值必须是成双的， 消除到最后尼玛，发现有一堆不匹配的，玩个球;
         * */
        getRandom : function() {
            //如果消消乐是3*3， 那么你告诉我....最后一个和谁消, 所以要做的就是把所有的元素生成变成一半，然后返回;
            var arr = new Array( (this.cfg.height) * (this.cfg.width) / 2 );
            var result = [];
            for(var i=0; i<arr.length; i++ ) {
                arr[i] = (Math.floor( Math.random()*6 ) + 1);
            };
            result = Array.prototype.concat.call( [] , arr, arr);
            result = this.suffer( result );
            return function(  ) {
                return result.pop();
            };
        },
        /**
         * @desc set值
         * @param x, y
         * @return chain
         * */
        set : function( x, y) {
            this.map[y][x] = 0;
            return this;
        },
        /**
         * @desc 判断元素是否可以连接
         * @param [{x:1,y:1},{x:1,y:1}]
         * @return false || true
         * */
        canConnect : function(obj,target) {
            var map = this.map;
            //循环obj的y轴相等 ， obj.x旁边所有数据为0的元素;;
            var getX = function( obj ) {
                var result = [];
                //循环找出在X附近为0的元素;
                for(var i=obj.x+1; i< map[0].length; i++) {
                    if( map[obj.y][i] == 0 ) {
                        result.push( {x:i, y:obj.y} );
                    }else{
                        break;
                    };
                };
                for(var i=obj.x-1; i>=0; i--) {
                    if( map[obj.y][i] == 0 ) {
                        result.push( {x:i,y:obj.y} );
                    }else{
                        break;
                    };
                };
                return result;
            };
            //循环obj的x轴相等， obj.y旁边所有数据为0的元素;
            var getY = function(obj) {
                var result = [];
                for(var i=obj.y+1; i<map.length; i++) {
                    if( map[i][obj.x] == 0) {
                        result.push( { x : obj.x ,y : i} );
                    }else{
                        break;
                    };
                };
                for(var i=obj.y-1; i>=0; i--) {
                    if( map[i][obj.x] == 0 ) {
                        result.push( { x : obj.x ,y : i} );
                    }else{
                        break;
                    };
                };
                return result;
            };
            var arr0 = Array.prototype.concat.call( [], getX(obj), obj, getY(obj)).filter(function(obj) {
                return !!obj;
            });
            var arr1 = Array.prototype.concat.call( [], getX(target), target, getY(target) ).filter(function(obj) {
                return !!obj;
            });
            for(i = 0; i<arr0.length; i++) {
                for(var j = 0; j<arr1.length; j++) {
                    //只要有一个连接就返回true;
                    if( this.dirConnect(arr0[i],arr1[j]) ) {
                        return [obj, arr0[i], arr1[j], target];
                    };
                };
            };
            return false;
        },
        /**
         * @desc 判断元素是否可以直接连接
         * @param  [{x:1,y:1},{x:1,y:1}]
         * @return false || true
         * */
        dirConnect : function(obj, target) {
            var map = this.map;
            //row是x轴 列
            //col是y轴 行
            var min = 0, max = 0, sum = 0;
            if(obj.y === target.y) {
               if(obj.x < target.x) {
                   min = obj.x;
                   max = target.x;
               }else{
                   min = target.x;
                   max = obj.x;
               };
               for(var i=min; i<=max; i++) {
                   sum += map[obj.y][i];
               };
               if(sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
                   return true;
               }else{
                   return false;
               };
            };
            if(obj.x === target.x) {
                if(obj.y < target.y) {
                    min = obj.y;
                    max = target.y;
                }else{
                    min = target.x;
                    max = obj.y;
                };
                for( i=min; i<=max; i++) {
                    sum += map[i][obj.x];
                };
                if( sum === (map[obj.y][obj.x] + map[target.y][target.x])) {
                    return true;
                }else{
                    return false;
                };
            };
        }
    });
    $.extend( View.prototype, {
        /**
         * @desc 为view添加视图的主元素
         * @return void
         * */
        setEL : function(el) {
            this.el = el;
            return this;
        },
        setTpl : function(tpl) {
            this.tpl = _.template( tpl.innerHTML );
            return this;
        },
        /**
         * @desc 根据数据生成map
         * */
        renderHTML : function() {
            $(this.el).html( this.tpl( {data : this.data.map} ) );
            return this;
        },
        /**
         * @desc 界面的主要事件绑定
         * @return this;
         * */
        bindEvents : function() {
            $(this.el).delegate("td", "click", this.click.bind(this));
            return this;
        },
        /**
         * @desc click事件， 单独抽出来的;
         * */
        click : function(ev) {
            //修改样式;
            $("td.active").removeClass("active");
            var target = $(ev.target).closest("td");
            target.addClass("active");

            //第一次点击我们做的特殊处理;
            var prev = this.prev;
            if( !prev || target[0] === prev[0]){
                this.prev = target;
                return;
            };
            
            if( prev.attr("data-data") === target.attr("data-data")) {
                var xy = JSON.parse( prev.attr("data-info") );
                var xxyy = JSON.parse( target.attr("data-info") );
                //保存了连接的数组信息
                var connectionInfo = [] || false;
                if( connectionInfo = this.data.canConnect( xy, xxyy) ) {
                    this.showSparkLine( connectionInfo );
                    this.prev = undefined;
                    this.data.set(xy.x, xy.y);
                    this.data.set(xxyy.x, xxyy.y);
                    this.score.addScore();
                    var _this = this;
                    setTimeout(function() {
                        _this.renderHTML();
                    },2000);
                };
                prev.attr("data-data", "");
                target.attr("data-data","")
            }else{
                this.prev = target;
            };
        },
        /**
         * @desc 工具方法，在canvas上面进行绘图;
         * @param [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3}]一个数组， 会自动重绘;
        * */
        showSparkLine : function( arr ) {
            arr = arr.map(function(xy) {
               return {
                   x : (xy.x)*40 + 20,
                   y : (xy.y)*40 + 20
               }
            });
            var elCan = document.getElementById("canvas");
            function spark(ctx) {
                function showAndClear(arr, lineWidth) {
                    ctx.clearRect(0,0,elCan.width,elCan.height);
                    ctx.beginPath();
                    ctx.lineJoin = "round";
                    ctx.lineWidth = lineWidth;
                    ctx.shadowColor = "rgba(241, 196, 15, 0.41)";
                    ctx.shadowOffsetX = 1;
                    ctx.shadowOffsetY = 1;
                    ctx.shadowBlur = 1;
                    for(var i=0; i<arr.length-1; i++) {
                        var xy = arr[i];
                        var nextXY = arr[i+1]
                        ctx.moveTo(xy.x, xy.y);
                        ctx.lineTo(nextXY.x, nextXY.y);
                    };
                    ctx.stroke();
                };
                var ctx = elCan.getContext("2d");
                ctx.strokeStyle = "#F1C40F";
                var lineWidthArr = [1,2,1,2,1,3,1,0];
                var len = lineWidthArr.length;
                var times = 400, addTimes = 200;
                while(len--) {
                    (function(len){
                        setTimeout(function() {
                            showAndClear(arr, lineWidthArr[len]);
                            if(len==0) {
                                ctx.clearRect(0,0,elCan.width,elCan.height);
                            }
                        }, times);
                        times += addTimes;
                    })(len)
                };
            };
            spark( elCan );
        }
    });
    $.extend( Score.prototype , {
        /**
         * @desc 改变元素的HTML，递增分数;
         * @param
         * */
        addScore : function() {
            this.el.html(++this.score);
        }
    });

    $(function() {
        var score = new Score( document.getElementById("score") );
        var data = new Data(cfg).newData();
        var view = new View(data, score);
        view.setEL( el ).setTpl( tpl).renderHTML().bindEvents();
        (function init() {
            //如果通过style属性添加width或者height，会根据原来的宽和高度自动伸缩的
            elCan.width = el.offsetWidth;
            elCan.height = el.offsetHeight;
        })();
    });

</script>
</body>
</html>

View Code

　　在线DEMO地址查看：打开

　　找到了一个别人写的连连看，代码极少，作为参考吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> 连连看 </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style type="text/css">
        #board{width:508px; height:500px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #999999;}
        #board span{display: block; position: absolute; width: 30px; height: 30px; }
    </style>
</head>
<body>
<div id="board" >
</div>
</body>

<!--              js               -->
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script   type="text/javascript" >

    $(function(){
        var cont=$("#board");
        var colors=["#ff0000","#00ff00","#0000ff","#ffcc33","#000000","#00ffcc","#ffffff"];
        var pos=[];
        var click=0;
        var firstSpan;
        var fx;
        var fy;
        var arr=[];

        arr=[0,0,0,0,0,0,0,0];
        pos.push(arr);

        for(var i=0;i<8;i++){
            new creSpan(i,cont,0,i*40,colors[6],0);
        }

        for(var i=1;i<=6;i++){
            m=new creSpan(i,cont,i*40,0,"#ffffff");
            arr=[0];

            for(var j=0;j<6;j++){
                var color=Math.floor(Math.random()*6);
                new creSpan(i,cont,i*40,(j+1)*40,colors[color],(color+1));
                arr.push(1);
            }
            m=new creSpan(i,cont,i*40,(j+1)*40,"#ffffff",0);
            arr.push(0);
            pos.push(arr);

        }
        for(var i=0;i<8;i++){
            m=new creSpan(i,cont,7*40,i*40,"#ffffff",0);
        }
        arr=[0,0,0,0,0,0,0,0];
        pos.push(arr);

        function clear(c1,c2,x,y){
            if(c1!=null)c1.style.background="#ffffff";
            if(c2!=null){
                c2.style.background="#ffffff";
                pos[x-1][y-1]=0;
                pos[fx-1][fy-1]=0;
            }
            fx=0;
            fy=0;
            click=0;
        }

        $.each($("#board span"),function(index,mSpan){
            $(this).click(function(){
                var x=Math.floor(index/8);
                var y=Math.floor(index%8);
                if(click==0){
                    click=1;
                    firstSpan=mSpan;
                    fx=x;
                    fy=y;
                    return;
                }

                if(firstSpan.id!=mSpan.id||(x==fx&&fy==y)){
                    clear(null,null,0,0);
                    return;
                }
                var col=6;
                var row=6;

                for(var i=0;i<row+2;i++){
                    var step=i-x>0?1:-1;
                    var count=0;
                    for(var j=x;j!=i;j+=step){
                        count+=pos[j][y];
                    }
                    step=y>fy?-1:1;
                    for(j=y;j!=fy;j+=step){
                        count+=pos[i][j];
                    }
                    step=i>fx?-1:1;
                    for(j=i;j!=fx;j+=step){
                        count+=pos[j][fy];
                    }
                    if(count==1){
                        clear(firstSpan,mSpan,x,y);
                        return;
                    }
                }
                for(i=0;i<col+2;i++){
                    step=i-y>0?1:-1;
                    count=0;
                    for(j=y;j!=i;j+=step){
                        count+=pos[x][j];
                    }
                    step=x>fx?-1:1;
                    for(j=x;j!=fx;j+=step){
                        count+=pos[i][j];
                    }
                    step=i<fy?1:-1;
                    for(j=i;j!=fy;j+=step){
                        count+=pos[fx][j];
                    }
                    if(count==1){
                        clear(firstSpan,mSpan,x,y);
                        return;
                    }
                }
                clear(null,null,0,0);

            });
        });
    });

    function creSpan(n,cont,mtop,mleft,mcolor,idstr){
        var  mSpan=document.createElement("span");
        cont[0].appendChild(mSpan);
        mSpan.id=idstr;
        with(mSpan.style){
            top=mtop+"px";
            left=mleft+"px";
            background=mcolor;
        }
    };

</script>
</html>

View Code

　　这个可是好东西啊，有想要的么

　　话说poppin越跳越怪了，shit，怎莫办啊，打开

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

JavaScript写一个连连看的游戏

标签：

原文地址：http://www.cnblogs.com/diligenceday/p/4591985.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行