运行截图

完成时候的截图

游戏设计思想

在600*600的屏幕上，进行拼图划分。（可以是N * M不一定是N * N）
利用鼠标来操作拼图移动

游戏设计

制作一个类：PartPicture用来保存分块图片的信息（分块图像，位置x,y，以及每个图片的id）

class PartPicture:# 初始化一个图片分块，保存图像和图像的位置, id代表原图第几块的位置def __init__(self, img, x, y, id):self.img = imgself.x = xself.y = yself.id = id# get和set方法def getX(self):return self.x;def getY(self):return self.y# 获取图片坐标def getXY(self):return self.x, self.y# 修改图片坐标def setXY(self,x, y):self.x = xself.y = y# 获取iddef getId(self):return self.id

现在这个类还没有完善，等下我们再完善它

pygame游戏的初始信息

设置默认的游戏屏幕大小，拼图划分的数量，以及每块拼图的大小，firstClickCell用来记录以后第一次点击的图片，successFlag用来保存是否游戏成功

SCREEN_WIDTH = 600
SCREEN_HEIGHT = 600
ROW = 0
COL = 0
CELL_WIDTH = 0#SCREEN_WIDTH / COL
CELL_HEIGHT = 0#SCREEN_HEIGHT / ROW
firstClickCell = None
successFlag = False

设置pygame的初始参数

pygame.init()  # 初始化pygame
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))  # 创建了一个窗口 大小是（宽，高）
pygame.display.set_caption('交换式拼图')  # 设置窗口标题

制作开始界面

设置颜色RGB以及设置相关字体

GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
RED = (255, 0, 0)
myfont = pygame.font.Font(None, 70)
textImage1 = myfont.render("simple", True , GREEN)
textImage2 = myfont.render("difficult", True , BLUE)
textImage3 = myfont.render("bow!!!", True , RED)
setInit = False

开始界面选择拼图难度,setInit用来保存是否初始化设置，点击相关难度，然后开始进行初始化设置（拼图的各个大小块,可以是N*M比如3 * 4或者4 * 3）也就是ROW和COL的值

setInit = False
while True:if setInit:breakfor event in pygame.event.get():if event.type == QUIT:exit()  # 接收到退出事件后退出程序elif event.type == MOUSEBUTTONDOWN:b1, b2, b3 = pygame.mouse.get_pressed()if b1 == 1:point_x, point_y = pygame.mouse.get_pos()  # 返回鼠标当前坐标if 100 < point_y < 250:ROW = 4COL = 4setInit = Trueelif 250 < point_y < 400:ROW = 10COL = 10setInit = Trueelif 400 < point_y < 550:ROW = 100COL = 100setInit = Truescreen.fill((0,0,0))screen.blit(textImage1, (200, 100))screen.blit(textImage2, (200, 250))screen.blit(textImage3, (200, 400))pygame.display.update()
CELL_WIDTH = SCREEN_WIDTH / COL
CELL_HEIGHT = SCREEN_HEIGHT / ROW

载入图片和图片分割

imgSrc = pygame.image.load('src.jpg').convert()  # 原图 提高 blit 的速度 convert_alpha相对于convert，保留了图像的Alpha 通道信息，可以认为是保留了透明的部分，实现了透明转换
PictureList = devide(imgSrc)

图片分割的核心代码

# 图片分块的方法
def devide(imgSrc):# 切割原来的图片pictures = []ScPictures = []id = 0 # 给每个分块的图片设置下标for i in range(ROW):for j in range(COL):# 提取部分图片partOfPicutre = imgSrc.subsurface(j * CELL_WIDTH, i * CELL_HEIGHT, CELL_WIDTH, CELL_HEIGHT)# 保存第一组图片tempPicture = PartPicture(partOfPicutre, j * CELL_WIDTH, i * CELL_HEIGHT, id)pictures.append(tempPicture)# 保存第二组图片tempPicture = PartPicture(partOfPicutre, j * CELL_WIDTH, i * CELL_HEIGHT, id)ScPictures.append(tempPicture)id += 1random.shuffle(pictures)# 开始利用第二组图片来打乱原来的图片for i in range(len(pictures)):pictures[i].setXY(ScPictures[i].getX(), ScPictures[i].getY())return pictures # 把打乱的图片返回

我们完善PartPicture类

我们让这个类来操作图片的移动，isPressed（）我们需要判断鼠标点击的第一个图片，并且利用isOver()方法来锁定我们选择的图片。保存好第一个图片以后，firstClickCell就有值了，当我们再次点击的时候，我们就把第一个图片和第二次选择的图片交换（可以是自己），交换完毕后我们再把firstClickCell复原。其中每次操作我们都需要判断是否完成拼图，完成拼图判断是否拼图在原来的位置，我们可以利用id属性获取行和列的块的位置，然后计算出相关坐标，如果有一个不符合拼图就没有完成

