随笔-120  评论-793  文章-4 

[深度学习]实现一个博弈型的AI,从五子棋开始(2)

嗯,今天接着来搞五子棋,从五子棋开始给小伙伴们聊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素材我打个包放这儿了:

点击这里下载UI素材

 

…………后记…………

我:小伙伴们别吐槽了,明天一定开始搞AI了,因为五子棋咱们有啦~

小伙伴:好吧,终于。

我:等一下,明天?NO,我口误,下一篇一定开始搞AI了,明天不一定有时间来写博客呢 - -

小伙伴:再再次省去吐槽一万字!

我:反正每周至少写两篇嘛,OK?

小伙伴:那我还能怎样……

 

posted on 2017-11-14 22:43 xerwin 阅读(...) 评论(...) 编辑 收藏