first commit

app.js

@@ -0,0 +1,31 @@
+
+App({
+  globalData:{
+    mimeMap: null, // [[1, 2, 3, 4, 5, 6, 8, 9], [1, 2, 3, 4, 5, 6, 8, 9], [1, 2, 3, 4, 5, 6, 8, 9]]
+    count: 0,
+    roomNo: 0
+  },
+  updateMap: function(mimeMap) { // 更新应用的数据
+    this.globalData.mimeMap = mimeMap;
+  },
+  getMap: function() {
+    return this.globalData.mimeMap;
+  },
+  setCount: function(count) {
+    this.globalData.count = count;
+  },
+  decreaseCount: function() {
+    if(this.globalData.count > 0) {
+      this.globalData.count -= 1;
+    }
+  },
+  getCount: function() {
+    return this.globalData.count
+  },
+  getRoomNo: function() {
+    return this.globalData.roomNo
+  },
+  setRoomNo: function(no) {
+    this.globalData.roomNo = no;
+  }
+})

app.json

@@ -0,0 +1,12 @@
+{
+  "pages":[
+    "pages/entry/entry",
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#2a292e",
+    "navigationBarTitleText": "掘金",
+    "navigationBarTextStyle":"white"
+  }
+}

app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

common/net.js

@@ -0,0 +1,35 @@
+
+var app = getApp();
+function post(url, data, successCallback, failCallback, completeCallback) {
+    if(typeof(url) === 'object') { // 兼容json格式的参数
+        opt = url;
+        url = opt.url;
+        data = opt.data;
+        successCallback = opt.success;
+        failCallback = opt.fail;
+        completeCallback = opt.complete;
+    }
+    wx.request({
+      url: url,
+      data: data,
+      method: 'POST',
+      header: {
+        'Content-Type': 'application/json'
+      },
+      success: function(res) {
+        console.log(res.data);
+        successCallback && successCallback.call(null, res.data);
+      },
+      fail: function(err) {
+          console.log('fail');
+          failCallback && failCallback.call(err);
+      },
+      complete: function(data) {
+          completeCallback && completeCallback.call(data);
+      }
+    });
+}
+
+module.exports = {
+    post: post
+};

mime/mimeMap.js

@@ -0,0 +1,66 @@
+/**
+ * 这只是一个示例，真正用到地图场景生成的是在后台
+ */
+
+var mimeCnt = 10;
+var col = row = 6;
+// 地图场景数据
+var data = [];
+
+// 生成雷的主入口
+function genMimeArr() {
+    var tmpCnt = mimeCnt,
+        mimeMap = {}; // 辅助判断各格子的状态
+
+    // 初始化数据
+    for (var r = 0; r < row; r ++) {
+        data[r] = []; // 每一行都是一个数组 
+        for (var c = 0; c < col; c ++) {
+            data[r][c] = 0;
+        }
+    }
+    // 生成雷
+    while(tmpCnt > 0) {
+        var randX = getRandPos(col), // x => col
+            randY = getRandPos(row), // y => row
+            key = randY+'-'+randX;
+        if(!mimeMap[key]) {
+            mimeMap[key] = 1;
+            data[randY][randX] = -1; // 用负数来表示这里是雷
+            tmpCnt --;
+        }
+    }
+    // 扫描雷附近的格子
+    for (var r = 0; r < row; r ++) {
+        for (var c = 0; c < col; c ++) {
+            if(data[r][c] < 0) {
+                increaseArround(r,c);
+            }
+        }
+    }
+    console.log(data);
+    return data;
+}
+function getRandPos(max) {
+    return Math.floor(Math.random()*10000)%max;
+}
+
+function increaseArround(r, c) {
+    // upper row, current row, and the lower row
+    for (var k = 1; k > -2; k --) { // 1, 0, -1
+        var rr = r-k; // tmp row
+        for (var i = c-1; i < c+2; i ++) {
+            var cc = i; // tmp col
+            if (cc >= 0 && cc < col     // 约束列
+                && rr >= 0 && rr < row  // 约束行
+                && !(rr===r&&cc===c)    // 不是当前这一格
+                && data[rr][cc] >= 0) { // 且不是雷
+                data[rr][cc] ++;
+            }
+        }
+    }
+}
+
+// genMimeArr();
+
+module.exports = genMimeArr;

pages/entry/entry.js

@@ -0,0 +1,43 @@
+var net = require('../../common/net.js');
+
+var app = getApp();
+
+Page({
+  data: {
+    roomNo: 0
+  },
+  startGame: function() {
+      var roomNo = this.data.roomNo;
+      if(!roomNo) {
+          console.error('请填写房间号');
+          return;
+      }
+      app.setRoomNo(roomNo);  // 房间号
+      // 切换页面
+      wx.navigateTo({
+          url: '../index/index'
+      });
+      /*net.post({
+          url: 'http://localhost:8080/room',
+          data: {
+              no: roomNo,
+          },
+          success: function(rsp) {
+              // console.log(rsp, typeof(rsp));
+              if(rsp.errCode == 0) {
+              	var mimeMap = rsp.data.map;
+                app.updateMap(mimeMap);         // 地图场景
+                app.setCount(rsp.data.count);   // 金子的个数
+              }
+          },
+          fail: function(err) {
+              console.error('fail: ' + err);
+          }
+      });*/
+  },
+  roomNoChanged: function(event) {
+      this.setData({
+          roomNo: event.detail.value
+      });
+  },
+});