class PartPicture:# 初始化一个图片分块，保存图像和图像的位置, id代表原图第几块的位置def __init__(self, img, x, y, id):self.img = imgself.x = xself.y = yself.id = id# 判断是否在图片内def isOver(self):w, h = self.img.get_size()point_x, point_y = pygame.mouse.get_pos()  # 返回鼠标当前坐标in_x = self.x < point_x < self.x + win_y = self.y < point_y < self.y + h#('id,x,y', self.id,':' ,self.getX(), ',',self.getY())#print('id', self.id, in_x, in_y)return in_x and in_y# 检测移动def isPressed(self, pictureList):# print('is_pressed')if self.isOver():b1, b2, b3 = pygame.mouse.get_pressed()if b1 == 1:global firstClickCellglobal successFlagif firstClickCell is None:firstClickCell = selfprint('id为{}的块被点击'.format(firstClickCell.getId()))else:print('交换{}与{}的坐标'.format(firstClickCell.getId(), self.getId()))self.pictureSwitch(firstClickCell, self)if self.isFinish(pictureList):print('成功！')successFlag = Trueelse:successFlag = FalsefirstClickCell = Nonereturn Truereturn False# 判断拼图完成def isFinish(self, pictureList):for cell in  pictureList:nowp_x, nowp_y = cell.getXY()p_x = cell.getId() % COL * CELL_WIDTHp_y = (cell.getId() // COL) * CELL_HEIGHTprint("id{} nowx{}与nowy{}的坐标 本来的坐标x{}y{}".format(cell.getId(), nowp_x, nowp_y, p_x, p_y))if nowp_x != p_x or nowp_y != p_y:return Falsereturn Truedef pictureSwitch(self, cell1, cell2):tempX = cell1.getX()tempY = cell1.getY()cell1.setXY(cell2.getX(), cell2.getY())cell2.setXY(tempX, tempY)def render(self, screen):screen.blit(self.img, (self.x, self.y))

真正的游戏循环

while True:  # 游戏主循环for event in pygame.event.get():if event.type == QUIT:exit()  # 接收到退出事件后退出程序elif event.type == MOUSEBUTTONDOWN:for cell in PictureList:# 检测按键按下，并且交换图片位置if cell.isPressed(PictureList):breakfor partPicture in PictureList:partPicture.render(screen)if not successFlag:# # Sta 绘制分割线for i in range(1, COL):pygame.draw.lines(screen, GREEN, 0, [(i * SCREEN_WIDTH // COL, 0), (i * SCREEN_WIDTH // COL, SCREEN_HEIGHT)], 1)for i in range(1, ROW):pygame.draw.lines(screen, GREEN, 0, [(0, i * SCREEN_HEIGHT // ROW), (SCREEN_WIDTH, i * SCREEN_HEIGHT // ROW)], 1)# End 绘制分割线pygame.display.update()  # 刷新一下画面

完整代码

图像为src,600*600大小

