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 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

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

Introduction to multitasking with Python #003 gevent (2020 tutorial)

-
Image
  1 . Review of Iterator In python, we could achieve multitasking through another way by using gevent module. Howerver before introducing gevent, we have to review the concept of iterator. You may have used python for loop millions of times: for i in Iterable:     print(i) We have learned several iterable objects, str, list, tuple, dict and set. Those iterable objects or sequences could be used with the for loop. And we take that for granted. But look at the following example: >>> for i in 100: print(i) Traceback (most recent call last):   File "<pyshell#2>", line 1, in <module>     for i in 100: TypeError: 'int' object is not iterable >>>   Why cannot int type be used with for loop in Python and how could you make an object iterable and be used with for loop? Now, let's make an iterable object that could be used with for loop. We could use isinstance() built-in method to check whether an object is iterable or not. ...
Read more