pages/entry/entry.wxml

@@ -0,0 +1,9 @@
+<!--entry.wxml-->
+<view class="container">
+    <view class="wrap">
+        <text class="title">请填入房间号开始游戏</text>
+        <input placeholder="数字，小于10位" type="primary" 
+            bindinput="roomNoChanged" class="room-no"/>
+        <button bindtap="startGame" class="start-game">开始游戏</button>
+    </view>
+</view>

pages/entry/entry.wxss

@@ -0,0 +1,13 @@
+.title {
+    font-size: 16px;
+    color: #333;
+}
+.start-game {
+    font-size: 14px;
+    margin-top: 30px;
+}
+.room-no {
+    font-size: 14px;
+    padding: 5px;
+    text-align: center;
+}

pages/index/index.js

@@ -0,0 +1,67 @@
+var websocket = require('../../websocket/connect.js');
+var net = require('../../common/net.js');
+var msgReceived = require('../../websocket/msgHandler.js');
+
+var app = getApp();
+
+Page({
+  data: {
+    mimeMap: null,
+    leftGolds: 0, // 总共有多少金子
+    score: 0,     // 我的得分
+    roomNo: 0     // 房间号
+  },
+  x: 0, // 用户点中的列
+  y: 0, // 用户点中的行
+  onLoad: function () {
+    var mimeMap = app.getMap();
+    var roomNo = app.getRoomNo();
+    this.setData({
+      roomNo: roomNo
+    });
+    // test
+    // websocket.send('before connection');
+
+    if (!websocket.socketOpened) {
+        // setMsgReceiveCallback 
+        websocket.setReceiveCallback(msgReceived, this);
+        // connect to the websocket 
+        websocket.connect();
+        websocket.send({
+          type: 'create'
+        });
+    }
+    else {
+        websocket.send({
+          type: 'create',
+          no: roomNo
+        });
+    }
+  },
+  digGold: function(event) {
+    // 不直接判断，而把坐标传给后台判断
+
+    // 被开过的就不管了
+    if (event.target.dataset.value < 9) {
+      return;
+    }
+
+    // 取到这格的坐标
+    this.x = event.target.dataset.x;
+    this.y = event.target.dataset.y;
+    console.log(this.x, this.y);
+    // 上报坐标
+    this.reportMyChoice();
+  },
+
+  reportMyChoice: function() {
+      roomNo = app.getRoomNo();
+      websocket.send({
+          type: 'dig',
+          x: this.x,
+          y: this.y,
+          no: roomNo
+      });
+  },
+
+});

pages/index/index.wxml

@@ -0,0 +1,16 @@
+<!--index.wxml-->
+<view class="wrapper">
+    <view class="top">
+        <text class="label my-score">我的得分：{{score}}</text>
+        <text class="label room-no">房间号：{{roomNo}}</text>
+        <text class="label my-score">剩余金子：{{leftGolds}}</text>
+    </view>
+    <view wx:for="{{mimeMap}}" wx:for-item="row" wx:for-index="i" 
+        class="flex-container">
+        <button wx:for="{{row}}" wx:for-item="cell" wx:for-index="j" 
+            class="flex-item {{cell<0?'gold':''}} {{cell<9?'open':''}}" 
+            bindtap="digGold" data-x="{{j}}" data-y="{{i}}" data-value="{{cell}}">
+            {{cell<9?(cell<0?'*':cell):"-"}}
+        </button>
+    </view>
+</view>

pages/index/index.wxss

@@ -0,0 +1,47 @@
+/**index.wxss**/
+.wrapper {
+    padding: 5px;
+}
+.flex-container {
+    padding: 0;
+    margin: 0 auto;
+    list-style: none;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-around;
+    line-height:1em;
+    width: 90%;
+}
+.flex-item {
+    background: gray;
+    margin: 1px;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    text-align: center;
+    flex: 1 0 auto;
+    height: auto;
+    font-family: "Lucida Console", Monaco, monospace
+}
+.open {
+    background: tomato;
+}
+.gold {
+    background: #fdff37;
+    color: #333;
+}
+.flex-item:before {
+    content: '';
+    display: block;
+    float: left;
+    padding-top:100%;
+}
+.top {
+    display: flex;
+    font-size: 14px;
+    line-height: 2.5em;
+    text-align: center;
+}
+.top .label {
+    flex: 1;
+}