javascrpit开发连连看记录-小游戏

    工作之余，总想做点什么有意思的东西。但是苦于不知道做什么，也就一直没有什么动作。在一个午饭后，跟@jedmeng和@墨尘聊天过程中，发现可以写一些小东西来练练手，有以下几点好处：

    1. 加强巩固前端相关知识

    2. 可以用一些平时项目中想用但没用的新东西

    3. 一块儿做相同的东西，可以分享各自不同的想法

 

    先来一张效果图，也可以来这里玩玩~

        

 

    接下来就介绍一下做这个小游戏，自己的一些步骤和思路：

 

    首先就是熟悉连连看的规则，为此还专门下载了一个app感受了一下，规则简单的说就是：找到两个相同的图标，但是之前的连线不能大于条线；

    其次就要准备棋盘的UI设计和结构的成型，这块儿我直接使用了@墨尘的设计；

    再次就看是思考js里需要哪些功能：

• 初始化棋盘
• 绑定连线事件
• 处理连线的核心逻辑：判断是否可以连线
• 成功、失败提示等其他功能

    最后完善细节基本上就搞定了。

 

    下面详细介绍一下实现连连看核心功能的一些想法：

    第一：初始化棋盘

        初始化棋盘的时候，需要一些原始数据，页面才能知道哪里需要展现什么。我这里一共有45个不同的图标，那么所有的数据都是从这45个数据中获取，这个地方遇到的问题是：怎么能保证每个图标出现是偶数个？我的做法是随机去除总个数一般的数据，然后每个数据存入两次，这样就能保证每个图标都是偶数个。

 /**
   * 获取源数据
   * @param {Number} total 获取个数，默认整个棋盘需要的棋子数
   * @returns {Array} 源数据
   */
  getRandomData: function(total) {
   total = total || this.cols * this.rows;
   var halfTotal = total/2;
   var pieces = [];
   for(var i = 0; i < halfTotal; i++) {
    //保证每个元素都是成双的
    var num = Math.floor(Math.random() * 45);
    pieces.push(num);
    pieces.push(num);
   }
   return pieces;
  }

　　

        在展示数据的时候，需要时随机布局，这个时候我想到了数组的sort方法，可以创建规则进行排序，如果我的排序规则是随机的呢？是不是这样展示的时候就是随机的呢。当然可能还有更加好的随机做法，也希望可以分享给我。

  /**
   * 随机排序算法
   * @returns {number} -1或1
   */
  randomSort: function() {
   return Math.random() > 0.5 ? -1 : 1;
  }

　　

        这样基本上就可以初始化一个随机排序的棋盘了。

 

    第二：绑定连线事件

        这个相对比较简单，需要注意的是，只有在点击两个点的时候才能进行判断是否可以连接，并且保证同时处于选中状态的不能超过两个。

 

    第三：连线的核心逻辑

            经过分析，所有的连线情况无非就是三种情况：连线没有拐点、连线只有一个拐点、连线有两个拐点

            连线没有拐点：

            这个很简单，这种情况就是两个点(x,y)和(m,n)，两点必须同行或者同列，再通过一个循环就能知道两个能不能连起来了，伪代码大概是这样：

//假设方法名是 dealOneLine(x,y,m,n)
            if(x == m || y == n) {
                // y == n 是从x轴方向开始遍历
                if(x ==m) {
                    for(i = mixY; i<=maxY;i++) {
                        //判断是否能连通
                    }
                }
            }

　　

            一个拐点：

            这种情况，必须得保证两点不是同行或者同列，这个时候只要检测要使得两点连通并且只能有一个拐点的话，这个拐点只有两个(x,n)和(m, y)，所以就变成了带上这两个虚拟的点，能不能成功连通，伪代码是这样的：

