How to create a memory puzzle game with Python and Pygame (#003)

-

 


Next, we need to draw our board on the main screen. For this tutorial, I am gonna use a simple green quare (50 * 50 pixel) to represent a covered pattern. 

As you can see from the picture above, there are 36 green squares and each square is separated by a distance of 10 pixels. So in order to draw those 36 squares on the main screen, we need to knwo the top-left corner coordinates for each of 36 squares. The syntax for drawing a square is:

pygame.draw.rect(
                  screen, # surface to draw upon
                  (0,255,0), # square fill color 'green'
                  (x,y, 50,50))# square rect

screen:     the surface on which the green square wil be drawn

(0,255,0):  the 'green' color to fill the square 

(x,y,50,50): x and y are coordinates of the top-left corner of the green square, the two 50s represent the width and height of the square.


For 36 squares, we need to calculate all the top-left corner coordinates and store them into a list of lists coresponding with the data sturcture of the board we created last tutorial. 

def initialize_drawing_pos(start_p):
      # create the drawing coordinates data structure
      # coresponding to the game board
      # the starting drawing pos is (145, 65)
      # the square is a 50*50 pixels
      # the space between each boxes is 10 pixels
      starting_pos = start_p
      step = 60
      square_pos = []
      for i in range(6):
            square_pos.append([])
            for j in range(6):
                  square_pos[i].append(
                        (starting_pos[0]+60*j, starting_pos[1]+60*i))
      return square_pos

We define initialize_drawing_pos function, and the start_p parameter will take the top-left corner coordinates of the top-left square. In our tutorial, it is (145,65).

The nested for loops are similar to the board() function. We just use some math tricks and i and j values to append all the coordinates to the square_pos list.

So let's test the code:

square_pos = initialize_drawing_pos((145,65))
print(square_pos)

The output should be:

[[(145, 65), (205, 65), (265, 65), (325, 65), (385, 65), (445, 65)], [(145, 125), (205, 125), (265, 125), (325, 125), (385, 125), (445, 125)], [(145, 185), (205, 185), (265, 185), (325, 185), (385, 185), (445, 185)], [(145, 245), (205, 245), (265, 245), (325, 245), (385, 245), (445, 245)], [(145, 305), (205, 305), (265, 305), (325, 305), (385, 305), (445, 305)], [(145, 365), (205, 365), (265, 365), (325, 365), (385, 365), (445, 365)]]

It is a long list, let's modify the output:

square_pos = initialize_drawing_pos((145,65))
for i in range(6):
      for j in range(6):
            print(square_pos[i][j], end=' ')
      print()

The output should be:

(145, 65) (205, 65) (265, 65) (325, 65) (385, 65) (445, 65) 
(145, 125) (205, 125) (265, 125) (325, 125) (385, 125) (445, 125) 
(145, 185) (205, 185) (265, 185) (325, 185) (385, 185) (445, 185) 
(145, 245) (205, 245) (265, 245) (325, 245) (385, 245) (445, 245) 
(145, 305) (205, 305) (265, 305) (325, 305) (385, 305) (445, 305) 
(145, 365) (205, 365) (265, 365) (325, 365) (385, 365) (445, 365)

So now, we have our desired list of all coordinates for drawing. 

Before we move to next tutorial, we need to modify the coordinates a little bit. Just look at the following picture.


In order to draw the green square, we really need the top left corner coordinates, such as (145,65). But later we are gonna use its center point (170, 90) to calculate the distance between mouse click point to the center point. So for that purpose, we could modify our code to store square center points instead. Because the center point has a offset of 25 pixels with the top-left corner, so it is easy to modify.


def initialize_drawing_pos(start_p):
      # create the drawing coordinates data structure
      # coresponding to the game board
      # the starting drawing pos is (145, 65)
      # the square is a 50*50 pixels
      # the space between each boxes is 10 pixels
      starting_pos = start_p
      step = 60
      square_pos = []
      for i in range(6):
            square_pos.append([])
            for j in range(6):
                  square_pos[i].append(
                        (starting_pos[0]+25+60*j, starting_pos[1]+25+60*i))
      return square_pos

We only need to modify the following code:

square_pos[i].append((starting_pos[0]+25+60*j, starting_pos[1]+25+60*i))

So let's print the ourput again.

(170, 90) (230, 90) (290, 90) (350, 90) (410, 90) (470, 90) 
(170, 150) (230, 150) (290, 150) (350, 150) (410, 150) (470, 150) 
(170, 210) (230, 210) (290, 210) (350, 210) (410, 210) (470, 210) 
(170, 270) (230, 270) (290, 270) (350, 270) (410, 270) (470, 270) 
(170, 330) (230, 330) (290, 330) (350, 330) (410, 330) (470, 330) 
(170, 390) (230, 390) (290, 390) (350, 390) (410, 390) (470, 390)

Well, we have finished our coordinates issue. In the next tutorial, we are gonna draw the green squares based on those values.

Comments

Post a Comment

Popular posts from this blog

How to write a slide puzzle game with Python and Pygame (2020 tutorial)

-
Image
Table of Contents Preparation Introduction Import modules and define contants Create the main game screen Creae the data structure of the board Let's draw the tiles The game logic Define the missing functions Preparation In this tutorial, we are gonna use Python 3.8 and Pygame v1.96.  For the installation of Python and Pygame, please follow the documents found on each webiste. Python: https://www.python.org/ Pygame: https://www.pygame.org/ Introduction As you can see from the picture above, we create a board with 15 green tiles and one white tile which represent a empty slot. Our gaol is to place all the 15 green tiles back into its sorted order, namely: A B C D E F G H I J K L  M N O If we click on the tile "F", the tile will slide down south. And if all the tiles are back into their sorted order, you won the game and quit the game. That's pretty much the gist of the game, later you could add other features to the game. Import modules and define contatnts impor
Read more

How to create a memory puzzle game with Python and Pygame (#005)

-
First look at the following code: import time # create Font object text_font = pygame . font . SysFont( 'arial' , 50 ) # create a list that stores two pos that going to compare to each other pos_to_compare_list = [] # create a list that stores all the pos that matched pos_matched = [] # set backgroud color to white while True : for event in pygame . event . get(): if event . type == QUIT: pygame . quit() sys . exit() elif event . type == MOUSEBUTTONDOWN: (x,y) = pygame . mouse . get_pos() pos = check_click(x,y, square_pos) if pos: text_surface = text_font . render(board[pos[ 0 ]][pos[ 1 ]], True , WHITE) if len (pos_to_compare_list) < 2 : if pos not in pos_to_compare_list: pos_to_compare_list . append(pos)
Read more

Introduction to multitasking with Python #001 multithreading (2020 tutorial)

-
Image
1. What is multitasking? So far, we have written so many programs with python. All the instructions inside a program run sequentially one by one. Let's look at an simple example: # multithreading_example01.py # basci program without using threading import time def sing (): for i in range ( 5 ): print ( 'Singing...' ) time . sleep( 1 ) def dance (): for i in range ( 5 ): print ( 'Dancing...' ) time . sleep( 1 ) def main (): # singing a song sing() # dancing dance() if __name__ == '__main__' : main()  After running this program, after ten seconds the program exits. But if we want to dance and sing at the same time intead of doing one after another, what we could do with the code? In python, we could use the threading module and run both sing() and dance functions at the same time. Here is how we can do it: # multithreading_example01.py
Read more