微信小程序-五子棋

博客班級

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))
      })

    })
  }
})