Programmez un Pong !

Étape 6
Étape terminée ?

Vous avez appris quelques principes de base de la programmation lors de l’étape précédente, il est temps de s’amuser un peu !

Effacez votre code (vous pouvez le sauver dans un autre fichier si souhaitez le réutiliser plus tard), et mettez le code ci-dessous à la place. Pensez à sauvegarder pour l'executer sur votre Gamebuino.

from gamebuino_meta import begin, waitForUpdate, display, color, buttons, collide

# Taille, vitesse et position initiale de la balle :
ball_size = 3
ball_x_speed = 1
ball_y_speed = 1
ball_x_position = 20
ball_y_position = 20

# Taille initiale de la raquette du joueur :
player_height = 12
player_width = 3
player_speed = 2

# Position initiale de la raquette :
player_x_position = 10
player_y_position = 30

# Score
score = 0

while True:
    waitForUpdate()
    display.clear()

    # Si on presse les boutons UP ou DOWN, nous déplaçons la raquette vers le haut, ou vers le bas :
    if buttons.repeat(buttons.UP, 0):
        player_y_position = player_y_position - player_speed

    if buttons.repeat(buttons.DOWN, 0):
        player_y_position = player_y_position + player_speed

    # Nous déplaçons la balle
    ball_x_position = ball_x_position + ball_x_speed
    ball_y_position = ball_y_position + ball_y_speed

    # Vérification si la balle entre en collision avec le haut, bas ou droite de l'écran
    # Si c'est le cas, nous inversons sa direction
    if ball_y_position <= 0:
        ball_y_speed = -ball_y_speed

    if ball_y_position >= 64 - ball_size:
        ball_y_speed = -ball_y_speed

    if ball_x_position + ball_size >= 80:
        ball_x_speed = -ball_x_speed

    # Nous testons s'il y a collision entre la balle et la raquette du joueur
    if collide.rectRect(ball_x_position, ball_y_position, ball_size, ball_size, 
                        player_x_position, player_y_position, player_width, player_height):
        ball_x_speed = -ball_x_speed
        score = score + 1

    # Vérifier si la balle est sortie de l'écran
    if ball_x_position <= 0:
        score = 0  # Nous remettons le score à 0
        ball_x_speed = -ball_x_speed
				
    # Empêcher la raquette de sortir de l'écran
    if player_y_position <= 0:
        player_y_position = 0
    
    if player_y_position >= 64 - player_height:
        player_y_position = 64 - player_height

    # Affichage de la balle
    display.fillRect(ball_x_position, ball_y_position, ball_size, ball_size)

    # Affichage de la raquette du joueur
    display.fillRect(player_x_position, player_y_position, player_width, player_height)

Bravo, vous venez de lancer votre premier jeu ! Simple, non ? Essayez de jouer ! Utilisez les flèches de votre Gamebuino pour déplacer la raquette, et renvoyer la balle.

Observez un peu le code : ne vous inquiétez pas, c’est tout à fait normal si vous ne comprenez pas tout. Mais, si vous regardez bien, vous remarquerez des choses que vous connaissez déjà : des variables ! Il y en a beaucoup, mais vous devez avoir remarqué celle qui s’appelle « score » : elle est égale à 0 lorsqu’on démarre le jeu.

Les règles sont les suivantes : dès que vous réussissez à renvoyer la balle, vous gagnez un point. Dès que vous ratez la balle, votre score revient à 0. Tout est déjà programmé, vous n’avez pas à le faire ! Mais il y a un problème : le score n’est pas affiché à l’écran. C’est là que vous intervenez !

Challenge #4

Essayez d’afficher la phrase suivante à l’écran, en vert : « Mon score est X » (où X est bien entendu la valeur de notre score). Normalement, vous avez toutes les connaissances pour le faire, mais si vous bloquez, lisez les aides ci-dessous !

Besoin d'aide ?

  • Rappelez-vous : l’instruction pour afficher quelque chose à l’écran est display.print("Mon texte"). Vous pouvez également remplacer "Mon texte" par une variable.
  • L'instruction pour changer la couleur en vert est la suivante : display.setColor(color.GREEN). Placez-là juste avant l'instruction pour écrire votre texte !
  • Vous pouvez écrire les instructions d’affichage n’importe où dans le code, mais en général, nous le faisons tout à la fin.

Résultat attendu

Solution

Voir
from gamebuino_meta import begin, waitForUpdate, display, color, buttons, collide

# Taille, vitesse et position initiale de la balle :
ball_size = 3
ball_x_speed = 1
ball_y_speed = 1
ball_x_position = 20
ball_y_position = 20

# Taille initiale de la raquette du joueur :
player_height = 12
player_width = 3
player_speed = 2

# Position initiale de la raquette :
player_x_position = 10
player_y_position = 30

# Score
score = 0