import random
from sys import exit  # 使用sys模块的exit函数来退出游戏
import pygame
from pygame.locals import *  # 导入一些常用的函数和常量SCREEN_WIDTH = 600
SCREEN_HEIGHT = 600
ROW = 100
COL = 100
CELL_WIDTH = 0#SCREEN_WIDTH / COL
CELL_HEIGHT = 0#SCREEN_HEIGHT / ROW
firstClickCell = Noneclass PartPicture:# 初始化一个图片分块，保存图像和图像的位置, id代表原图第几块的位置def __init__(self, img, x, y, id):self.img = imgself.x = xself.y = yself.id = id# 判断是否在图片内def isOver(self):w, h = self.img.get_size()point_x, point_y = pygame.mouse.get_pos()  # 返回鼠标当前坐标in_x = self.x < point_x < self.x + win_y = self.y < point_y < self.y + h#('id,x,y', self.id,':' ,self.getX(), ',',self.getY())#print('id', self.id, in_x, in_y)return in_x and in_y# 检测移动def isPressed(self, pictureList):# print('is_pressed')if self.isOver():b1, b2, b3 = pygame.mouse.get_pressed()if b1 == 1:global firstClickCellglobal successFlagif firstClickCell is None:firstClickCell = selfprint('id为{}的块被点击'.format(firstClickCell.getId()))else:print('交换{}与{}的坐标'.format(firstClickCell.getId(), self.getId()))self.pictureSwitch(firstClickCell, self)if self.isFinish(pictureList):print('成功！')successFlag = Trueelse:successFlag = FalsefirstClickCell = Nonereturn Truereturn False# 判断拼图完成def isFinish(self, pictureList):for cell in  pictureList:nowp_x, nowp_y = cell.getXY()p_x = cell.getId() % COL * CELL_WIDTHp_y = (cell.getId() // COL) * CELL_HEIGHTprint("id{} nowx{}与nowy{}的坐标 本来的坐标x{}y{}".format(cell.getId(), nowp_x, nowp_y, p_x, p_y))if nowp_x != p_x or nowp_y != p_y:return Falsereturn Truedef pictureSwitch(self, cell1, cell2):tempX = cell1.getX()tempY = cell1.getY()cell1.setXY(cell2.getX(), cell2.getY())cell2.setXY(tempX, tempY)def render(self, screen):screen.blit(self.img, (self.x, self.y))# get和set方法def getX(self):return self.x;def getY(self):return self.y# 获取图片坐标def getXY(self):return self.x, self.y# 修改图片坐标def setXY(self,x, y):self.x = xself.y = y# 获取iddef getId(self):return self.id
# 图片分块的方法
def devide(imgSrc):# 切割原来的图片pictures = []ScPictures = []id = 0 # 给每个分块的图片设置下标for i in range(ROW):for j in range(COL):# 提取部分图片partOfPicutre = imgSrc.subsurface(j * CELL_WIDTH, i * CELL_HEIGHT, CELL_WIDTH, CELL_HEIGHT)# 保存第一组图片tempPicture = PartPicture(partOfPicutre, j * CELL_WIDTH, i * CELL_HEIGHT, id)pictures.append(tempPicture)# 保存第二组图片tempPicture = PartPicture(partOfPicutre, j * CELL_WIDTH, i * CELL_HEIGHT, id)ScPictures.append(tempPicture)id += 1random.shuffle(pictures)# 开始利用第二组图片来打乱原来的图片for i in range(len(pictures)):pictures[i].setXY(ScPictures[i].getX(), ScPictures[i].getY())return pictures # 把打乱的图片返回pygame.init()  # 初始化pygame
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))  # 创建了一个窗口 大小是（宽，高）
pygame.display.set_caption('交换式拼图')  # 设置窗口标题
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
RED = (255, 0, 0)
myfont = pygame.font.Font(None, 70)
textImage1 = myfont.render("simple", True , GREEN)
textImage2 = myfont.render("difficult", True , BLUE)
textImage3 = myfont.render("bow!!!", True , RED)
setInit = False
while True:if setInit:breakfor event in pygame.event.get():if event.type == QUIT:exit()  # 接收到退出事件后退出程序elif event.type == MOUSEBUTTONDOWN:b1, b2, b3 = pygame.mouse.get_pressed()if b1 == 1:point_x, point_y = pygame.mouse.get_pos()  # 返回鼠标当前坐标if 100 < point_y < 250:ROW = 4COL = 4setInit = Trueelif 250 < point_y < 400:ROW = 10COL = 10setInit = Trueelif 400 < point_y < 550:ROW = 100COL = 100setInit = Truescreen.fill((0,0,0))screen.blit(textImage1, (200, 100))screen.blit(textImage2, (200, 250))screen.blit(textImage3, (200, 400))pygame.display.update()
CELL_WIDTH = SCREEN_WIDTH / COL
CELL_HEIGHT = SCREEN_HEIGHT / ROW
imgSrc = pygame.image.load('src.jpg').convert()  # 原图 提高 blit 的速度 convert_alpha相对于convert，保留了图像的Alpha 通道信息，可以认为是保留了透明的部分，实现了透明转换
PictureList = devide(imgSrc)# 标记是否游戏成功
successFlag = Falsewhile True:  # 游戏主循环for event in pygame.event.get():if event.type == QUIT:exit()  # 接收到退出事件后退出程序elif event.type == MOUSEBUTTONDOWN:for cell in PictureList:# 检测按键按下，并且交换图片位置if cell.isPressed(PictureList):breakfor partPicture in PictureList:partPicture.render(screen)if not successFlag:# # Sta 绘制分割线for i in range(1, COL):pygame.draw.lines(screen, GREEN, 0, [(i * SCREEN_WIDTH // COL, 0), (i * SCREEN_WIDTH // COL, SCREEN_HEIGHT)], 1)for i in range(1, ROW):pygame.draw.lines(screen, GREEN, 0, [(0, i * SCREEN_HEIGHT // ROW), (SCREEN_WIDTH, i * SCREEN_HEIGHT // ROW)], 1)# End 绘制分割线pygame.display.update()  # 刷新一下画面

附图片

pygame交换式拼图设计相关推荐

沉浸式ui设计_有助于沉浸的视频游戏UI —武器轮
沉浸式ui设计 Many action-adventure games rely on the feeling of thrills via bullets, fire, grenade, more ...
响应式网页设计_响应式网页设计中的常用技术
响应式网页设计在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
交换式路由器与路由式交换机
现在路由器和交换机之间的区别也越来越模糊,多层路由器与交换机都可以同时实现交换和路由的功能,它们之间还有不同吗?各自特点何在?如何更好地根据应用需求进行选择? 一.传统的交换机和路由器普通交 ...
通过响应式web设计，使本站支持手机浏览
2019独角兽企业重金招聘Python工程师标准>>> 2014-01-28 14:49:14 现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页 ...
《响应式Web设计：HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...
十大响应式Web设计框架
2019独角兽企业重金招聘Python工程师标准>>> 本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework Gumby 2是建立在Sass基 ...
跨终端响应式页面设计入门
跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里 ...
《响应式Web设计全流程解析》一1.2　静态设计稿舒适区
本节书摘来异步社区<响应式Web设计全流程解析>一书中的第1章,第1.2节,作者: [美]Stephen Hay 译者: 余果 , 等责编: 赵轩,更多章节内容可以访问云栖社区" ...
HTML5和CSS3响应式WEB设计指南译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

pygame交换式拼图设计