请选择 进入手机版 | 继续访问电脑版

微信小程序教程网

新浪微博达人勋

1182

积分

306

金钱

0

广播

Rank: 6Rank: 6

积分
1182

活跃会员热心会员推广达人社区QQ达人最佳新人

发表于 2019-6-25 11:21:12 | 显示全部楼层 |阅读模式
分享到:
预览图片:



代码示例:
  1. var Stone = require('Stone');
  2. var judger = require('FiveStoneJudger');

  3. /**
  4. * 五子棋的主控制类
  5. */
  6. export default class FiveStone {

  7.     /**
  8.      * 初始化棋盘
  9.      * @param   page                    当前页面页面
  10.      * @param   chessBoardSize          当前棋盘每行和列最多能下多少个子子
  11.      * @param   chessboardSizePercent   棋盘的宽度相当于屏幕宽度的百分比(0<x<1)
  12.      */
  13.     constructor(chessBoardSize, chessboardSizePercent) {
  14.         var self = this;
  15.         var chessBoard = [];
  16.         //占位
  17.         var chessBoardCell = [];
  18.         this.chessBoardSize = chessBoardSize;
  19.         for (var r = 0; r < chessBoardSize; r++) {
  20.             var row = [];
  21.             var cellRow = [];
  22.             for (var c = 0; c < chessBoardSize; c++) {
  23.                 row.push({
  24.                     stoneType:Stone.none,
  25.                     //位置使用到的时候才计算
  26.                     pos:null
  27.                 });
  28.                 if (c < chessBoardSize - 1) {
  29.                     cellRow.push(0);
  30.                 }
  31.             }
  32.             chessBoard.push(row);
  33.             if (r < chessBoardSize - 1) {
  34.                 chessBoardCell.push(cellRow);
  35.             }
  36.         }
  37.         this.chessBoard = chessBoard;
  38.         this.chessBoardCell = chessBoardCell;
  39.         //获取系统信息
  40.         wx.getSystemInfo({
  41.             success: function(res) {
  42.                 self.chessboardSizePX = res.windowWidth * chessboardSizePercent;
  43.                 console.log('%c棋盘大小:%c' +
  44.                  self.chessboardSizePX +
  45.                   '%cpx',
  46.                   'color:red;',
  47.                   'color:blue;',
  48.                   'color:black;'
  49.                   );
  50.                 self.cellSizePX = self.chessboardSizePX / (chessBoardSize - 1);
  51.                 console.log('%c单元格大小:%c' +
  52.                  self.cellSizePX +
  53.                   '%cpx',
  54.                   'color:red;',
  55.                   'color:blue;',
  56.                   'color:black;'
  57.                   );
  58.                   self.halfCellSizePX = self.cellSizePX * 0.5;
  59.             }
  60.         });
  61.         //当前下子的类型
  62.         this.stone = Stone.black;
  63.         //下子监听的回调集合
  64.         this.onStepStoneCallbacks = [];
  65.         //是否能够下子的开关
  66.         this._canStep = true;
  67.         //历史
  68.         this.history = [];
  69.         //设置裁判
  70.         this.setJudger(judger);
  71.     }

  72.     /**
  73.      * 通过事件获取下子在棋盘的位置
  74.      */
  75.     getStepLocation(e) {
  76.         var curTarget = e.currentTarget;
  77.         var offset = {
  78.             x: curTarget.offsetLeft,
  79.             y: curTarget.offsetTop
  80.         };
  81.         var touch = e.touches[0];
  82.         //相对棋盘的位置
  83.         var clientPos = {
  84.             x:touch.pageX - offset.x,
  85.             y:touch.pageY - offset.y
  86.         };
  87.         var stepPos = {
  88.             x: Math.ceil((clientPos.x - this.halfCellSizePX) / this.cellSizePX),
  89.             y: Math.ceil((clientPos.y - this.halfCellSizePX) / this.cellSizePX)
  90.         };
  91.         if (stepPos.x < 0 || stepPos.x >= this.chessBoardSize ||
  92.             stepPos.y < 0 || stepPos.y >= this.chessBoardSize) {
  93.                 return null;
  94.             }
  95.         return stepPos;
  96.     }

  97.     /**
  98.      * 通过事件获取下子在棋盘的绝对位置
  99.      */
  100.     getStepPosition(e) {
  101.         var curTarget = e.currentTarget;
  102.         var stepPos = this.getStepLocation(e);
  103.         if (stepPos == null) {
  104.             return null;
  105.         }
  106.         var absPos = stepPos.clone();
  107.         //后面的那个1像素怎么出来的我也不知道,反正减了之后位置看起来正很多
  108.         absPos.x = absPos.x * this.cellSizePX + curTarget.offsetLeft - this.halfCellSizePX - 1;
  109.         absPos.y = absPos.y * this.cellSizePX + curTarget.offsetTop - this.halfCellSizePX - 1;
  110.         this.chessBoard[stepPos.x][stepPos.y].pos = absPos.clone();
  111.         return absPos;
  112.     }

  113.     /**
  114.      * 下棋,设置的是基于棋盘的坐标
  115.      * @return  返回true就是下子成功,否则为失败
  116.      */
  117.     step(x, y) {
  118.         if (this.canStepAt(x, y)) {
  119.             this.chessBoard[x][y].stoneType = this.nowStone();
  120.             const nowStone = this.nowStone();
  121.             this.stone = nowStone == Stone.black ? Stone.white:Stone.black;
  122.             this.onStepStone(nowStone, x, y);

  123.             if (!(this.history instanceof Array)) {
  124.                 this.history = [];
  125.             }
  126.             //插入到历史
  127.             this.history.push({
  128.                 'x':x,
  129.                 'y':y,
  130.                 'stoneType':nowStone
  131.             });
  132.             this.judge(nowStone, x, y);
  133.             return true;
  134.         }
  135.         return false;
  136.     }

  137.     /**
  138.      * 悔棋
  139.      */
  140.     undo() {
  141.         if (!(this.history instanceof Array) || this.history.length <= 0) {
  142.             return;
  143.         }
  144.         const lastStoneIndex = this.history.length - 1;
  145.         const lastStone = this.history[lastStoneIndex];
  146.         this.stone = lastStone.stoneType;
  147.         this.history.splice(lastStoneIndex, 1);
  148.         this.chessBoard[lastStone.x][lastStone.y].stoneType = Stone.none;
  149.         this.allowStep();
  150.     }

  151.     /**
  152.      * 判断该棋子是否能够下
  153.      */
  154.     canStepAt(x, y) {
  155.         if (x < 0 || x >= this.chessBoardSize ||
  156.             y < 0 || y >= this.chessBoardSize ||
  157.             this.chessBoard[x][y].stoneType != Stone.none) {
  158.                 return false;
  159.         }
  160.         return this._canStep;
  161.     }

  162.     /**
  163.      * 当触发了下子的事件的时候
  164.      */
  165.     onStepStone(nowStone, x, y) {
  166.         if (this.onStepStoneCallbacks instanceof Array) {
  167.             for (var i in this.onStepStoneCallbacks) {
  168.                 const cb = this.onStepStoneCallbacks[i];
  169.                 if (typeof(cb) === 'function') {
  170.                     cb.call(this, nowStone, x, y);
  171.                 }
  172.             }
  173.         }
  174.     }

  175.     /**
  176.      * 添加下子的监听器
  177.      * @return 如果返回0则代表插入失败,成功返回索引
  178.      */
  179.     addOnStepStoneCallback(func) {
  180.         if (!(this.onStepStoneCallbacks instanceof Array)) {
  181.             this.onStepStoneCallbacks = [];
  182.         }
  183.         if (typeof(func) == 'function') {
  184.             //push以后会返回数组的长度,所以减一之后就会是对应的索引
  185.             return this.onStepStoneCallbacks.push(func) - 1;
  186.         }
  187.         return 0;
  188.     }

  189.     /**
  190.      * 通过索引删除下子的监听器
  191.      */
  192.     removeOnStepStoneCallback(index) {
  193.         if (this.onStepStoneCallbacks instanceof Array) {
  194.             if (this.onStepStoneCallbacks.length > index) {
  195.                 this.onStepStoneCallbacks.splice(index, 1);
  196.             }
  197.         }
  198.     }

  199.     /**
  200.      * 重新开局
  201.      */
  202.     restart() {
  203.         this.stone = Stone.black;
  204.         for (var r in this.chessBoard) {
  205.             for (var c in this.chessBoard[r]) {
  206.                 this.chessBoard[r][c].stoneType = Stone.none;
  207.             }
  208.         }
  209.         //清空历史
  210.         this.history = [];
  211.         this.allowStep();
  212.     }

  213.     /**
  214.      * 阻止下子
  215.      */
  216.     preventStep() {
  217.         this._canStep = false;
  218.     }

  219.     /**
  220.      * 允许下子
  221.      */
  222.     allowStep() {
  223.         this._canStep = true;
  224.     }

  225.     /**
  226.      * 获取当前是下的黑子还是白子
  227.      */
  228.     nowStone() {
  229.         return this.stone;
  230.     }

  231.     /**
  232.      * 返回当前是否允许下子
  233.      */
  234.     canStep() {
  235.         return this._canStep;
  236.     }

  237.     /**
  238.      * 进行裁判(下子成功之后触发)
  239.      * @param stepStone 当前下子的类型
  240.      * @param x         下子基于棋盘的x坐标
  241.      * @param y         下子基于棋盘的y坐标
  242.      */
  243.     judge(stepStone, x, y) {
  244.         if (typeof(this._judger) == 'function') {
  245.             this._judger.call(this, stepStone, x, y, this._winCallback);
  246.         }
  247.     }

  248.     /**
  249.      * 设置裁判回调
  250.      */
  251.     setJudger(func) {
  252.         if (typeof(func) == 'function') {
  253.             this._judger = func;
  254.         }
  255.     }

  256.     /**
  257.      * 设置胜利之后的回调
  258.      */
  259.     setWinCallback(func) {
  260.         if (typeof(func) == 'function') {
  261.             this._winCallback = func;
  262.         }
  263.     }
  264. }
