pygame 欢乐五子棋 （一）

Hello, 大家好，从本期开始，我们就开始开发我们五子棋小游戏！
五子棋游戏，规则简单，比较适合我这种新手～

我们将五子棋游戏的开发大概分为一下几个步骤

1. 画出棋盘和棋子
2. 游戏的开始和结束画面
3. 落子处理
4. 背景音乐和落子声音
5. AI 对局

本期我们先画出我们漂亮的棋盘吧。

棋盘

1. 首先看一下我们的目录结构

> fiveinrow$ tree
.
├── fiveinrow.py
├── images
│   └── back.png
└── music
    ├── background.mp3
    └── buw.wav

images 下有一张背景图片， music 下面放了我们的背景音乐和落子的音效，fiveinrow.py 就是我们的代码了。

2. 正式开工了，先搭一下pygame的游戏框架，主要是导入包、初始化、加载图片和主循环。
   这里需要解释一下pygame的屏幕像素点的设置，左上角为起点，向右宽度逐渐增加，向下高度逐渐增加。

# 导入我们需要用到的包
import pygame
import os

# 初始化我们的pygame
pygame.init()

# 初始化mixer （因为下文我们需要用到音乐）
pygame.mixer.init()

# 设置我们的屏幕大小和标题

WIDTH = 720
HEIGHT = 720
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("五子棋")

# 设置一个定时器，用于固定时间刷新屏幕，而不是一直不停的刷新，浪费CPU资源
FPS = 30
clock = pygame.time.Clock()

# 加载背景图片
base_folder = os.path.dirname(__file__)
img_folder = os.path.join(base_folder, 'images')
background_img = pygame.image.load(os.path.join(img_folder, 'back.png')).convert()

我们的主循环也很简单：

running = True
while running:
    # 设置屏幕刷新频率
    clock.tick(FPS)

    # 处理不同事件
    for event in pygame.event.get():
        # 检查是否关闭窗口
        if event.type == pygame.QUIT:
            running = False

    # 画出棋盘
    draw_background(screen)

    # 刷新屏幕
    pygame.display.flip()

3. 棋盘的绘制
   棋盘的绘制分为三个步骤
   • 画背景图片
   • 画出网格线
   • 画出五个小黑点（围棋棋盘上有九个）

接下来我们画棋盘的函数主要用到了一下几个函数：

• screen.blit，这个函数就是复制像素点到指定位置，第一个参数是源，第二个是位置（左上角的坐标）
• pygame.draw.line，这个函数的作用是画线，第一个参数为我们的屏幕 screen，第二个参数为颜色，第三个参数为起点，第四个参数为终点。
• pygame.draw.circle，画圆形，第一二哥参数和和画线的一样，第三四个参数分别为圆心和半径。

OK～ 进入大菜～

# 画出棋盘
def draw_background(surf):
    # 加载背景图片
    surf.blit(background_img, (0, 0))

    # 画网格线，棋盘为 19行 19列的
    # 1. 画出边框，这里 GRID_WIDTH = WIDTH // 20
    rect_lines = [
        ((GRID_WIDTH, GRID_WIDTH), (GRID_WIDTH, HEIGHT - GRID_WIDTH)),
        ((GRID_WIDTH, GRID_WIDTH), (WIDTH - GRID_WIDTH, GRID_WIDTH)),
        ((GRID_WIDTH, HEIGHT - GRID_WIDTH),
            (WIDTH - GRID_WIDTH, HEIGHT - GRID_WIDTH)),
        ((WIDTH - GRID_WIDTH, GRID_WIDTH),
            (WIDTH - GRID_WIDTH, HEIGHT - GRID_WIDTH)),
    ]
    for line in rect_lines:
        pygame.draw.line(surf, BLACK, line[0], line[1], 2)

    # 画出中间的网格线
    for i in range(17):
        pygame.draw.line(surf, BLACK,
                         (GRID_WIDTH * (2 + i), GRID_WIDTH),
                         (GRID_WIDTH * (2 + i), HEIGHT - GRID_WIDTH))
        pygame.draw.line(surf, BLACK,
                         (GRID_WIDTH, GRID_WIDTH * (2 + i)),
                         (HEIGHT - GRID_WIDTH, GRID_WIDTH * (2 + i)))

    # 画出棋盘中的五个点，围棋棋盘上为9个点，这里我们只画5个
    circle_center = [
        (GRID_WIDTH * 4, GRID_WIDTH * 4),
        (WIDTH - GRID_WIDTH * 4, GRID_WIDTH * 4),
        (WIDTH - GRID_WIDTH * 4, HEIGHT - GRID_WIDTH * 4),
        (GRID_WIDTH * 4, HEIGHT - GRID_WIDTH * 4),
        (GRID_WIDTH * 10, GRID_WIDTH * 10)
    ]
    for cc in circle_center:
        pygame.draw.circle(surf, BLACK, cc, 5)

最后看一下效果～～

five-in-row-back.png

完整的代码可以去我的 github 看，点击这里进入GitHub。
如果这篇文章对您有帮助，赞赏一下吧～
您的支持是我继续创作的动力～～～