//假设方法名是  oneFoldPoint(x,y,m,n)
            if(this.dealOneLine(x, y, x, n) && this.dealOneLine(x, n, m, n)) {
// console.log('纵向一个折点');
   }else if(this.dealOneLine( m, y, m, n) && this.dealOneLine( x, y, m, y)) {
// console.log('横向一个折点');
    return this.isSamePic();
   }

　　

            两个拐点：

            这种情况，可以理解为出发地能不能到达目的地，将一个点作为不动点，另外一点寻找正确的路径找到不动点。所以这个动点就得通过遍历上线左右四个方向找到适合自己路径。每移动一次，就得使用oneFoldPoint判断是否可以通过一个拐点连通，如果可以直接返回，如果不能连通就再移动。

            基本上这些就是连连看比较核心的算法了。在一块儿我们的讨论的过程中，@宁宁提到了两外一个思路，就是分别遍历(x,y)和(m,n)四个方向，找到可以连通的路径。这个我没有去实现，但是感觉可以行的通。（做这个小游戏的一好处已经体现出来了，感觉非常好）

 

       最后就是一些辅助功能，如：连接成功或是失败怎么表现、过关成功和失败处理、倒计时处理等等，这些都比较常规，也比较简单，这里就不再赘述了~

 

        交流过程中，@尊杰也提到了一些安全方面的问题，如：通过提供的接口，机器进行过关；我这里没有进行处理，倒是需要考虑的地方。@jedmeng提到，可以将逻辑、数据和UI进行分离，各自完成各自的逻辑，相互直接不能有太多影响，这个想法会在以后的开发中多多考虑这方面的问题。还存在一个问题就是：我可以记录路径，但是不能顺序记录路径，导致不能进行画线，我初步分析了一下，应该是我的算法没有办法准确的记录路径~这个@墨尘实现了，他跟我的算法不太一样，想了解的可以看这里。

 

        这里是实现连连看的源码：

 /**
 * LinkGame 360产品连连看
 * @author 黑MAO
 * @time 2014-7-24
 * @desription 描述
 */
