独立开发微信小程序----"桌游聚乐会"学习项目实践上线

一、效果展示

已经上线的产品，欢迎大家扫码体验：

Github项目地址：https://github.com/WEIHAITONG1/WechatMiniPorgram–BoardGameClub

二、设计理念和产品简述：

作者陆壹佛爷本人本身就是桌游的重度用户，但是经常和朋友们聚会时，又很无奈，因为去到一个咖啡厅，那里又没有桌游牌，去专门的桌游厅，经常也是人满为患，基于这样的情况，首先会考虑到把桌游移植到手机原生app中，的确方便快捷很多，但是聚会又不是经常性的，玩一次几个小时后这个应用我到底删不删呢？对于手机16G的我很是纠结，也许聚会的地方没有Wifi，朋友们自然舍不得花流量下载一个原生app，这个时候，我就萌生了开发微信小程序桌游聚乐会的意识；基于张小龙的“用完即走”的概念，太适合不过桌游这款应用了！

聚乐会是一款专注于聚会游戏的微信小程序，帮助用户解决聚会不知道玩什么的问题。包含了多款轻松简单的聚会游戏，如谁是卧底、轮盘猜猜猜等，其他小程序有待继续开发。应用画面精美，词库丰富，易于上手，适合多人聚会娱乐。

三、关键源码

谁是卧底

1.每位玩家点击牌背，查看随机生成的词语，看完后跳转到显示各位玩家信息的界面：

 seeWord: function () {
    var word = this.data.words
    var arr = this.data.arr
    var userName = this.data.userName
    // console.log("hah"+userName_list)
    if (i <= word.length && userName != "") {
      var title = "请 " + userName + " 玩家记住你的词语"
      var content = arr[i - 1]
      // console.log("..."+content)
      // console.log(title)
      wx.showModal({
        title: title,
        content: content,
        showCancel: false,
        confirmText: "我记住了",
        success: function (res) {
          if (res.confirm) {
            i++;
            if (i == word.length + 1) {

              wx.navigateTo({
                url: '../speak/speak?words=' + word + '&userName_lists=' + userName_list
              })
              userName_list = []
            }
          }
        }
      })
      this.setData({
        no: i,
        userName: '',
      })
    }
  },

2.数据绑定每位玩家，形成列表，创建点击事件，写一个showActionSheet，其中写每个玩家各种属性，例如：查看词语，踢出玩家；游戏逻辑判断；

function ButtonTap(index, that) {
  var arr_r = that.data.arr_r
  var arr = that.data.arr
  // console.log(arr_r)
  var userName_list = that.data.userName_list;
  // console.log(userName_list)
  wx.showActionSheet({
    itemList: ['本轮出局', '查看词语'],
    success: function (res) {
      if (!res.cancel) {
        if (res.tapIndex == 0) {
          wx.showModal({
            title: '提示',
            content: '你确定要出局 ' + userName_list[index] + ' 玩家吗？',
            showCancel: true,
            success: function (res) {
              if (res.confirm) {
                arr_r.splice(index, 1);
                userName_list.splice(index, 1)
                that.setData({
                  userName_list: userName_list
                })
                // console.log(arr_r);
                if (equals(arr_r) == true && arr_r[0] == "civilian") {
                  var title = '游戏结束，平民胜利';
                  showToast(title)
                  setTimeout(function () {
                    wx.navigateTo({
                      url: '../punish/punish',
                    })
                  }, 2000)
                }
                else if (equals(arr_r) == true && arr_r[0] == "undercover") {
                  var title = '游戏结束，卧底胜利';
                  showToast(title)
                  showToast(title)
                  setTimeout(function () {
                    wx.navigateTo({
                      url: '../punish/punish',
                    })
                  }, 2000)
                }
                else if (equals(arr_r) == false && arr_r.length == 2) {
                  var title = '游戏结束，卧底胜利';
                  showToast(title)
                  showToast(title)
                  setTimeout(function () {
                    wx.navigateTo({
                      url: '../punish/punish',
                    })
                  }, 2000)
                }
                else {
                  var title = '游戏继续';
                  showToast(title);
                }
              }
            }
          })

        } else if (res.tapIndex == 1) {
          wx.showModal({
            title: '您的词汇是：',
            content: arr[index],
          })
        } else {
          var title = '该玩家已经被干掉了！不能再次踢出游戏！';
          showToast(title);
        }
      }
    }
  })
};

轮盘猜猜猜

1.主页显示选择两队和累计得分，这用到了全局变量，每个页面绑定数据，最后在返回给主页；

onDragonTap: function (event) {
    app.globalData.judge_dragon = true;
    app.globalData.judge_phoenix = false;
    var that = this;
    wx.navigateTo({
      url: 'roulette/roulette?gragons=' + that.data.gragons
    })
  },
  onPhoenixTap: function () {
    app.globalData.judge_dragon = false;
    app.globalData.judge_phoenix = true;
    var that = this;
    wx.navigateTo({
      url: 'roulette/roulette?phoenix=' + that.data.phoenix,
    })
  }

