add slize puzzle game tutorial

Author: x4nth055

README.md

@@ -287,6 +287,7 @@ This is a repository of all the tutorials of [The Python Code](https://www.thepy
     - [How to Build a Tic Tac Toe Game in Python](https://www.thepythoncode.com/article/make-a-tic-tac-toe-game-pygame-in-python). ([code](gui-programming/tictactoe-game))
     - [How to Make a Checkers Game with Pygame in Python](https://www.thepythoncode.com/article/make-a-checkers-game-with-pygame-in-python). ([code](gui-programming/checkers-game))
     - [How to Make a Snake Game in Python](https://www.thepythoncode.com/article/make-a-snake-game-with-pygame-in-python). ([code](gui-programming/snake-game))
+    - [How to Create a Slide Puzzle Game in Python](https://www.thepythoncode.com/article/slide-puzzle-game-in-python). ([code](gui-programming/slide-puzzle))
 
 
 For any feedback, please consider pulling requests.

gui-programming/slide-puzzle/README.md

@@ -0,0 +1 @@
+# [How to Create a Slide Puzzle Game in Python](https://www.thepythoncode.com/article/slide-puzzle-game-in-python)

gui-programming/slide-puzzle/cell.py

@@ -0,0 +1,29 @@
+import pygame
+
+class Cell:
+	def __init__(self, row, col, cell_size, c_id):
+		self.row = row
+		self.col = col
+		self.cell_size = cell_size
+		self.width = self.cell_size[0]
+		self.height = self.cell_size[1]
+		self.abs_x = row * self.width
+		self.abs_y = col * self.height
+
+		self.c_id = c_id
+
+		self.rect = pygame.Rect(
+			self.abs_x,
+			self.abs_y,
+			self.width,
+			self.height
+		)
+
+		self.occupying_piece = None
+
+	def draw(self, display):
+		pygame.draw.rect(display, (0,0,0), self.rect)
+		if self.occupying_piece != None and self.occupying_piece.p_id != 8:
+			centering_rect = self.occupying_piece.img.get_rect()
+			centering_rect.center = self.rect.center
+			display.blit(self.occupying_piece.img, centering_rect.topleft)

gui-programming/slide-puzzle/frame.py

@@ -0,0 +1,74 @@
+import pygame
+import random
+
+from cell import Cell
+from piece import Piece
+
+class Frame:
+	def __init__(self, frame_size):
+		self.grid_size = 3
+		self.cell_width = frame_size // self.grid_size
+		self.cell_height = frame_size // self.grid_size
+		self.cell_size = (self.cell_width, self.cell_height)
+		
+		self.grid = self._generate_cell()
+		self.pieces = self._generate_piece()
+
+		self._setup()
+
+	def _generate_cell(self):
+		cells = []
+		c_id = 0
+		for col in range(self.grid_size):
+			for row in range(self.grid_size):
+				cells.append(Cell(row, col, self.cell_size, c_id))
+				c_id += 1
+		return cells
+
+	def _generate_piece(self):
+		puzzle_pieces = []
+		p_id = 0
+		for col in range(self.grid_size):
+			for row in range(self.grid_size):
+				puzzle_pieces.append(Piece(self.cell_size, p_id))
+				p_id += 1
+		return puzzle_pieces
+
+	def _setup(self):
+		for cell in self.grid:
+			piece_choice = random.choice(self.pieces)
+			cell.occupying_piece = piece_choice
+			self.pieces.remove(piece_choice)
+
+	def _get_cell_from_id(self, given_id):
+		for cell in self.grid:
+			if cell.c_id == given_id:
+				return cell
+
+	def _is_move_valid(self, click):
+		moves = {
+			79: 1,
+			80: -1,
+			81: 3,
+			82: -3
+		}
+		for cell in self.grid:
+			move_id = cell.c_id + moves[click.scancode]
+			if move_id >= 0 and move_id <= 8:
+				new_cell = self._get_cell_from_id(move_id)
+				if new_cell.occupying_piece.img == None:
+					return (cell, new_cell)
+			else:
+				continue
+
+	def handle_click(self, click):
+		c = self._is_move_valid(click)
+		try:
+			# print(c[0].c_id, c[1].c_id)
+			c[0].occupying_piece, c[1].occupying_piece = c[1].occupying_piece, c[0].occupying_piece
+		except:
+			return False
+
+	def draw(self, display):
+		for cell in self.grid:
+			cell.draw(display)

gui-programming/slide-puzzle/game.py

@@ -0,0 +1,32 @@
+import pygame
+
+pygame.font.init()
+
+class Game:
+	def __init__(self):
+		self.font = pygame.font.SysFont("Courier New", 35)
+		self.background_color = (255, 174, 66)
+		self.message_color = (17, 53, 165)
+
+	def arrow_key_clicked(self, click):
+		try:
+			if click.key == pygame.K_LEFT or click.key == pygame.K_RIGHT or click.key == pygame.K_UP or click.key == pygame.K_DOWN:
+				return(True)
+		except:
+			return(False)
+
+	def is_game_over(self, frame):
+		for cell in frame.grid:
+			piece_id = cell.occupying_piece.p_id
+			# print(piece_id, cell.c_id)
+			if cell.c_id == piece_id:
+				is_arranged = True
+			else:
+				is_arranged = False
+				break
+		return is_arranged
+
+	def message(self, screen):
+		screen.fill(self.background_color, (5, 460, 440, 35))
+		instructions = self.font.render('You Win!!', True, self.message_color)
+		screen.blit(instructions,(125,460))

gui-programming/slide-puzzle/main.py

@@ -0,0 +1,59 @@
+import pygame
+
+from frame import Frame
+from game import Game
+
+pygame.init()
+pygame.font.init()
+
+class Puzzle:
+	def __init__(self, screen):
+		self.screen = screen
+		self.running = True
+		self.FPS = pygame.time.Clock()
+		self.is_arranged = False
+		self.font = pygame.font.SysFont("Courier New", 33)
+		self.background_color = (255, 174, 66)
+		self.message_color = (17, 53, 165)
+
+	def _draw(self, frame):
+		frame.draw(self.screen)
+		pygame.display.update()
+
+	def _instruction(self):
+		instructions = self.font.render('Use Arrow Keys to Move', True, self.message_color)
+		screen.blit(instructions,(5,460))
+
+	def main(self, frame_size):
+		self.screen.fill("white")
+		frame = Frame(frame_size)
+		game = Game()
+		self._instruction()
+		while self.running:
+
+			if game.is_game_over(frame):
+				self.is_arranged = True
+				game.message(self.screen)
+
+			for event in pygame.event.get():
+				if event.type == pygame.QUIT:
+					self.running = False
+
+				if event.type == pygame.KEYDOWN:
+					if not self.is_arranged:
+						if game.arrow_key_clicked(event):
+							frame.handle_click(event)
+
+			self._draw(frame)
+			self.FPS.tick(30)
+	
+		pygame.quit()
+
+
+if __name__ == "__main__":
+	window_size = (450, 500)
+	screen = pygame.display.set_mode(window_size)
+	pygame.display.set_caption("Slide Puzzle")
+
+	game = Puzzle(screen)
+	game.main(window_size[0])

gui-programming/slide-puzzle/piece.py

@@ -0,0 +1,13 @@
+import pygame
+
+class Piece:
+	def __init__(self, piece_size, p_id):
+		self.piece_size = piece_size
+		self.p_id = p_id
+
+		if self.p_id != 8:
+			img_path = f'puzz-pieces/{self.p_id}.jpg'
+			self.img = pygame.image.load(img_path)
+			self.img = pygame.transform.scale(self.img, self.piece_size)
+		else:
+			self.img = None