小游戏系列之五环盾牌

2019 年 10 月 5 日
筆記

小游戏系列之五环盾牌

0.说在前面

1.pygame入坑

2.奥运五环

3.美国队长盾牌

4.作者的话

0.说在前面

前两天上老板课，任务：一个月贪吃蛇，不限语言。

于是乎，今日入坑小游戏，开始学习pygame的开发。

本节主要介绍pygame的初级教程，以及如何用pygame去绘制奥运五环及美国队长盾牌。

先来看几个直观的结果~~

五环图

盾牌图

哈哈，绘制就这样了，接下来看如何使用初中数学知识以及pygame去开发。

1.pygame入坑

【安装】

pip install pygame

【HelloWorld】

# 该模块包含pygame使用的各种常量。它的内容自动放在pygame模块命名空间中  from pygame.locals import *  import pygame  pygame.display.init() l# 初始化页面布局  width,height = 600,500 # 设置窗口的宽度与高度  screen = pygame.display.set_mode((width,height)) #     初始化窗口或屏幕以进行显示  '''  set_mode（resolution =（0,0），flags = 0，depth = 0） - > Surface  此功能将创建一个显示Surface。传入的参数是对显示类型的请求。实际创建的显示将是系统支持的最佳匹配。  resolution参数是一对表示宽度和高度的数字。flags参数是其他选项的集合。depth参数表示用于颜色的位数。  '''  pygame.display.set_caption('Hello,World') # 设置窗口标题  bg_filename = 'bg.jpg' # 设置背景图片  mouse_image_filename = 'mouse.png' # 设置鼠标图片  # Surface.convert()不带参数调用，以创建一个可以在屏幕上更快地绘制的副本  bg = pygame.image.load(bg_filename).convert()  # convert_alpha() 在加载后使用该方法，以使图像具有每像素透明度  mouse_curse = pygame.image.load(mouse_image_filename).convert_alpha()  while True:      for event in pygame.event.get():          # QUIT来自上述locals中的常量          if event.type == 'QUIT':              sys.exit()          screen.blit(bg, (0,0)) # 设置背景图          x,y = pygame.mouse.get_pos()          x -= mouse_curse.get_width()/2          y -= mouse_curse.get_height()/2          screen.blit(mouse_curse,(x,y)) # 设置鼠标的图          pygame.display.update()

【展示】

HelloWorld图

2.奥运五环

图形构成：5个圆，上三圆各自有间距，下两圆与上三圆相交叉。

上三圆之间宽度设为10，那么以此为标准下三圆变会绘制的很有规则。

具体看下面代码：

import pygame  import sys  import math  from pygame.locals import *  pygame.display.init()  # 定义五环颜色常量RGB  WHITE = (255,255,255)  BLACK = (0,0,0)  RED = (255,0,0)  BLUE = (0, 0, 255)  GREEN = (0, 255, 0)  YELLOW = (255,255,0)  width,height = 600,500  screen = pygame.display.set_mode((width,height))  pygame.display.set_caption('奥运五环')  clock = pygame.time.Clock()  while True:      clock.tick(10)      for event in pygame.event.get():          if event.type == QUIT:              sys.exit()          screen.fill(WHITE)          '''           左上角坐标(0,0)          在(100,100)位置绘制弧线，这里用的弧线方式绘制圆，          最直接的绘制圆在后面的盾牌会讲解。          arc里面(100,100,100,100)前面两个表示图形中心的位置，后面两个表示椭圆的a与b          那么最大为100，只要稍微缩小点，就不圆了，想绘制一个圆，则只需要范围为(0,2*pi)即可，          后面的数字10表示线宽。          '''          pygame.draw.arc(screen,RED,(100,100,100,100),0,2*math.pi,10)          pygame.draw.arc(screen,BLUE,(210,100,100,100),0,2*math.pi,10)          pygame.draw.arc(screen,BLACK,(320,100,100,100),0,2*math.pi,10)          pygame.draw.arc(screen, YELLOW, (155, 150, 100, 100), 0, 2*math.pi, 10)          pygame.draw.arc(screen, GREEN, (265, 150, 100, 100), 0, 2*math.pi, 10)          # 将图形完整更新到屏幕          pygame.display.flip()

