代码我开源在GitHub上了
GitHub
iOS实现苏拉卡尔塔吃子算法
棋盘构建
我在具体写代码之前一直觉得可以放一张棋盘的图片上去，这样就可以快速的构建一个棋盘，结果我发现这样没法算棋子的坐标，于是我琢磨了一下就决定用贝塞尔曲线做
于是我重写了
- (void)drawRect:(CGRect)rect
这个方法可以让你绘制曲线在layer层上
先放上我的棋盘轨道代码
- (void)drawRect:(CGRect)rect{
//绘制棋盘
UIBezierPath *bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint:CGPointMake(CENTERX-75, CENTERY-75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX+75, CENTERY-75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX+75, CENTERY+75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX-75, CENTERY+75)];
[bezierPath addLineToPoint:CGPointMake(CENTERX-75, CENTERY-75)];
[UIColor.orangeColor setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];
//横线-1,2,3,4
UIBezierPath *bezier2Path = UIBezierPath.bezierPath;
[bezier2Path moveToPoint:CGPointMake(CENTERX-75, CENTERY-45)];
[bezier2Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY-45)];
[UIColor.purpleColor setStroke];
bezier2Path.lineWidth = 1;
[bezier2Path stroke];
UIBezierPath *bezier3Path = UIBezierPath.bezierPath;
[bezier3Path moveToPoint:CGPointMake(CENTERX-75, CENTERY-15)];
[bezier3Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY-15)];
[RGB(0, 139, 69) setStroke];
bezier3Path.lineWidth = 1;
[bezier3Path stroke];
UIBezierPath *bezier4Path = UIBezierPath.bezierPath;
[bezier4Path moveToPoint:CGPointMake(CENTERX-75, CENTERY+15)];
[bezier4Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY+15)];
[RGB(0, 139, 69) setStroke];
bezier4Path.lineWidth = 1;
[bezier4Path stroke];
UIBezierPath *bezier5Path = UIBezierPath.bezierPath;
[bezier5Path moveToPoint:CGPointMake(CENTERX-75, CENTERY+45)];
[bezier5Path addLineToPoint:CGPointMake(CENTERX+75, CENTERY+45)];
[UIColor.purpleColor setStroke];
bezier5Path.lineWidth = 1;
[bezier5Path stroke];
//竖线-1,2,3,4
UIBezierPath *bezier6Path = UIBezierPath.bezierPath;
[bezier6Path moveToPoint:CGPointMake(CENTERX-45, CENTERY-75)];
[bezier6Path addLineToPoint:CGPointMake(CENTERX-45, CENTERY+75)];
[UIColor.purpleColor setStroke];
bezier6Path.lineWidth = 1;
[bezier6Path stroke];
UIBezierPath *bezier7Path = UIBezierPath.bezierPath;
[bezier7Path moveToPoint:CGPointMake(CENTERX-15, CENTERY-75)];
[bezier7Path addLineToPoint:CGPointMake(CENTERX-15, CENTERY+75)];
[RGB(0, 139, 69) setStroke];
bezier7Path.lineWidth = 1;
[bezier7Path stroke];
UIBezierPath *bezier8Path = UIBezierPath.bezierPath;
[bezier8Path moveToPoint:CGPointMake(CENTERX+15, CENTERY-75)];
[bezier8Path addLineToPoint:CGPointMake(CENTERX+15, CENTERY+75)];
[RGB(0, 139, 69) setStroke];
bezier8Path.lineWidth = 1;
[bezier8Path stroke];
UIBezierPath *bezier9Path = UIBezierPath.bezierPath;
[bezier9Path moveToPoint:CGPointMake(CENTERX+45, CENTERY-75)];
[bezier9Path addLineToPoint:CGPointMake(CENTERX+45, CENTERY+75)];
[UIColor.purpleColor setStroke];
bezier9Path.lineWidth = 1;
[bezier9Path stroke];
//曲线-左上-大
UIBezierPath *circle1Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY-75) radius:60 startAngle:0 endAngle:-M_PI_2*3 clockwise:false];
[RGB(0, 139, 69) setStroke];
circle1Path.lineWidth = 1;
[circle1Path stroke];
//曲线-左上-小
UIBezierPath *circle2Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY-75) radius:30 startAngle:0 endAngle:-M_PI_2*3 clockwise:false];
[UIColor.purpleColor setStroke];
circle2Path.lineWidth = 1;
[circle2Path stroke];
//曲线-右上-大
UIBezierPath *circle3Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY-75) radius:60 startAngle:M_PI endAngle:M_PI_2 clockwise:true];
[RGB(0, 139, 69) setStroke];
circle3Path.lineWidth = 1;
[circle3Path stroke];
//曲线-右上-小
UIBezierPath *circle4Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY-75) radius:30 startAngle:M_PI endAngle:M_PI_2 clockwise:true];
[UIColor.purpleColor setStroke];
circle4Path.lineWidth = 1;
[circle4Path stroke];
//曲线-左下-大
UIBezierPath *circle5Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY+75) radius:60 startAngle:0 endAngle:M_PI_2*3 clockwise:true];
[RGB(0, 139, 69) setStroke];
circle5Path.lineWidth = 1;
[circle5Path stroke];
//曲线-左下-小
UIBezierPath *circle6Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX-75, CENTERY+75) radius:30 startAngle:0 endAngle:M_PI_2*3 clockwise:true];
[UIColor.purpleColor setStroke];
circle6Path.lineWidth = 1;
[circle6Path stroke];
//曲线-右下-大
UIBezierPath *circle7Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY+75) radius:60 startAngle:-M_PI_2 endAngle:M_PI clockwise:true];
[RGB(0, 139, 69) setStroke];
circle7Path.lineWidth = 1;
[circle7Path stroke];
//曲线-右下-小
UIBezierPath *circle8Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CENTERX+75, CENTERY+75) radius:30 startAngle:-M_PI_2 endAngle:M_PI clockwise:true];
[UIColor.purpleColor setStroke];
circle8Path.lineWidth = 1;
[circle8Path stroke];
}
看起来很长，没有办法。这都是我计算出来的点组成的棋盘
其中CENTERX和CENTERY的定义是这样的
#define CENTERX [UIScreen mainScreen].bounds.size.width/2
#define CENTERY [UIScreen mainScreen].bounds.size.height/2
棋子
接着就是放棋子了，我这个棋盘中间一个格子是30位移，根据计算放上棋子不是很难
for (int i=0; i<12; i++) {
if (i<6) {
UIButton *redBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[redBtn setImage:[UIImage imageNamed:@"red"] forState:UIControlStateNormal];
redBtn.frame = CGRectMake(0, 0, 25, 25);
redBtn.center = CGPointMake(CENTERX-75+i*30, CENTERY-75);
redBtn.tag = i + 1;
redBtn.userInteractionEnabled = false;
[redBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:redBtn];
UIButton *blueBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[blueBtn setImage:[UIImage imageNamed:@"blue"] forState:UIControlStateNormal];
blueBtn.frame = CGRectMake(0, 0, 25, 25);
blueBtn.center = CGPointMake(CENTERX-75+i*30, CENTERY+75);
blueBtn.tag = i + 19;
blueBtn.userInteractionEnabled = false;
[blueBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:blueBtn];
}else{
UIButton *redBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[redBtn setImage:[UIImage imageNamed:@"red"] forState:UIControlStateNormal];
redBtn.frame = CGRectMake(0, 0, 25, 25);
redBtn.center = CGPointMake(CENTERX-75+(i-6)*30, CENTERY-45);
redBtn.tag = i + 1;
redBtn.userInteractionEnabled = false;
[redBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:redBtn];
UIButton *blueBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[blueBtn setImage:[UIImage imageNamed:@"blue"] forState:UIControlStateNormal];
blueBtn.frame = CGRectMake(0, 0, 25, 25);
blueBtn.center = CGPointMake(CENTERX-75+(i-6)*30, CENTERY+45);
blueBtn.tag = i + 7;
blueBtn.userInteractionEnabled = false;
[blueBtn addTarget:self action:@selector(pressChessBtn:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:blueBtn];
}
这里分为红蓝双方，红方在上面，蓝方在下面
这就是构建棋盘的全部思路了，实际上在构建棋盘之前应该先想清楚这个棋盘的数据结构是什么样的
这里提供一下我这个工程中的数据结构思路
@property(assign,nonatomic)NSInteger camp;
@property(assign,nonatomic)NSInteger tag;
@property(assign,nonatomic)NSInteger x;
@property(assign,nonatomic)NSInteger y;
@property(assign,nonatomic)CGFloat frameX;
@property(assign,nonatomic)CGFloat frameY;
可以看到这里是6个属性，稍微解释一下
第一个是阵营，取值是-1、0和1，这三个数足够表示棋盘上双方棋子之间的关系了
第二个是标签，很简单，1-24，用来标识UIButton的
第三个和第四个是这个数据结构二维数组中的坐标
第五个和第六个就是每个坐标对应的在视图上的frame值，能方便的让我知道UIButton移动到哪里
后面我还会详细说明一下棋子是如何实现吃子的，以及动画是如何做的
最后
欢迎访问我的博客 Qi的博客
