基于JavaScript开发连连看游戏小程序

//定义坐标点类
function Point(_x, _y) {
  this.x = _x;
  this.y = _y;
}

var map = [];
var Select_first = false; //是否已经选中第一块
var linePointStack = []; //存储连接的折点棋盘坐标
var Height = 12;
var Width = 10;
var p1, p2; //存储选中第一块，第二块方块对象坐标
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //创建画布上下文
    this.init(); //初始化地图, 将地图中所有方块区域位置置为空方块状态
    this.create_map() ; //生成随机地图
    this.print_map(); //输出map地图
    this.ctx = wx.createCanvasContext('myCanvas')
    this.ctx.draw();
  },
init: function() {
    //初始化地图, 将地图中所有方块区域位置置为空方块状态
    for (var x = 0; x < Width; x++) {
      map[x] = new Array();
      for (var y = 0; y < Height; y++) {
        map[x][y] = " "; //" "表示空的
      }
    }
  },

**
   *按地图map中记录图案信息将图标图案显示在Canvas对象中，生成游戏开始的界面。
   */
  print_map: function() { //输出map地图
    let ctx = this.ctx
    for (var x = 0; x < Width; x++)
      for (var y = 0; y < Height; y++)
        if (map[x][y] != ' ') {
          var img1 = '/images/' + map[x][y] + ".jpg";
          //ctx.drawImage('/images/4.jpg', 50 * i, 50, 50, 50)
          ctx.drawImage(img1, 25 * x, 25 * y, 25, 25);
        }
  },

touchStart: function(e) {
    var x = Math.floor(e.touches[0].x / 25);
    var y = Math.floor(e.touches[0].y / 25);
    let ctx = this.ctx;
    var pair=false; //是否配对成功
    this.print_map(); //输出map地图
    console.log("clicked at" + x + "，" + y);
    if (map[x][y] == " ")
      console.log("提示此处无方块");
    else {
      if (Select_first == false) {
        p1 = new Point(x, y);
        //画选定（x1,y1)处的框线
        ctx.setStrokeStyle("red");
        ctx.strokeRect(x * 25, y * 25, 25, 25);
        Select_first = true;
      } else {
        p2 = new Point(x, y);
        //判断第二次单击的方块是否已被第一次单击选取，如果是则返回。
        if ((p1.x == p2.x) && (p1.y == p2.y))
          return;
        //画选定（x2,y2)处的框线
        console.log('第二次单击的方块' + x + ', ' + y)
        ctx.strokeRect(x * 25, y * 25, 25, 25);
        if (this.IsSame(p1, p2) && this.IsLink(p1, p2)) { //判断是否连通
          console.log('连通' + x + ', ' + y);
          Select_first = false;
          //画选中方块之间连接线
          this.drawLinkLine(p1, p2);
          map[p1.x][p1.y] = ' '; //清空记录地图中第1个方块
          map[p2.x][p2.y] = ' '; //清空记录地图中第2个方块
          pair=true; //配对成功，定时0.5秒后刷新屏幕
          linePointStack=[];
          if(this.isWin()) { //游戏结束
            console.log("游戏结束,你通关了！！");
          }
        } else {
          //不能连通则取消选定的2个方块
          Select_first = false;
        }
      }
    }
    ctx.draw();
    if (pair) { //配对成功
      this.print_map(); //重新输出map地图
      //定时0.5秒后刷新屏幕
      setTimeout(function () {
        ctx.draw();
      }, 500); //过半秒
    }
  },

IsSame: function(p1, p2) {
    if (map[p1.x][p1.y] == map[p2.x][p2.y]) {
      console.log("clicked at IsSame");
      return true;
    }
    return false;
  },

drawLinkLine: function(p1, p2) { //画连接线
    console.log("折点数" + linePointStack.length);
    if (linePointStack.length == 0) //直线联通
      this.drawLine(p1, p2);
    if (linePointStack.length == 1) { //一折连通
      var z = linePointStack.pop();
      console.log("一折连通点z" + z.x + z.y);
      this.drawLine(p1, z);
      this.drawLine(p2, z);
    }
    if (linePointStack.length == 2) { //2折连通
      var z1 = linePointStack.pop()
      //print("2折连通点z1",z1.x,z1.y)
      this.drawLine(p2, z1)
      var z2 = linePointStack.pop()
      //print("2折连通点z2",z2.x,z2.y)
      this.drawLine(z1, z2);
      this.drawLine(p1, z2);
    }
  },

drawLine: function(p1, p2) { //绘制(p1, p2)之间的直线
    let ctx = this.ctx;
    ctx.beginPath();
    ctx.moveTo(p1.x * 25 + 12, p1.y * 25 + 12);
    ctx.lineTo(p2.x * 25 + 12, p2.y * 25 + 12);
    ctx.stroke();
  },

/**
   *#检测是否已经赢得了游戏
   */
  isWin: function() {
    //检测是否尚有非未被消除的方块
    //(非BLANK_STATE状态)
    for (var y = 0; y < Height; y++)
      for (var x = 0; x < Width; x++)
        if (map[x][y] != " ")
          return false;
    return true;
  }