Sliding puzzle games with Pygame
Flex your coding muscles with Calvin Robinson, who reveals how to create a retro sliding puzzle game in Python.
Calvin Robinson talks us through creating a retro sliding puzzle game in Python and the Pygame gaming library.
For this game-coding outing we’re taking a look at implementing a classic sliding tile puzzle game, also known as the sliding block game. Usually a two dimensional video game based on a retro board game where tiles are placed on a block in a mixed fashion, the player has to sort the tiles into an order. This may be words, pictures or numbers. The board contains one blank space, enabling the player to move one tile at a time. Despite looking so simple, they can take quite a while to complete.
We’re looking at the source code by Al Sweigart reproduced with permission and available from https:// inventwithpython.com/pygame/chapter4.html this version of the sliding puzzle consists of 16 spaces in a four by four grid, including one blank and 15 sequential numbers; it’s probably the most common variant of sliding tiles games. Our player will have the ability to click tiles, and provided there’s an empty space next to said tile, it will shift up, down, left or right into the empty space. At the end of the game, in order to win, the player must have one to 15 tiles sorted in order.
We’ll need to make sure we have Python3 and Pygame installed. If you’re running a Debian-based distro, launch a terminal window and type sudo apt-get install python3 pip3 . Then when it’s installed run pip3 install pygame and you’ll be good to go. With that done, you’ll then need to either launch the Python IDLE editor, or your favourite text-based editor. If using a text editor, save the new document as slidepuzzle.py; it can then be run from the terminal with python3 slidepuzzle.py provided you’re in the right directory.
If you prefer to use Python’s inbuilt IDLE, remember to press File>New File before you begin coding – so many times this author has witnessed people typing directly into the Shell window instead of creating a new Edit window. You can only save and edit your code if it’s been written in the Edit window. Shell is for on-the-fly coding only. You can tell Python to always launch an Edit window on launch, instead of defaulting with a Shell window, by going to Options>Settings>General, and ticking Open Edit Window next to At Startup. To save and test your game at any point, press F5.
No need to reinvent the wheel
Pygame is a fantastic resources for these types of projects; the Pygame module offers a host of classes we can tap into to do seemingly simple things like drawing shapes on-screen, without having to get into the nitty gritty of vector graphics. So, let’s start off by importing the Pygame libraries we need:
import pygame, sys, random from pygame.locals import *
We’ve got quite a number of constants to declare and initialise at the start, see the code for the full list:
BOARDWIDTH = 4
BOARDHEIGHT = 4
TILESIZE = 80
WINDOWWIDTH = 640 WINDOWHEIGHT = 480
BLACK = ( 0, 0, 0)
WHITE = (255, 255, 255) BRIGHTBLUE = ( 0, 50,255) DARKTURQUOISE = ( 3, 54, 73)
GREEN = ( 0,204, 0)
BGCOLOR = DARKTURQUOISE TILECOLOR = GREEN
TEXTCOLOR = WHITE BORDERCOLOR = BRIGHTBLUE
XMARGIN = int((WINDOWWIDTH - (TILESIZE *
BOARDWIDTH + (BOARDWIDTH - 1))) / 2)
YMARGIN = int((WINDOWHEIGHT - (TILESIZE *
BOARDHEIGHT + (BOARDHEIGHT - 1))) / 2)
We’ve set the board width and height to a 4x4 grid, and the screen resolution at 640x480. The framerate is capped at 30fps. We’ve also defined a number of colours (white, bright blue, dark turquoise and green) using RGB values. RGB count the amount of red, green and blue light in a pixel, with 255 being full and 0 being none. Therefore, 0,0,0 would be black and 255,255,255 would be white, displaying the full spectrum of colour. We’ve also set our font size and the directional values.
We’ll need a main() function to create the handling of our game window, clock/timer, fonts and more. We’ll declare some local variables for these elements: def main():
global FPSCLOCK, DISPLAYSURF, BASICFONT, RESET_SURF, RESET_RECT, NEW_SURF, NEW_RECT, SOLVE_SURF, SOLVE_RECT pygame.init()
FPSCLOCK = pygame.time.Clock() DISPLAYSURF = pygame.display.set_ mode((WINDOWWIDTH, WINDOWHEIGHT)) pygame.display.set_caption('Slide Puzzle') BASICFONT = pygame.font.Font('freesansbold.ttf’,
BASICFONTSIZE)
RESET_SURF, RESET_RECT = makeText('Reset’, TEXTCOLOR, TILECOLOR, WINDOWWIDTH - 120, WINDOWHEIGHT - 90)
NEW_SURF, NEW_RECT = makeText('New Game’, TEXTCOLOR, TILECOLOR, WINDOWWIDTH - 120, WINDOWHEIGHT - 60)
SOLVE_SURF, SOLVE_RECT = makeText('Solve’, TEXTCOLOR, TILECOLOR, WINDOWWIDTH - 120, WINDOWHEIGHT - 30) mainBoard, solutionSeq = generateNewPuzzle(80) SOLVEDBOARD = getStartingBoard() allMoves = []
And now to set up the main game loop with our start message and our end game message, as well as instructions to draw the board itself and the direction tiles should slide into:
while True: slideTo = None msg = ‘Click tile or press arrow keys to slide.’ if mainBoard == SOLVEDBOARD:
msg = ‘Solved!’ drawBoard(mainBoard, msg) checkForQuit()
Continue this loop with some conditional IF statements, with an event handling loop:
for event in pygame.event.get(): if event.type == MOUSEBUTTONUP:
spotx, spoty = getSpotClicked(mainBoard, event.pos[0], event.pos[1]) if (spotx, spoty) == (None, None): if RESET_RECT.collidepoint(event.pos): resetAnimation(mainBoard, allMoves) allMoves = [] elif NEW_RECT.collidepoint(event.pos): mainBoard, solutionSeq = generateNewPuzzle(80) allMoves = [] elif SOLVE_RECT.collidepoint(event.pos): resetAnimation(mainBoard, solutionSeq + allMoves) allMoves = [] else: blankx, blanky = getBlankPosition(mainBoard) if spotx == blankx + 1 and spoty == blanky:
slideTo = LEFT elif spotx == blankx - 1 and spoty == blanky:
slideTo = RIGHT elif spotx == blankx and spoty == blanky + 1: slideTo = UP elif spotx == blankx and spoty == blanky - 1: slideTo = DOWN elif event.type == KEYUP: if event.key in (K_LEFT, K_a) and isValidMove(mainBoard, LEFT): slideTo = LEFT elif event.key in (K_RIGHT, K_d) and isValidMove(mainBoard, RIGHT): slideTo = RIGHT elif event.key in (K_UP, K_w) and isValidMove(mainBoard, UP): slideTo = UP elif event.key in (K_DOWN, K_s) and isValidMove(mainBoard, DOWN):
slideTo = DOWN
We’re checking if the player has clicked one of the option buttons for a new game, to reset the game, or to solve the game. We’re also checking if the tile is next to a black space. To solve the puzzle, we’re not using super smart artificial intelligence. Instead, we’re making our program take note of every tile it creates when inserting them at random, and then using that pattern in reverse to solve the puzzle. Every up becomes a down, and every left move becomes a right, until eventually the board is back in sequential order. We use our array
allMoves = [] to store these values.
Afterwards, we’re checking to see if the player has clicked a tile to move it up, down, left or right. Following that, we’ll need to slide said tile, finish our loop with the following code:
if slideTo:
slideAnimation(mainBoard, slideTo, ‘Click tile or press arrow keys to slide.’, 8) makeMove(mainBoard, slideTo) allMoves.append(slideTo) pygame.display.update() FPSCLOCK.tick(FPS)
This will show the slide animation and take note of any slides. We then update our window, in typical Pygame fashion.
We’ll want a way for our players to quit the game easily and efficiently. Python can get a little frustrated if a quit command isn’t passed through Pygame:
def terminate(): pygame.quit() sys.exit() def checkForQuit(): for event in pygame.event.get(QUIT):
terminate() for event in pygame.event.get(KEYUP): if event.key == K_ESCAPE:
terminate() pygame.event.post(event)
With these two functions we’re checking for an escape or exit command and quitting our game.
On the other end of the spectrum, we’ll need a command to start a new game:
def getStartingBoard(): counter = 1 board = [] for x in range(BOARDWIDTH): column = [] for y in range(BOARDHEIGHT): column.append(counter) counter += BOARDWIDTH board.append(column) counter -= BOARDWIDTH * (BOARDHEIGHT - 1) +
BOARDWIDTH - 1 board[BOARDWIDTH-1][BOARDHEIGHT-1] =
BLANK return board def getBlankPosition(board): for x in range(BOARDWIDTH): for y in range(BOARDHEIGHT): if board[x][y] == BLANK: return (x, y)
This looks slightly more complicated than our other functions so far, but essentially it’s setting up the board with the correct height and width. getBlankPosition will store the location of our blank space. This means that if our player clicks a tile next to the blank space, that tile will be able to move into it with the slideTo method. To move our tiles we’ll need a function – we’ll just show the UP and DOWN conditions here: def makeMove(board, move): blankx, blanky = getBlankPosition(board) if move == UP: board[blankx][blanky], board[blankx][blanky + 1] = board[blankx][blanky + 1], board[blankx][blanky] elif move == DOWN: board[blankx][blanky], board[blankx][blanky - 1] = board[blankx][blanky - 1], board[blankx][blanky] Before we use the makeMove function, it’s important that we check if the move is valid. def isValidMove(board, move): blankx, blanky = getBlankPosition(board) return (move == UP and blanky != len(board[0]) - 1) or \ (move == DOWN and blanky != 0) or \
(move == LEFT and blankx != len(board) - 1) or \ (move == RIGHT and blankx != 0)
To set up the board with random tiles, we’ll need to create a getRandomMove function.
def getRandomMove(board, lastMove=None): validMoves = [UP, DOWN, LEFT, RIGHT] if lastMove == UP or not isValidMove(board, DOWN):
validMoves.remove(DOWN)
and repeat for additional directions:
return random.choice(validMoves)
Instead of just using random.choice() , we’ve developed our own method so that we don’t end up with the same random move two times in a row, or worse, moving a tile in one direction and then randomly moving it back in the opposite direction. Our method makes these considerations.
On the grid
When we’re happy moving individual tiles around, we’ll need to make sure that we do so within the grid. Let’s start by creating a function to convert pixels into grid coordinates:
def getLeftTopOfTile(tileX, tileY): left = XMARGIN + (tileX * TILESIZE) + (tileX - 1) top = YMARGIN + (tileY * TILESIZE) + (tileY - 1) return (left, top)
We’ll need to do a similar thing with clicks, in assigning clicks to the tile connected to the pixel that was actually clicked:
def getSpotClicked(board, x, y): for tileX in range(len(board)): for tileY in range(len(board[0])): left, top = getLeftTopOfTile(tileX, tileY) tileRect = pygame.Rect(left, top, TILESIZE,
TILESIZE) if tileRect.collidepoint(x, y): return (tileX, tileY) return (None, None)
Let’s draw our tiles, text and the actual board: def drawTile(tilex, tiley, number, adjx=0, adjy=0): left, top = getLeftTopOfTile(tilex, tiley) pygame.draw.rect(DISPLAYSURF, TILECOLOR, (left + adjx, top + adjy, TILESIZE, TILESIZE)) textSurf = BASICFONT.render(str(number), True,
TEXTCOLOR) textRect = textSurf.get_rect() textRect.center = left + int(TILESIZE / 2) + adjx, top + int(TILESIZE / 2) + adjy DISPLAYSURF.blit(textSurf, textRect)
Each numbered tile will be drawn to our specification – colours and fonts were previously defined. Using
Pygame we’ll create a surface and a rectangle to display text on the screen: def makeText(text, color, bgcolor, top, left): textSurf = BASICFONT.render(text, True, color, bgcolor) textRect = textSurf.get_rect() textRect.topleft = (top, left) return (textSurf, textRect)
New boards are painted over anything displayed: def drawBoard(board, message): DISPLAYSURF.fill(BGCOLOR) if message:
textSurf, textRect = makeText(message,
MESSAGECOLOR, BGCOLOR, 5, 5) DISPLAYSURF.blit(textSurf, textRect) for tilex in range(len(board)): for tiley in range(len(board[0])): if board[tilex][tiley]: drawTile(tilex, tiley, board[tilex][tiley]) left, top = getLeftTopOfTile(0, 0) width = BOARDWIDTH * TILESIZE height = BOARDHEIGHT * TILESIZE pygame.draw.rect(DISPLAYSURF, BORDERCOLOR, (left - 5, top - 5, width + 11, height + 11), 4) DISPLAYSURF.blit(RESET_SURF, RESET_RECT) DISPLAYSURF.blit(NEW_SURF, NEW_RECT) DISPLAYSURF.blit(SOLVE_SURF, SOLVE_RECT) Using getBlankPosition() we can slide our tiles into the blank space with a nice little animation. This snippet only shows the code for dealing with UP and DOWN: def slideAnimation(board, direction, message, animationSpeed): blankx, blanky = getBlankPosition(board) if direction == UP: movex = blankx movey = blanky + 1 elif direction == DOWN: movex = blankx movey = blanky - 1 and repeat for additional directions: drawBoard(board, message) baseSurf = DISPLAYSURF.copy() moveLeft, moveTop = getLeftTopOfTile(movex, movey) pygame.draw.rect(baseSurf, BGCOLOR, (moveLeft, moveTop, TILESIZE, TILESIZE)) for i in range(0, TILESIZE, animationSpeed): checkForQuit() DISPLAYSURF.blit(baseSurf, (0, 0)) if direction == UP: drawTile(movex, movey, board[movex][movey], 0, -i) if direction == DOWN: drawTile(movex, movey, board[movex][movey], 0, i)
and repeat for additional directions:
pygame.display.update() FPSCLOCK.tick(FPS)
Again, we’re not checking if the move is valid here because we have a function for that already. We simply prepare the baseSurface and draw a black space over the moving tile. We’ll need a way to recreate the puzzle or reset the game:
def generateNewPuzzle(numSlides): sequence = [] board = getStartingBoard() drawBoard(board, ‘') pygame.display.update() pygame.time.wait(500) lastMove = None for i in range(numSlides): move = getRandomMove(board, lastMove) slideAnimation(board, move, ‘Generating new puzzle...’, animationSpeed=int(TILESIZE / 3)) makeMove(board, move) sequence.append(move) lastMove = move return (board, sequence)
Here we’re making numSlides the number of moves and then animating them. We’ll need a way to reset our animations. To do this, we’ll reverse allMoves :
def resetAnimation(board, allMoves): revAllMoves = allMoves[:] revAllMoves.reverse() for move in revAllMoves: if move == UP:
oppositeMove = DOWN and repeat for additional directions:
slideAnimation(board, oppositeMove, ‘’, animationSpeed=int(TILESIZE / 2)) makeMove(board, oppositeMove)
To wrap up, instruct our program to run our main() function on launch, and we’re good to go! if __name__ == ‘__main__': main()
Hit F5 if you’re using Python IDLE, or python3 slidepuzzle.py in terminal, otherwise, and you should now have a fully functional slide tile puzzle game!