2.绘制轮盘特效

onReady: function (e) {
    var that = this;
    // getAwardsConfig
    app.awardsConfig = {
      chance: true,
      awards: [
        { 'index': 0, 'name': '画画' },
        { 'index': 1, 'name': '唇语' },
        { 'index': 2, 'name': '语言' },
        { 'index': 3, 'name': '动作' },
        { 'index': 4, 'name': '抢答(语言)' },
        { 'index': 5, 'name': '抢答(唇语)' },
      ]
    }
    // 绘制转盘
    var awardsConfig = app.awardsConfig.awards,
      len = awardsConfig.length,
      rotateDeg = 360 / len / 2 + 90,
      html = [],
      turnNum = 1 / len  // 文字旋转 turn 值
    that.setData({
      btnDisabled: app.awardsConfig.chance ? '' : 'disabled'
    })
    var ctx = wx.createContext()
    for (var i = 0; i < len; i++) {
      // 保存当前状态
      ctx.save();
      // 开始一条新路径
      ctx.beginPath();
      // 位移到圆心，下面需要围绕圆心旋转
      ctx.translate(150, 150);
      // 从(0, 0)坐标开始定义一条新的子路径
      ctx.moveTo(0, 0);
      // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
      ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);
      // 绘制圆弧
      ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);

      // 颜色间隔
      if (i % 2 == 0) {
        ctx.setFillStyle('rgba(255,184,32,.1)');
      } else {
        ctx.setFillStyle('rgba(255,203,63,.1)');
      }

      // 填充扇形
      ctx.fill();
      // 绘制边框
      ctx.setLineWidth(0.5);
      ctx.setStrokeStyle('rgba(228,55,14,.1)');
      ctx.stroke();

      // 恢复前一个状态
      ctx.restore();

      // 奖项列表
      html.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name });
    }
    that.setData({
      awardsList: html
    });
  }

3.60秒时钟倒计时和积分系统数据绑定关键源码：

function countdown(that) {
  var second = that.data.second
  if (second == 0) {
    that.setData({
      second: "时间到"
    });
    return;
  }
  var time = setTimeout(function () {
    that.setData({
      second: second - 1
    });
    countdown(that);
  }
    , 1000)
};
function sendScore(that) {
  var pages = getCurrentPages();
  var currPage = pages[pages.length - 1];   //当前页面
  var prevPage = pages[pages.length - 2];  //上一个页面
  var judge_dragon = that.data.judge_dragon;
  if (judge_dragon == true) {
    var gragons = parseInt(that.data.gragons);
    gragons += 1;
    that.setData({
      gragons: gragons,
    })
    prevPage.setData({
      gragons: gragons
    })
  } else {
    var phoenix = parseInt(that.data.phoenix);
    phoenix += 1;
    that.setData({
      phoenix: phoenix
    })
    prevPage.setData({
      phoenix: phoenix
    })
  }
};

五子棋大战

黑子白子各种逻辑判断：

var app = getApp()
var Pi = Page({
  data: {
    logs: [],
    vak: new Array(225),
    he: 0,
    result: "",
  },
  count: 0,
  vec: [[1, 0], [0, 1], [1, 1], [-1, 1]],
  step: function (event) {
    var pos = event.currentTarget.dataset.pos;
    if (this.data.vak[pos] == "white" || this.data.vak[pos] == "black") return;
    this.count++;
    if (this.count % 2) {
      this.data.vak[pos] = "black";
    }
    else {
      this.data.vak[pos] = "white";
    }
    this.setData({
      vak: this.data.vak
    })
    this.judge(pos);
  }
  ,
  judge: function (pos) {
    var color = this.data.vak[pos];
    var x0 = parseInt(pos / 15), y0 = pos % 15, x, y, round;
    for (var i = 0; i < 4; i++) {
      var five = 0;
      round = 0;
      for (x = x0, y = y0; round < 5; x += this.vec[i][0], y += this.vec[i][1], round++) {
        if (this.data.vak[15 * x + y] == color) {
          five++;
        }
        else {
          break;
        }
      }
      round = 0;
      for (x = x0, y = y0; round < 5; x -= this.vec[i][0], y -= this.vec[i][1], round++) {
        if (this.data.vak[15 * x + y] == color) {
          five++;
        }
        else {
          break;
        }
      }
      var rstr = color + "win";
      if (five >= 6) {
        this.setData({
          result: rstr
        });
        wx.showModal({
          title: color + '获胜',
          content: '再来一局吗？',
          success: function (res) {
            if (res.confirm) {
              wx.redirectTo({
                url: "gobang"
              });
            }
          }
        })
      }
    }
  },
  })

开发总结

通过自己独立开发，巩固了跟着视频课程学到的知识，也自己踩了很多坑，通过这个项目，自己也学习了js的知识；觉得很满足，秉承的开源思想，在这里总结自己的源码，愿各位大神给出中肯建议，也请大家扫码体验。