while True:
    waitForUpdate()
    display.clear()

    # Si on presse les boutons UP ou DOWN, nous déplaçons la raquette vers le haut, ou vers le bas :
    if buttons.repeat(buttons.UP, 0):
        player_y_position = player_y_position - player_speed

    if buttons.repeat(buttons.DOWN, 0):
        player_y_position = player_y_position + player_speed

    # Nous déplaçons la balle
    ball_x_position = ball_x_position + ball_x_speed
    ball_y_position = ball_y_position + ball_y_speed

    # Vérification si la balle entre en collision avec le haut, bas ou droite de l'écran
    # Si c'est le cas, nous inversons sa direction
    if ball_y_position <= 0:
        ball_y_speed = -ball_y_speed

    if ball_y_position >= 64 - ball_size:
        ball_y_speed = -ball_y_speed

    if ball_x_position + ball_size >= 80:
        ball_x_speed = -ball_x_speed

    # Nous testons s'il y a collision entre la balle et la raquette du joueur
    if collide.rectRect(ball_x_position, ball_y_position, ball_size, ball_size, 
                        player_x_position, player_y_position, player_width, player_height):
        ball_x_speed = -ball_x_speed
        score = score + 1

    # Vérifier si la balle est sortie de l'écran
    if ball_x_position <= 0:
        score = 0  # Nous remettons le score à 0
        ball_x_speed = -ball_x_speed
				
		# Empêcher la raquette de sortir de l'écran
    if player_y_position <= 0:
        player_y_position = 0
    
    if player_y_position >= 64 - player_height:
        player_y_position = 64 - player_height

    # Affichage de la balle
    display.fillRect(ball_x_position, ball_y_position, ball_size, ball_size)

    # Affichage de la raquette du joueur
    display.fillRect(player_x_position, player_y_position, player_width, player_height)
	
	# Affichage du score
    display.setColor(color.GREEN)
    display.print("Mon score est ")
    display.print(score)

Explications

Vous avez simplement mis en pratique ce que nous avons vu précédemment. Plutôt facile, non ? Retenez juste une chose : pour plus de clarté, les instructions d’affichage sont généralement placées à la fin. Comme vu précédemment, la variable score est modifiée par le programme, et nous affichons à chaque fois sa nouvelle valeur.

Aller plus loin

Notre score est remis à zéro à chaque fois que la balle touche le côté gauche de l'écran. Et si nous avions envie d'afficher le nombre total de fois où nous avons renvoyé la balle ? Essayez de créer une variable appelée "total" et de l'afficher à l'écran, d'une autre couleur. Observez comment nous gérons la variable "score" tout au long du programme. Il vous suffit de faire la même chose avec "total", mais sans l'instruction qui la remet à zéro !

Si vous voulez de l'inspiration, voici ce que nous avons fait :

Voir le code
from gamebuino_meta import begin, waitForUpdate, display, color, buttons, collide

# Taille, vitesse et position initiale de la balle :
ball_size = 3
ball_x_speed = 1
ball_y_speed = 1
ball_x_position = 20
ball_y_position = 20

# Taille initiale de la raquette du joueur :
player_height = 12
player_width = 3
player_speed = 2

# Position initiale de la raquette :
player_x_position = 10
player_y_position = 30

# Score
score = 0
total = 0

while True:
    waitForUpdate()
    display.clear()

    # Si on presse les boutons UP ou DOWN, nous déplaçons la raquette vers le haut, ou vers le bas :
    if buttons.repeat(buttons.UP, 0):
        player_y_position = player_y_position - player_speed

    if buttons.repeat(buttons.DOWN, 0):
        player_y_position = player_y_position + player_speed

    # Nous déplaçons la balle
    ball_x_position = ball_x_position + ball_x_speed
    ball_y_position = ball_y_position + ball_y_speed

    # Vérification si la balle entre en collision avec le haut, bas ou droite de l'écran
    # Si c'est le cas, nous inversons sa direction
    if ball_y_position <= 0:
        ball_y_speed = -ball_y_speed

    if ball_y_position >= 64 - ball_size:
        ball_y_speed = -ball_y_speed

    if ball_x_position + ball_size >= 80:
        ball_x_speed = -ball_x_speed

    # Nous testons s'il y a collision entre la balle et la raquette du joueur
    if collide.rectRect(ball_x_position, ball_y_position, ball_size, ball_size, 
                        player_x_position, player_y_position, player_width, player_height):
        ball_x_speed = -ball_x_speed
        score = score + 1
        total = total + 1
				
    # Vérifier si la balle est sortie de l'écran
    if ball_x_position <= 0:
        score = 0  # Nous remettons le score à 0
        ball_x_speed = -ball_x_speed
				
		# Empêcher la raquette de sortir de l'écran
    if player_y_position <= 0:
        player_y_position = 0
    
    if player_y_position >= 64 - player_height:
        player_y_position = 64 - player_height

    # Affichage de la balle
    display.fillRect(ball_x_position, ball_y_position, ball_size, ball_size)

    # Affichage de la raquette du joueur
    display.fillRect(player_x_position, player_y_position, player_width, player_height)
	
	# Affichage du score
    display.setColor(color.GREEN)
    display.print("Mon score est ")
    display.print(score)
	
    display.print("\n")
    
    display.setColor(color.BLUE)
    display.print("Total : ")
    display.print(total)

Pas mal, non ? Maintenant, amusons-nous un peu avec les graphismes et le gameplay.

Étapes