复制代码

项目地址及下载:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x

新浪微博达人勋

1209

积分

329

金钱

0

广播

Rank: 6Rank: 6

积分
1209

活跃会员热心会员推广达人社区QQ达人最佳新人

发表于 2019-6-25 11:22:46 | 显示全部楼层
鼎力支持!!

新浪微博达人勋

1179

积分

319

金钱

0

广播

Rank: 6Rank: 6

积分
1179

社区QQ达人最佳新人活跃会员热心会员推广达人

发表于 2019-7-9 10:41:27 | 显示全部楼层
支持支持再支持

新浪微博达人勋

575

积分

0

金钱

0

广播

Rank: 4

积分
575
发表于 2019-8-30 12:55:44 | 显示全部楼层
无论是不是沙发都得回复下

新浪微博达人勋

131

积分

1

金钱

0

广播

Rank: 2

积分
131
发表于 2019-9-15 04:02:11 | 显示全部楼层
垃圾内容,路过为证。

新浪微博达人勋

1131

积分

249

金钱

0

广播

Rank: 6Rank: 6

积分
1131

社区QQ达人最佳新人

发表于 2019-9-23 13:32:00 | 显示全部楼层

新浪微博达人勋

1118

积分

84

金钱

1

广播

Rank: 9Rank: 9Rank: 9

积分
1118

社区QQ达人推广达人

发表于 2019-10-2 00:53:02 | 显示全部楼层
我擦!我要沙发!

新浪微博达人勋

124

积分

3

金钱

0

广播

Rank: 2

积分
124
发表于 2019-10-4 14:27:30 | 显示全部楼层
传说中的沙发???哇卡卡

新浪微博达人勋

142

积分

10

金钱

0

广播

Rank: 2

积分
142
发表于 3 天前 | 显示全部楼层
锄禾日当午,发帖真辛苦。谁知坛中餐,帖帖皆辛苦!
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

小黑屋|手机版|Archiver|小程序教程网. ( 粤ICP备12089784号 )

GMT+8, 2019-10-19 14:39 , Processed in 0.250000 second(s), 42 queries .

Powered by Discuz X3.1

© 2001-2013 IOS教程网

快速回复 返回顶部 返回列表