(function() {
 'use strict';

 var isError = false;
 var clickTimes = 0;
 var timer = null;
 var pointOne = {
  x: 0,
  y: 0
 };
 var pointTwo = {
  x: 0,
  y: 0
 };
 var levelSum = 1;

 /**
  * LinkGame构造函数
  * @param {Number} rows 行数
  * @param {Number} cols 列数
  */
 function LinkGame(rows, cols) {
  if((rows && rows%2 != 0) && (rows && rows%2 != 0)) {
   isError = true;
  }
  this.rows = rows || 6;
  this.cols = cols || 7;
 }

 $.extend(LinkGame.prototype, {
  /**
   * 初始化函数
   * @param {Boolean} restart 是否是重新初始化
   * @param {Number} total 总倒计时时间，默认值200s
   * @param {Number} level 等级，默认是levelSum
   */
  init: function(restart, total, level) {
   total = total || 200;
   this.total = total;
   levelSum = level || levelSum;
   if(isError) return;
   this.restart = restart || false;
   this.initGameBoard();
   this.initEvent();
   //初始化时间条
   this.startTime(total, 300);
   this.setLevel(levelSum);
  },

  //初始化棋盘
  initGameBoard: function() {
   var $gameBoard = $('.game-board');
   this.restart && $gameBoard.html('');
   for(var y = 1; y <= this.rows; y++) {
    for(var x = 1; x <= this.cols; x++) {
     this.renderHtml(x, y);
    }
   }
   this.fillBoardData();
  },

  //重新初始化棋盘
  rebuildGameBoard: function() {
   var $items = $('.game-board').find('.item');
   this.fillBoardData($items.length);
  },

  //初始化事件
  initEvent: function() {
   var self = this;
   var $gameBoard = $('.game-board');

   $gameBoard.find('.item').on('click', function(e) {
    e.preventDefault();
    var pos = $(this).data('pos').split('_');
    clickTimes++;
    if(clickTimes > 2) return;
    if(pointOne.x > 0 || pointOne.y > 0) {
     pointTwo.x = pos[0];
     pointTwo.y = pos[1];
     $(this).addClass('current-one');
    }else {
     pointOne.x = pos[0];
     pointOne.y = pos[1];
     $(this).addClass('current-two');
    }
    self.dealGame(this);
   });
  },

  /**
   * 渲染棋子
   * @param {Number} x 横坐标
   * @param {Number} y 纵坐标
   */
  renderHtml: function(x, y) {
   var $gameBoard = $('.game-board');
   var left= 15+(x-1)*79;
   var top = 15+(y-1)*79;
   var pos = x + '_' + y;
   var $item = $('<div data-pos="' + pos + '" class="item pos' + pos + '" data-status="1"><div class="u"></div></div>');
   $gameBoard.append($item);
   $item.css({
    top: top,
    left: left
   });
  },

  /**
   * 填充数据
   * @param {Number} total 棋子总个数
   */
  fillBoardData: function(total) {
   var sourceArr = this.getRandomData(total).sort(this.randomSort);
   var $gameBoard = $('.game-board');
   $.each(sourceArr, function(i, value) {
    var className = 'p'+value;
    var pos = $gameBoard.find('.item').eq(i).data('pos')
    $gameBoard.find('.item').eq(i).data('pic', className).removeClass()
     .addClass(className)
     .addClass('item')
     .addClass('pos' + pos);
   });
  },

  /**
   * 获取源数据
   * @param {Number} total 获取个数，默认整个棋盘需要的棋子数
   * @returns {Array} 源数据
   */
  getRandomData: function(total) {
   total = total || this.cols * this.rows;
   var halfTotal = total/2;
   var pieces = [];
   for(var i = 0; i < halfTotal; i++) {
    //保证每个元素都是成双的
    var num = Math.floor(Math.random() * 45);
    pieces.push(num);
    pieces.push(num);
   }
   return pieces;
  },

  /**
   * 随机排序算法
   * @returns {number} -1或1
   */
  randomSort: function() {
   return Math.random() > 0.5 ? -1 : 1;
  },

  /**
   * 开始计时
   * @param {Number} total 总时间，单位秒
   * @param {Number} interval 间隔时间
   */
  startTime: function(total, interval) {
   interval = interval || 1000;
   var self = this;
   var $bar = $('.time-line').find('.bar');
   var remain = total;
   this.reset();
   clearInterval(timer);
   $('.remain-time').html(total);
   $bar.css('background-color', '#40b60f');
   timer = setInterval(function() {
    if(remain < 0.1) {
     clearInterval(timer);
     self.fail();
     return;
    }
    remain = remain-interval/1000;
    $bar.css('width', remain*100/total + '%');
    if(remain*100/total > 25 && remain*100/total < 50) {
     $bar.css('background-color', 'orange');
    }else if(remain*100/total <= 25){
     $bar.css('background-color', 'red');
    }
    $('.remain-time').html(Math.round(remain));
   },interval)
  },

  /**
   * 处理游戏逻辑
   * @param {Object} el 需要处理的元素
   */
  dealGame: function(el) {
   var x = pointOne.x * 1;
   var y = pointOne.y * 1;
   var m = pointTwo.x * 1;
   var n = pointTwo.y * 1;
   var self = this;
   if(clickTimes > 2) return;
   this.dealSelectStatus(el);

   //点击同一个点
   if(x == m && y == n) {
    self.showError();
    return;
   }

   if(pointTwo.x > 0 || pointTwo.y > 0) {
    if(self.isOk(x, y, m, n)) {
     self.showRight();
    }else {
     self.showError();
    }
   }
  },

  /**
   * 连线没有折点的处理
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @returns {Boolean} 是否可以连通
   */
  noFoldPoint: function(x, y, m, n) {

   if(this.isOneLine(x, y, m, n)) {
    if(this.dealOneLine(x, y, m, n)) {
// console.log('同行或同列');
     return this.isSamePic();
    }
   }

   return false;
  },

  /**
   * 处理在一条线上的情况
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @returns {boolean} 是否可以连通
   */
  dealOneLine: function(x, y, m, n) {
   var $gameBoard = $('.game-board');
   var currentOnePos = $gameBoard.find('.current-one').data('pos');
   var currentTwoPos = $gameBoard.find('.current-two').data('pos');
   var minX = Math.min(x, m);
   var maxX = Math.max(x, m);
   var minY = Math.min(y, n);
   var maxY = Math.max(y, n);
   var isSuccess = true;
   if(x == m) {
    for(var b = minY; b <= maxY; b++) {
     var pos = x + '_' + b;
     var $item = $gameBoard.find('.pos'+ pos);
     var status = $item.data('status');
     if(status == 1 && pos != currentOnePos && pos != currentTwoPos) {
      isSuccess = false;
      break;
     }
    }
   }else if(y == n) {
    for(var a = minX; a <= maxX; a++) {
     var pos = a + '_' + y;
     var $item = $gameBoard.find('.pos'+ pos);
     var status = $item.data('status');
     if(status == 1 && pos != currentOnePos && pos != currentTwoPos) {
      isSuccess = false;
      break;
     }
    }
   }

   return isSuccess;
  },

  /**
   * 处理一个折点的情况
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @returns {Boolean} 是否可以连通
   */
  oneFoldPoint: function(x, y, m, n) {
   //两种情况
   if(this.dealOneLine(x, y, x, n) && this.dealOneLine(x, n, m, n)) {
// console.log('纵向一个折点');
    return this.isSamePic();
   }else if(this.dealOneLine( m, y, m, n) && this.dealOneLine( x, y, m, y)) {
// console.log('横向一个折点');
    return this.isSamePic();
   }
   return false;
  },

  /**
   * 处理两个折点的情况
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @returns {boolean} 是否可以连通
   */
  twoFoldPoint: function(x, y, m, n) {
   if(this.deepSearch(x, y, m, n, 'right')
    || this.deepSearch(x, y, m, n, 'down')
    || this.deepSearch(x, y, m, n, 'left')
    || this.deepSearch(x, y, m, n, 'up')) {
// console.log('两个折点');
    return true;
   }
   return false;
  },

  /**
   * 深度搜索
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @param {String} direction 搜索方向
   * @returns {Boolean} 是否可以连通
   */
  deepSearch: function(x, y, m, n, direction) {
   switch (direction) {
    case 'up':
     for(var i = y - 1; i >= 0; i--) {
      if(!this.isHasPic(x, i)) {
       var result = this.oneFoldPoint(x, i, m, n);
       if(!result) continue;
       return result;
      }else {
       return false;
      }
     }
    case 'down':
     for(var i = y + 1; i <= this.rows + 1; i++) {
      if(!this.isHasPic(x, i)) {
       var result = this.oneFoldPoint(x, i, m, n);
       if(!result) continue;
       return result;
      }else {
       return false;
      }
     }
    case 'left':
     for(var i = x - 1; i >= 0; i--) {
      if(!this.isHasPic(i, y)) {
       var result = this.oneFoldPoint(i, y, m, n);
       if(!result) continue;
       return result;
      }else {
       return false;
      }
     }
    case 'right':
     for(var i = x + 1; i <= this.cols + 1; i++) {
      if(!this.isHasPic(i, y)) {
       var result = this.oneFoldPoint(i, y, m, n);
       if(!result) continue;
       return result;
      }else {
       return false;
      }
     }
   }
  },

  /**
   * 检测是否存在棋子
   * @param {Number} x 横坐标
   * @param {Number} y 纵坐标
   * @returns {boolean} 是否存在
   */
  isHasPic: function(x, y) {
   var status = $('.game-board').find('.pos' + x + '_' + y).data('status');
   return status == 1 ? true : false;
  },

  /**
   * 检测两点是否同行或同列
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @returns {boolean} 是否同行或同列
   */
  isOneLine: function(x, y, m, n) {
   if(x == m || y == n){
    return true;
   }
   return false;
  },

  /**
   * 检测选中两点是否相同棋子
   * @returns {boolean}
   */
  isSamePic: function() {
   var $gameBoard = $('.game-board');
   var $currentOne = $gameBoard.find('.current-one');
   var $currentTwo = $gameBoard.find('.current-two');

   if($currentOne.data('pic') == $currentTwo.data('pic')) {
    return true;
   }else {
    return false;
   }
  },

  /**
   * 检测两点是否可以连通
   * @param {Number} x 第一个点的横坐标
   * @param {Number} y 第一个点的纵坐标
   * @param {Number} m 第二个点的横坐标
   * @param {Number} n 第二个点的纵坐标
   * @returns {boolean}
   */
  isOk: function(x, y, m, n) {
   if(this.noFoldPoint(x, y, m, n) || this.oneFoldPoint(x, y, m, n) || this.twoFoldPoint(x, y, m, n)) {
    return true;
   }
   return false;
  },

  /**
   * 处理选中状态
   * @param {Object} el 选中元素
   */
  dealSelectStatus: function(el) {
   $(el).addClass('selected');
  },

  //提示功能
  hints: function() {
   var self = this;
   var switchFlag = false;
   var $items = $('.game-board').find('.item');
   $items.each(function(i, sourceItem) {
    var $sourceItem = $(sourceItem);
    var $remainItems = $sourceItem.siblings('.item');
    var sourcePos = $sourceItem.data('pos').split('_');
    $remainItems.each(function(i, item) {
     var $targetItem = $(item);
     var targetPos = $targetItem.data('pos').split('_');
     $sourceItem.addClass('current-one');
     $targetItem.addClass('current-two');
     if(self.isSamePic()) {
      pointOne = {
       x: sourcePos[0],
       y: sourcePos[1]
      };
      pointTwo = {
       x: targetPos[0],
       y: targetPos[1]
      };
      if(self.isOk(pointOne.x, pointOne.y, pointTwo.x, pointTwo.y)) {
       $targetItem.addClass('tip');
       $sourceItem.addClass('tip');
       self.reset();
       switchFlag = true;
       $sourceItem.removeClass('current-one');
       $targetItem.removeClass('current-two');
       return false;
      }
     }
     $sourceItem.removeClass('current-one');
     $targetItem.removeClass('current-two');
    });

    if(switchFlag) return false;
   });
   //没有可以提示的情况下，重新排序
   if(!switchFlag) {
    self.rebuildGameBoard();
    self.hints();
   }
  },

  //可正确连线
  showRight: function() {
   var self = this;
   var $gameBoard = $('.game-board');
   var $currentOne = $gameBoard.find('.current-one');
   var $currentTwo = $gameBoard.find('.current-two');
   var posOne = $currentOne.data('pos');
   var posTwo = $currentTwo.data('pos');
   $currentOne.addClass('remove').data('status', 0);
   $currentTwo.addClass('remove').data('status', 0);
   setTimeout(function() {
    $currentOne.removeClass().addClass('item-remove').addClass('pos'+posOne);
    $currentTwo.removeClass().addClass('item-remove').addClass('pos'+posTwo);
    self.reset();
    self.checkSuccess();
   }, 300);
  },

  //不可正确连线
  showError: function() {
   var self = this;
   var $gameBoard = $('.game-board');
   var $currentOne = $gameBoard.find('.current-one');
   var $currentTwo = $gameBoard.find('.current-two');
   $currentOne.addClass('error');
   $currentTwo.addClass('error');
   setTimeout(function() {
    $currentOne.removeClass('error').removeClass('current-one').removeClass('selected').remove('tip');
    $currentTwo.removeClass('error').removeClass('current-two').removeClass('selected').remove('tip');
    self.reset();
   }, 300);
  },

  //检测是否过关
  checkSuccess: function() {
   var $item = $('.game-board').find('div').filter('.item');
   if(!$item[0]) {
    clearInterval(timer);
    this.win();
   }
  },

  //过关成功通知
  win: function() {
            var self = this;
   var total = this.total;
            var newTotal = 0;
            clearInterval(timer);
   if(total > 100) {
                this.showMsg('成功提示', '看来你很厉害，要不要再来一局！点击确定减少10秒钟');
                newTotal = total - 10;
   }else if(total > 50) {
                this.showMsg('成功提示', '果然不同反响！点击确定减少5秒钟');
                newTotal = total - 5;
   }else if(total > 10){
                this.showMsg('成功提示', '你要超神啊！点击确定减少1秒钟');
                newTotal = total - 1;
   }

            $('.sure-btn').off('click').on('click', function(e) {
                e.preventDefault();
                self.init(true, newTotal);
             levelSum++;
                self.hideMsg();
            });

            $('.unsure-btn').off('click').on('click', function(e) {
                e.preventDefault();
                self.hideMsg();
            });
  },

  //过关失败通知
  fail:function () {
            var self = this;
            this.showMsg('失败提示', '不要气馁，点击确定重新开始，点击取消关闭');
            $('.sure-btn').off('click').on('click', function(e) {
                e.preventDefault();
                $('.restart').trigger('click');
             levelSum = 1;
                self.hideMsg();
            });

            $('.unsure-btn').off('click').on('click', function(e) {
                e.preventDefault();
                self.hideMsg();
                $('.item').off('click').on('click', function() {
                    e.preventDefault();
                    self.showMsg('温馨提示', '您可以点击确定重新开始按钮');
                });
            });
  },

  //设置关数
  setLevel: function(level) {
   $('.level').find('.level-num').html(level);
  },

  /**
   * 显示提示信息
   * @param {String} title 标题
   * @param {String} msg 信息内容
   */
        showMsg: function(title, msg) {
            $('.panel-title').html(title);
            $('.panel-msg').html(msg);
            $('.mask').show();
            $('.panel').show();
        },

  //隐藏提示信息
        hideMsg: function() {
            $('.mask').hide();
            $('.panel').hide();
         this.setLevel(levelSum);
        },

  //重置坐标、点击状态
  reset: function() {
   pointOne.x = pointOne.y = pointTwo.x = pointTwo.y = 0;
   clickTimes = 0;
  }
 });

 window.LinkGame = LinkGame;
})();

    通过跟小伙伴们讨论自己感觉思路更加开阔了，也希望各位大神不吝赐教，不胜感激~