[深度学习]实现一个博弈型的AI，从五子棋开始（2）

<div class="iteye-blog-content-contain" style="font-size: 14px"><div id="cnblogs_post_body">
 嗯，今天接着来搞五子棋，从五子棋开始给小伙伴们聊AI。 
 &nbsp; 
 昨天晚上我们已经实现了一个五子棋的逻辑部分，其实讲道理，有个规则在，可以开始搞AI了，但是考虑到不够直观，我们还是顺带先把五子棋的UI也先搞出来。所以今天咱们搞UI。 
 &nbsp; 
 逻辑部分在这里：<a href="http://www.cnblogs.com/erwin/p/7828956.html" target="_blank">[深度学习]实现一个博弈型的AI，从五子棋开始（1）</a> 
 &nbsp; 
 小伙伴：啥？再次省去吐槽一万字，说好的讲深度学习在哪儿，说好的强化学习在哪儿，今天又是五子棋…… 
 我：是五子棋，AI不能缺场景啊，没有场景谈AI就是空谈，是得先有个棋啊。再说了，虽说之前搞了个逻辑，至少搞个界面出来测一下嘛，万一场景的逻辑都没对，还AI个锤子！ 
 老罗：又关我什么事？ 
 &nbsp; 
 好了，不扯了，回正题，我们一开始设计就是逻辑和UI分离，上一篇我们实现了逻辑部分，今天来实现UI部分，给咱的五子棋搞个UI。 
 &nbsp; 
 （2）五子棋下棋UI的实现 
 Python做五子棋UI的话，咱们这里就用 PyGame&nbsp;来搞，当然也有别的库，说老实话Python做UI我真没搞过多少，PyGame&nbsp;的基础用法和各种知识我就不展开了，毕竟这不是重点，有兴趣的小伙伴可以自行Google，我也是边学边用呢，哈哈！ 
 &nbsp; 
 既然是做UI，得有素材，我在网上找了一个棋盘： 
 &nbsp; 
 <img src="http://images2017.cnblogs.com/blog/17518/201711/17518-20171114210832952-1927177064.jpg" alt="" /> 
 &nbsp; 
 以及黑白两颗棋子： 
 <img src="http://images2017.cnblogs.com/blog/17518/201711/17518-20171114210907343-344724676.png" alt="" />&nbsp;<img src="http://images2017.cnblogs.com/blog/17518/201711/17518-20171114210919499-261841834.png" alt="" /> 
 &nbsp; 
 PS：为了UI上面好看，棋子因为是圆形的，最好是处理成PNG格式，带Alpha通道，外面透明。另外这几张图不知道上传了会不会被压缩成别的格式，我打了个包放在文章末尾了。 
 &nbsp; 
 在咱们之前的工程里建个目录“UI”，棋盘取名&nbsp;chessboard.jpg 放在目录下，两颗棋子分别取名&nbsp;piece_black.png、piece_white.png 也放到目录下。 
 &nbsp; 
 看看属性，棋盘是540*540像素的，棋子是32*32像素，数字记下来，然后咱们找的这个棋盘是有边缘的，量一下，边缘离第一根线大约是22像素。要做render，得用到这些数字。 
 &nbsp; 
 横竖各15根线这个不用说，15根线中间有14个格子，所以线和线的距离是总宽度减去两个边缘再除以格子数： (540 - 22 * 2) / 14 貌似除不尽，那就先这样子。 
 &nbsp; 
 好了，建一个文件 render.py ，咱们先把刚刚那些数字放进去，顺便该import的也import了，比如pygame、比如咱们昨天的定义和昨天的五棋子逻辑： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>#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</pre> 
 </div> 
 &nbsp; 
 然后我们定义一个新的类，GameRender，render初始化的时候我们绑定一个逻辑类，然后初始化pygame，把窗体大小设置一下，该加载的资源先加载了，代码比较简单，没有什么为什么，pygame就是这么用的，pygame有兴趣的小伙伴自己Google。 
 &nbsp; 
 render我们仍然考虑定义了一个current表示当前步，黑棋先下，所以current定义成黑色。 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>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()</pre> 
 </div> 
 &nbsp; 
 render类嘛，各种draw了，对不对，确实是。不过这里有一个问题。 
 &nbsp; 
 之前的逻辑类里我们定义了一个二维数组chessMap还记得吗？看看逻辑类GoBang的定义： 
 <div class="cnblogs_code"> 
  <pre>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</pre> 
 </div> 
 &nbsp; 
 我们先思考一个问题，chessMap里的坐标，和咱们棋盘的坐标怎么对应呢，chessMap里 i，j 就是0到14，0到14；咱们棋盘上，render的时候，那可是按像素来的啊，棋盘可是0到540像素呢，严格的说，是540减去两个边缘，22到518像素，得先对应吧。好，做个坐标变换，把棋子下标 i，j 变成像素 x，y。从边缘开始计算，每相邻一个棋子，加一个格子的大小GRID，那如果我们的棋子要摆上去的话，要摆到棋子中间，所以 x，y 分别再减去半个棋子的大小，代码就2行，比较清晰了： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    def coordinate_transform_map2pixel(self, i, j):    
        # 从 chessMap 里的逻辑坐标到 UI 上的绘制坐标的转换
        return MARGIN + j * GRID - PIECE / 2, MARGIN + i * GRID - PIECE / 2</pre> 
 </div> 
 &nbsp; 
 好，这下我们可以从逻辑类里读状态出来绘制了，再考虑一下，坐标变换嘛，还需不需要反过来变。是，确实需要，下棋落子的时候，实际是在UI上给得到 x，y 对吧，我们得去set一下逻辑类里的状态吧，所以这时候又需要把 x，y 坐标变换成 i，j 的，怎么算就不详细展开了，相似的逻辑。 
 这里咱们偷个懒的话，前一个映射函数不是有式子了么： 
 x =&nbsp;MARGIN + j * GRID - PIECE / 2 
 y =&nbsp;MARGIN + i * GRID - PIECE / 2 
 做个位移，推导一下等式的两边，把 j 用 x 来表达一下， i 用 y 来表达一下，就可以了： 
 i =&nbsp;(y -&nbsp;MARGIN + PIECE / 2) / GRID 
 j = (x -&nbsp;MARGIN + PIECE / 2) / GRID 
 这里细心的小伙伴们发现了，i 和 j 可能不是整数哦，首先获得的坐标当然是通过鼠标来，这个本来就有偏差，不会那么刚刚好，并且GRID好像也不是整数，除一下，都不知道是多少了，OK，那咱们Round一下咯。 
 又有小伙伴说了，不是棋盘有边缘么，那个MARGIN就时刻提醒我们，有个边缘，要是我在边缘上点击，会不会出现负值，或者大于N的值。对，考虑得很好，得判断一下边界，这下应该差不多了，可以写代码了： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    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 &lt; 0 or i &gt;= N or j &lt; 0 or j &gt;= N:
            return None, None
        else:
            return i, j</pre> 
 </div> 
 &nbsp; 
 好了，到现在，坐标的映射也搞定了，终于可以draw、draw、draw了，好吧，那就draw，先画棋盘再画棋子，棋子是啥颜色就画啥颜色，空白的就跳过： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    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</pre> 
 </div> 
 &nbsp; 
 为了下棋的时候体验稍微好一点呢，我们在鼠标上是不是最好也画一个棋子，这样感觉点上去就能落子，好像会好一点： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    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))</pre> 
 </div> 
 &nbsp; 
 如果出现连续的5颗同色棋子，要显示赢棋的结果，那就再来个draw： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    def draw_result(self, result):
        font = pygame.font.Font('/Library/Fonts/Songti.ttc', 50)
        tips = u&quot;本局结束:&quot;
        if result == ChessboardState.BLACK :
            tips = tips + u&quot;黑棋胜利&quot;
        elif result == ChessboardState.WHITE:
            tips = tips + u&quot;白棋胜利&quot;
        else:
            tips = tips + u&quot;平局&quot;
        text = font.render(tips, True, (255, 0, 0))
        self.__screen.blit(text, (WIDTH / 2 - 200, HEIGHT / 2 - 50))</pre> 
 </div> 
 &nbsp; 
 想想还差啥？ 
 对，下棋的逻辑还没做吧，鼠标点击，在棋盘上放颗棋子，我们刚刚draw棋子的时候其实是读取的逻辑类里的chessMap，那下棋的时候，去set对应的状态： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    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</pre> 
 </div> 
 &nbsp; 
 &nbsp; 
 现在不是还没AI嘛，我们一不做二不休，先搞一个人人对弈，那就再加一个切换颜色的函数： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>    def change_state(self):
        if self.__currentPieceState == ChessboardState.BLACK:
            self.__currentPieceState = ChessboardState.WHITE
        else:
            self.__currentPieceState = ChessboardState.BLACK</pre> 
 </div> 
 &nbsp; 
 好了，还差啥？好像作为render的话，感觉差不多，那就来个main函数溜一溜代码试试，新建一个 game.py，这里我们 main 函数里先给AI留个接口，至少留个框架咯： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>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()</pre> 
 </div> 
 &nbsp; 
 好了，跑一下试试，没有AI就拉两个小伙伴来对弈，实在不行先左手和右手来一把，好像还行，逻辑没问题： 
 &nbsp; 
 <img src="http://images2017.cnblogs.com/blog/17518/201711/17518-20171114221733702-519923396.png" alt="" width="588" height="612" /> 
 &nbsp; 
 整理一下完整版的 render.py ： 
 &nbsp; 
 <div class="cnblogs_code"> 
  <pre>#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 &lt; 0 or i &gt;= N or j &lt; 0 or j &gt;= 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&quot;本局结束:&quot;
        if result == ChessboardState.BLACK :
            tips = tips + u&quot;黑棋胜利&quot;
        elif result == ChessboardState.WHITE:
            tips = tips + u&quot;白棋胜利&quot;
        else:
            tips = tips + u&quot;平局&quot;
        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</pre> 
 </div> 
 &nbsp; 
 &nbsp; 
 好了，就这样~ &nbsp; 
 UI素材我打个包放这儿了： 
 <a href="https://files.cnblogs.com/files/erwin/Gobang_UI_Res.zip" target="_blank">点击这里下载UI素材</a> 
 &nbsp; 
 …………后记………… 
 我：小伙伴们别吐槽了，明天一定开始搞AI了，因为五子棋咱们有啦~ 
 小伙伴：好吧，终于。 
 我：等一下，明天？NO，我口误，下一篇一定开始搞AI了，明天不一定有时间来写博客呢 - - 
 小伙伴：再再次省去吐槽一万字！ 
 我：反正每周至少写两篇嘛，OK？ 
 小伙伴：那我还能怎样…… 
 &nbsp;
</div></div>

[深度学习]实现一个博弈型的AI，从五子棋开始（2）

猜你喜欢