最后就得到了下面的五环图形。

五环图

3.美国队长盾牌

这个对数学要求略高点，就是在最后计算五角星绘制时候，需要确定如何在圆内绘制五角星呢？

针对这个问题，实际上是先在圆中绘制正五边形的五个顶点，然后这五个顶点进行连线即可得到相应的五角星。

那么如何寻找这五个顶点呢，在pygame中暂时没有找到操作旋转角的方法，这样的话就得用数学公式去推导相应的顶点坐标。

我们按照顺时针假设正五边形的五个顶点，分别为(A，B，C，D，E)，那么我们现在的目的很明确，计算五个顶点坐标即可。

对于正五边形放在圆内，它又是有特点的，顶点(五边形的最高点)为上述的A，这个点的横坐标与圆的半径是在同一条竖线上的，那么它的横坐标计算为：圆心距离y坐标轴的距离。纵坐标为A距离x轴的距离。

对于B点与E点，横坐标分别为圆心+上一段距离与圆心减去一段距离。纵坐标一致。

对于C点与D点，方法同B点与E点。

那么怎么来具体计算顶点的不确定坐标，就是通过三角函数及圆半径来计算的，具体的公式会在代码中体现，上述便是本次盾牌绘制中最大难点五角星的绘制思路。

下面来看一下代码实现：

import pygame  import sys  import math  from pygame.locals import *  pygame.display.init()  WHITE = (255,255,255)  BLACK = (0,0,0)  RED = (224,73,70)  BLUE = (17, 90, 153)  GREEN = (0, 255, 0)  YELLOW = (255,255,0)  YIN_WHITE = (224,225,225)  width,height = 600,600  screen = pygame.display.set_mode((width,height))  pygame.display.set_caption('美国队长盾牌')  clock = pygame.time.Clock()  while True:      clock.tick(10)      for event in pygame.event.get():          if event.type == QUIT:              sys.exit()            screen.fill(WHITE)          # 圆绘制          pygame.draw.circle(screen,RED,(300,300),150,20)          pygame.draw.circle(screen,YIN_WHITE,(300,300),130,20)          pygame.draw.circle(screen, RED, (300, 300), 110, 20)          pygame.draw.circle(screen, BLUE, (300, 300), 90, 90)          r=90          A = [300, 210]          B = [300+r*math.sin(2*math.pi/5), 210+r-r*math.cos(2*math.pi/5)]          C = [300+r*math.sin(math.pi/5), 300+r*math.cos(math.pi/5)]          D = [300-r*math.sin(math.pi/5), 300+r*math.cos(math.pi/5)]          E = [300-r*math.sin(2*math.pi/5), 210 + r - r * math.cos(2 * math.pi / 5)]          # 圆内正五变形          # pygame.draw.line(screen, GREEN, A, B, 6)          # pygame.draw.line(screen, GREEN, B, C, 6)          # pygame.draw.line(screen, GREEN, C, D, 6)          # pygame.draw.line(screen, GREEN, D, E, 6)          # pygame.draw.line(screen, GREEN, E, A, 6)          # 绘制五角星          pygame.draw.line(screen, WHITE, A, C, 3)          pygame.draw.line(screen, WHITE, C, E, 3)          pygame.draw.line(screen, WHITE, E, B, 3)          pygame.draw.line(screen, WHITE, B, D, 3)          pygame.draw.line(screen, WHITE, D, A, 3)          pygame.display.flip()

最终结果为：

盾牌图

3.作者的话

最后，您如果觉得本公众号对您有帮助，欢迎您多多支持，转发，谢谢！更多小游戏，请关注本公众号小游戏系列！