小游戏系列之五环盾牌

小游戏系列之五环盾牌

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.作者的话

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

本文分享自微信公众号 - 光城(guangcity)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券