嗯，今天接着来搞五子棋，从五子棋开始给小伙伴们聊AI。
昨天晚上我们已经实现了一个五子棋的逻辑部分，其实讲道理，有个规则在，可以开始搞AI了，但是考虑到不够直观，我们还是顺带先把五子棋的UI也先搞出来。所以今天咱们搞UI。
逻辑部分在这里：[深度学习]实现一个博弈型的AI，从五子棋开始（1）
小伙伴：啥？再次省去吐槽一万字，说好的讲深度学习在哪儿，说好的强化学习在哪儿，今天又是五子棋……
我：是五子棋，AI不能缺场景啊，没有场景谈AI就是空谈，是得先有个棋啊。再说了，虽说之前搞了个逻辑，至少搞个界面出来测一下嘛，万一场景的逻辑都没对，还AI个锤子！
老罗：又关我什么事？
好了，不扯了，回正题，我们一开始设计就是逻辑和UI分离，上一篇我们实现了逻辑部分，今天来实现UI部分，给咱的五子棋搞个UI。
（2）五子棋下棋UI的实现
Python做五子棋UI的话，咱们这里就用 PyGame 来搞，当然也有别的库，说老实话Python做UI我真没搞过多少，PyGame 的基础用法和各种知识我就不展开了，毕竟这不是重点，有兴趣的小伙伴可以自行Google，我也是边学边用呢，哈哈！
既然是做UI，得有素材，我在网上找了一个棋盘：
以及黑白两颗棋子：
PS：为了UI上面好看，棋子因为是圆形的，最好是处理成PNG格式，带Alpha通道，外面透明。另外这几张图不知道上传了会不会被压缩成别的格式，我打了个包放在文章末尾了。
在咱们之前的工程里建个目录“UI”，棋盘取名 chessboard.jpg 放在目录下，两颗棋子分别取名 piece_black.png、piece_white.png 也放到目录下。
看看属性，棋盘是540*540像素的，棋子是32*32像素，数字记下来，然后咱们找的这个棋盘是有边缘的，量一下，边缘离第一根线大约是22像素。要做render，得用到这些数字。
横竖各15根线这个不用说，15根线中间有14个格子，所以线和线的距离是总宽度减去两个边缘再除以格子数： (540 - 22 * 2) / 14 貌似除不尽，那就先这样子。
好了，建一个文件 render.py ，咱们先把刚刚那些数字放进去，顺便该import的也import了，比如pygame、比如咱们昨天的定义和昨天的五棋子逻辑：
#coding:utf-8 import pygame
from pygame.locals import *
from consts import *
from gobang import GoBang #IMAGE_PATH = '/Users/phantom/Projects/AI/gobang/UI/'
IMAGE_PATH = 'UI/' WIDTH = 540
HEIGHT = 540
MARGIN = 22
GRID = (WIDTH - 2 * MARGIN) / (N - 1)
PIECE = 32
然后我们定义一个新的类，GameRender，render初始化的时候我们绑定一个逻辑类，然后初始化pygame，把窗体大小设置一下，该加载的资源先加载了，代码比较简单，没有什么为什么，pygame就是这么用的，pygame有兴趣的小伙伴自己Google。
render我们仍然考虑定义了一个current表示当前步，黑棋先下，所以current定义成黑色。
class GameRender(object):
def __init__(self, gobang):
# 绑定逻辑类
self.__gobang = gobang
# 黑棋开局
self.__currentPieceState = ChessboardState.BLACK # 初始化 pygame
pygame.init()
# pygame.display.set_mode((width, height), flags, depth)
self.__screen = pygame.display.set_mode((WIDTH, HEIGHT), 0, 32)
pygame.display.set_caption('五子棋AI') # UI 资源
self.__ui_chessboard = pygame.image.load(IMAGE_PATH + 'chessboard.jpg').convert()
self.__ui_piece_black = pygame.image.load(IMAGE_PATH + 'piece_black.png').convert_alpha()
self.__ui_piece_white = pygame.image.load(IMAGE_PATH + 'piece_white.png').convert_alpha()
render类嘛，各种draw了，对不对，确实是。不过这里有一个问题。
之前的逻辑类里我们定义了一个二维数组chessMap还记得吗？看看逻辑类GoBang的定义：
class GoBang(object):
def __init__(self):
self.__chessMap = [[ChessboardState.EMPTY for j in range(N)] for i in range(N)]
self.__currentI = -1
self.__currentJ = -1
self.__currentState = ChessboardState.EMPTY
我们先思考一个问题，chessMap里的坐标，和咱们棋盘的坐标怎么对应呢，chessMap里 i，j 就是0到14，0到14；咱们棋盘上，render的时候，那可是按像素来的啊，棋盘可是0到540像素呢，严格的说，是540减去两个边缘，22到518像素，得先对应吧。好，做个坐标变换，把棋子下标 i，j 变成像素 x，y。从边缘开始计算，每相邻一个棋子，加一个格子的大小GRID，那如果我们的棋子要摆上去的话，要摆到棋子中间，所以 x，y 分别再减去半个棋子的大小，代码就2行，比较清晰了：
def coordinate_transform_map2pixel(self, i, j):
# 从 chessMap 里的逻辑坐标到 UI 上的绘制坐标的转换
return MARGIN + j * GRID - PIECE / 2, MARGIN + i * GRID - PIECE / 2
好，这下我们可以从逻辑类里读状态出来绘制了，再考虑一下，坐标变换嘛，还需不需要反过来变。是，确实需要，下棋落子的时候，实际是在UI上给得到 x，y 对吧，我们得去set一下逻辑类里的状态吧，所以这时候又需要把 x，y 坐标变换成 i，j 的，怎么算就不详细展开了，相似的逻辑。
这里咱们偷个懒的话，前一个映射函数不是有式子了么：
x = MARGIN + j * GRID - PIECE / 2
y = MARGIN + i * GRID - PIECE / 2
做个位移，推导一下等式的两边， 把 j 用 x 来表达一下， i 用 y 来表达一下，就可以了：
i = (y - MARGIN + PIECE / 2) / GRID
j = (x - MARGIN + PIECE / 2) / GRID
这里细心的小伙伴们发现了，i 和 j 可能不是整数哦，首先获得的坐标当然是通过鼠标来，这个本来就有偏差，不会那么刚刚好，并且GRID好像也不是整数，除一下，都不知道是多少了，OK，那咱们Round一下咯。
又有小伙伴说了，不是棋盘有边缘么，那个MARGIN就时刻提醒我们，有个边缘，要是我在边缘上点击，会不会出现负值，或者大于N的值。对，考虑得很好，得判断一下边界，这下应该差不多了，可以写代码了：
def coordinate_transform_pixel2map(self, x, y):
# 从 UI 上的绘制坐标到 chessMap 里的逻辑坐标的转换
i , j = int(round((y - MARGIN + PIECE / 2) / GRID)), int(round((x - MARGIN + PIECE / 2) / GRID))
# 有MAGIN, 排除边缘位置导致 i,j 越界
if i < 0 or i >= N or j < 0 or j >= N:
return None, None
else:
return i, j
好了，到现在，坐标的映射也搞定了，终于可以draw、draw、draw了，好吧，那就draw，先画棋盘再画棋子，棋子是啥颜色就画啥颜色，空白的就跳过：
def draw_chess(self):
# 棋盘
self.__screen.blit(self.__ui_chessboard, (0,0))
# 棋子
for i in range(0, N):
for j in range(0, N):
x,y = self.coordinate_transform_map2pixel(i,j)
state = self.__gobang.get_chessboard_state(i,j)
if state == ChessboardState.BLACK:
self.__screen.blit(self.__ui_piece_black, (x,y))
elif state == ChessboardState.WHITE:
self.__screen.blit(self.__ui_piece_white, (x,y))
else: # ChessboardState.EMPTY
pass
为了下棋的时候体验稍微好一点呢，我们在鼠标上是不是最好也画一个棋子，这样感觉点上去就能落子，好像会好一点：
def draw_mouse(self):
# 鼠标的坐标
x, y = pygame.mouse.get_pos()
# 棋子跟随鼠标移动
if self.__currentPieceState == ChessboardState.BLACK:
self.__screen.blit(self.__ui_piece_black, (x - PIECE / 2, y - PIECE / 2))
else:
self.__screen.blit(self.__ui_piece_white, (x - PIECE / 2, y - PIECE / 2))
如果出现连续的5颗同色棋子，要显示赢棋的结果，那就再来个draw：
def draw_result(self, result):
font = pygame.font.Font('/Library/Fonts/Songti.ttc', 50)
tips = u"本局结束:"
if result == ChessboardState.BLACK :
tips = tips + u"黑棋胜利"
elif result == ChessboardState.WHITE:
tips = tips + u"白棋胜利"
else:
tips = tips + u"平局"
text = font.render(tips, True, (255, 0, 0))
self.__screen.blit(text, (WIDTH / 2 - 200, HEIGHT / 2 - 50))
想想还差啥？
对，下棋的逻辑还没做吧，鼠标点击，在棋盘上放颗棋子，我们刚刚draw棋子的时候其实是读取的逻辑类里的chessMap，那下棋的时候，去set对应的状态：
def one_step(self):
i, j = None, None
# 鼠标点击
mouse_button = pygame.mouse.get_pressed()
# 左键
if mouse_button[0]:
x, y = pygame.mouse.get_pos()
i, j = self.coordinate_transform_pixel2map(x, y) if not i is None and not j is None:
# 格子上已经有棋子
if self.__gobang.get_chessboard_state(i, j) != ChessboardState.EMPTY:
return False
else:
self.__gobang.set_chessboard_state(i, j, self.__currentPieceState)
return True return False
现在不是还没AI嘛，我们一不做二不休，先搞一个人人对弈，那就再加一个切换颜色的函数：
def change_state(self):
if self.__currentPieceState == ChessboardState.BLACK:
self.__currentPieceState = ChessboardState.WHITE
else:
self.__currentPieceState = ChessboardState.BLACK
好了，还差啥？好像作为render的话，感觉差不多，那就来个main函数溜一溜代码试试，新建一个 game.py，这里我们 main 函数里先给AI留个接口，至少留个框架咯 ：
import pygame
from pygame.locals import *
from sys import exit
from consts import *
from gobang import GoBang
from render import GameRender
#from gobang_ai import GobangAI if __name__ == '__main__':
gobang = GoBang()
render = GameRender(gobang)
#先给AI留个接口
#ai = GobangAI(gobang, ChessboardState.WHITE)
result = ChessboardState.EMPTY
enable_ai = False while True:
# 捕捉pygame事件
for event in pygame.event.get():
# 退出程序
if event.type == QUIT:
exit()
elif event.type == MOUSEBUTTONDOWN:
# 成功着棋
if render.one_step():
result = gobang.get_chess_result()
else:
continue
if result != ChessboardState.EMPTY:
break
if enable_ai:
#ai.one_step()
result = gobang.get_chess_result()
else:
render.change_state() # 绘制
render.draw_chess()
render.draw_mouse() if result != ChessboardState.EMPTY:
render.draw_result(result) # 刷新
pygame.display.update()
好了，跑一下试试，没有AI就拉两个小伙伴来对弈，实在不行先左手和右手来一把，好像还行，逻辑没问题：
整理一下完整版的 render.py ：
#coding:utf-8 import pygame
from pygame.locals import *
from consts import *
from gobang import GoBang #IMAGE_PATH = '/Users/phantom/Projects/AI/gobang/UI/'
IMAGE_PATH = 'UI/' WIDTH = 540
HEIGHT = 540
MARGIN = 22
GRID = (WIDTH - 2 * MARGIN) / (N - 1)
PIECE = 32 class GameRender(object):
def __init__(self, gobang):
# 绑定逻辑类
self.__gobang = gobang
# 黑棋开局
self.__currentPieceState = ChessboardState.BLACK # 初始化 pygame
pygame.init()
# pygame.display.set_mode((width, height), flags, depth)
self.__screen = pygame.display.set_mode((WIDTH, HEIGHT), 0, 32)
pygame.display.set_caption('五子棋AI') # UI 资源
self.__ui_chessboard = pygame.image.load(IMAGE_PATH + 'chessboard.jpg').convert()
self.__ui_piece_black = pygame.image.load(IMAGE_PATH + 'piece_black.png').convert_alpha()
self.__ui_piece_white = pygame.image.load(IMAGE_PATH + 'piece_white.png').convert_alpha() def coordinate_transform_map2pixel(self, i, j):
# 从 chessMap 里的逻辑坐标到 UI 上的绘制坐标的转换
return MARGIN + j * GRID - PIECE / 2, MARGIN + i * GRID - PIECE / 2 def coordinate_transform_pixel2map(self, x, y):
# 从 UI 上的绘制坐标到 chessMap 里的逻辑坐标的转换
i , j = int(round((y - MARGIN + PIECE / 2) / GRID)), int(round((x - MARGIN + PIECE / 2) / GRID))
# 有MAGIN, 排除边缘位置导致 i,j 越界
if i < 0 or i >= N or j < 0 or j >= N:
return None, None
else:
return i, j def draw_chess(self):
# 棋盘
self.__screen.blit(self.__ui_chessboard, (0,0))
# 棋子
for i in range(0, N):
for j in range(0, N):
x,y = self.coordinate_transform_map2pixel(i,j)
state = self.__gobang.get_chessboard_state(i,j)
if state == ChessboardState.BLACK:
self.__screen.blit(self.__ui_piece_black, (x,y))
elif state == ChessboardState.WHITE:
self.__screen.blit(self.__ui_piece_white, (x,y))
else: # ChessboardState.EMPTY
pass def draw_mouse(self):
# 鼠标的坐标
x, y = pygame.mouse.get_pos()
# 棋子跟随鼠标移动
if self.__currentPieceState == ChessboardState.BLACK:
self.__screen.blit(self.__ui_piece_black, (x - PIECE / 2, y - PIECE / 2))
else:
self.__screen.blit(self.__ui_piece_white, (x - PIECE / 2, y - PIECE / 2)) def draw_result(self, result):
font = pygame.font.Font('/Library/Fonts/Songti.ttc', 50)
tips = u"本局结束:"
if result == ChessboardState.BLACK :
tips = tips + u"黑棋胜利"
elif result == ChessboardState.WHITE:
tips = tips + u"白棋胜利"
else:
tips = tips + u"平局"
text = font.render(tips, True, (255, 0, 0))
self.__screen.blit(text, (WIDTH / 2 - 200, HEIGHT / 2 - 50)) def one_step(self):
i, j = None, None
# 鼠标点击
mouse_button = pygame.mouse.get_pressed()
# 左键
if mouse_button[0]:
x, y = pygame.mouse.get_pos()
i, j = self.coordinate_transform_pixel2map(x, y) if not i is None and not j is None:
# 格子上已经有棋子
if self.__gobang.get_chessboard_state(i, j) != ChessboardState.EMPTY:
return False
else:
self.__gobang.set_chessboard_state(i, j, self.__currentPieceState)
return True return False def change_state(self):
if self.__currentPieceState == ChessboardState.BLACK:
self.__currentPieceState = ChessboardState.WHITE
else:
self.__currentPieceState = ChessboardState.BLACK
好了，就这样~
UI素材我打个包放这儿了：
…………后记…………
我：小伙伴们别吐槽了，明天一定开始搞AI了，因为五子棋咱们有啦~
小伙伴：好吧，终于。
我：等一下，明天？NO，我口误，下一篇一定开始搞AI了，明天不一定有时间来写博客呢 - -
小伙伴：再再次省去吐槽一万字！
我：反正每周至少写两篇嘛，OK？
小伙伴：那我还能怎样……