No replies to this topic

[spyder]

Now that we have our basics of clicking and a basic screen, let's display some characters!
Right now we have:

import pygame

import sys

import time

from pygame import *

pygame.init()

ttt = pygame.display.set_mode((300,325))

pygame.display.set_caption('Tic-Tac-Toe')

# X will go first

XO = "X"

# Empty Grid

grid = [[ None, None, None],

	[ None, None, None],

	[ None, None, None,]]


def initBoard(ttt):

	# Initialize the board and return it

	# As a variable

	# ttt : a properly initialized display variable

	background = pygame.Surface(ttt.get_size())

	background = background.convert()

	background.fill((255,255,255))

	# Draw the grid lines

	# Vertical lines

	pygame.draw.line(background, (0,0,0), (100,0), (100, 300), 2)

	pygame.draw.line(background, (0,0,0), (200,0), (200, 300), 2)

	# Horizontal lines

	pygame.draw.line(background, (0,0,0), (0,100), (300, 100), 2)

	pygame.draw.line(background, (0,0,0), (0,200), (300, 200), 2)

	# Return the board

	return background



def showBoard(ttt, board):

	# Redraw the board on the screen(ttt)

	ttt.blit(board, (0,0))

	pygame.display.flip()


board = initBoard(ttt)

mouseX, mouseY = pygame.mouse.get_pos()

running = True

while (running == True):

	for event in pygame.event.get():

		if event.type is pygame.QUIT:

			running = False

		elif event.type is pygame.MOUSEBUTTONDOWN:

			clickBoard(board)

Now we will display some Xs, Os, and Status messages.
For this section we need 2 functions: drawMove() and drawStatus()
first drawMove:

def drawMove (board, boardRow, boardCol, Piece):

	# Draw an X or O on the board at the place

	# Find center of space

	global grid

	centerX = boardCol * 100 + 50

	centerY = boardRow * 100 + 50

	if Piece == "O":

		pygame.draw.circle(board, (0,0,0), (centerX, centerY), 44, 2)

	else:

		pygame.draw.line(board, (0,0,0), (centerX - 22, centerY - 22), (centerX + 22, centerY + 22), 2)

		pygame.draw.line(board, (0,0,0), (centerX + 22, centerY - 22), (centerX - 22, centerY + 22), 2)

	grid[boardRow][boardCol] = Piece

drawMove finds the center of the row and column, then either draws a O or a X depending on the turn.
pygame.draw.circle takes 5 parameters, the Surface, the color, a tuple of the center points, the diameter, and the width of the line.
Now add this to your clickBoard function:

def clickBoard(board):

	# Determine where clicked and draw

	# tell Python to acess globals grid and XO

	global grid

	global XO

	mouseX, mouseY = pygame.mouse.get_pos()

	row, col = boardPos(mouseX, mouseY)

	

	# Don't use this space

	if grid[row][col] == "X" or grid[row][col] == "O":

		return

	[B]drawMove(board, row, col, XO)[/B]

	if XO == "X":

		XO = "O"

	else:

		XO = "X"

Now we will write the drawStatus function:
drawStatus

def drawStatus(board):

	global XO, winner, grid

	if winner is None and checkGrid(grid) == False:

		message = XO + "'s turn."

		

	elif winner is not None:

		message = winner + " won!"

	

	else:

		message = "Cat's game!"


	# Render the message

	font = pygame.font.Font(None, 24)

	text = font.render(message, 1, (0,0,0))

	# Copy it onto the board

	board.fill ((255,255,255), (0, 300, 300, 25))

	board.blit(text, (10,300))

Now, the pygame.font.Font() function takes 2 parameters, the name of the font, and the font size.
We then have to render a message in that font with the font.render function which takes the text,the antialias(makes it smooth), and the color.
We then use board.fill to fill only a specific area and then blit the text onto that area.
Now you have to add some stuff to your main loop again.

[B]winner = None[/B]

board = initBoard()

mouseX, mouseY = pygame.mouse.get_pos()

running = True

while (running == True):

	for event in pygame.event.get():

		if event.type is pygame.QUIT:

			running = False

		elif event.type is pygame.MOUSEBUTTONDOWN:

			clickBoard(board)

[INDENT][B]showBoard(ttt, board)[/B][/INDENT]

Then add this to your showBoard function:

def showBoard(ttt, board):

	# Redraw the board on the screen(ttt)

	[B]drawStatus(board)[/B]

	ttt.blit(board, (0,0))

	pygame.display.flip()

And now you are very close to finishing your program.
Go to the next and final tutorial to finish it up!