五子棋,基于canvas

五子棋,基于canvas

2021-03-13
¥ 0 终身VIP免费 升级终身VIP
下载不了?请联系网站客服提交链接错误!
增值服务: 安装指导 环境配置 二次开发 网站建设 模板修改 源码安装 LOGO设计 图片设计
五子棋,基于canvas
最近更新 2021年03月13日
资源编号 14155

五子棋,基于canvas

郑重承诺丨总裁主题提供安全交易、信息保真!
增值服务:
安装指导
环境配置
二次开发
网站建设
模板修改
源码安装
¥ 0 (终身VIP免费 升级终身VIP开通VIP尊享优惠特权
立即下载 升级会员 最新活动
详情介绍

五子棋,基于canvas

五子棋,基于canvas

代码示例:

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

复制代码

 

免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

资源下载此资源仅限注册用户下载,请先
客服QQ:3482249445
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

所有文章为演示数据,不提供下载地址,版权归原作者所有,仅提供演示效果!

小程序网 小程序 五子棋,基于canvas https://www.10000ii.com/14155.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

五子棋,基于canvas-海报

分享本文封面