微信小程序-五子棋

博客班级

https://edu.cnblogs.com/campus/zjcsxy/SE2020

作业要求

https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334

作业目标

1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文

作业源代码

 https://github.com/intindex/weixin

姓名

魏蕴田

学号

31801114

院系

计算机科学与技术

前言

      第一次学做微信小程序，主要是学习别人的代码并加以理解和修改

      开发工具：微信开发者工具

效果演示

代码分析

 

      app.json代码主要是用于背景界面的设计，windows里面的参数可用于背景颜色以及文本的编辑

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

      app.js代码主要用于接口的调用和本地用户数据的获取

//app.js
App({
  // onLaunch: function () {
  //   //调用API从本地缓存中获取数据
  //   var logs = wx.getStorageSync('logs') || []
  //   logs.unshift(Date.now())
  //   wx.setStorageSync('logs', logs)
  // },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

index.wxml代码主要用于类和对象的定义，黑棋白棋以及棋盘的定义

<!--index.wxml-->
<view>
  <view>
    {{result}}
  </view>
  <view class="qipan">
    <view class="block" wx:for="{{vak}}" wx:key="{{index}}" bindtap="step" data-pos="{{index}}">
      <view class="{{item}}"></view>
    </view>
  </view>
  <view class="restart-container">
    <button type="primary" bindtap="restart">Restart</button>
  </view>
</view>

index.js代码主要用于解释小程序运行的方法，也是小程序的核心代码。把整个棋盘理解成为一个二维坐标系，落一个子相当于在坐标系中画上一个点，相同标识的点如果可以连城一条直线，游戏就

//index.js
//获取应用实例
var app = getApp()
var util = require('../../utils/util.js');
function initVak() {
  let arr = [];
  for (let i = 0; i < 255; i++) {
    arr.push('empty')
  }
  console.log('init', arr)
  return arr;
}
var Pi = Page({
  data: {
    logs: [],
    vak: initVak(),
    he: 0,
    result: "",
  },
  count: 0,
  vec: [
    [1, 0],
    [0, 1],
    [1, 1],
    [-1, 1]
  ],
  step(event) {
    var pos = event.currentTarget.dataset.pos;
    if (this.data.vak[pos] == "white" || this.data.vak[pos] == "black") return;
    this.count++;
    let decision;
    if (this.count % 2) {
      this.data.vak[pos] = "black";
    }
    else {
      this.data.vak[pos] = "white";
    }
    console.log('data.vak', this.data.vak)
    this.setData({
      vak: this.data.vak
    })
    this.judge(pos);
  },
  restart () {
    this.setData({
      logs: [],
      vak: initVak(),
      he: 0,
      result: "",
    });
    this.count = 0;
  },
  judge(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.navigateTo({
                url: "./index"
              });
            }
          }
        })
      }
    }
  },
  onLoad () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })

    })
  }
})