Premier mini-projet : concevoir un jeu ressemblant à Snake

Le principe de Snake

Snake est un mini-jeu qui consiste à déplacer un serpent sur un écran.

Ce serpent se déplace sans arrêt sur l'écran et doit attraper des pommes qui apparaissent au hasard sur l'écran.
A chaque pomme attrapée, le score augmente ainsi que la taille du serpent
Le serpent meurt quand sa tête touche sa queue (ce qui rend donc impossible un retour en arrière)

TRES IMPORTANT

la création de ce programme a été découpée en plusieurs étapes pour te faciliter les choses
chaque étape te propose un code pré-écrit dans lequel il y a des trous que tu devras compléter
pour réussir à compléter ces trous, il faut LIRE les commentaires et la documentation

Etape 1 : Coder la fenêtre de notre jeu

import pyxel

# constantes (des variables dont la valeur ne change jamais)
LARGEUR = ...   # largeur de notre fenêtre
HAUTEUR = ...   # hauteur de notre fenêtre
FPS = ...   # nombre d'images par seconde dans notre jeu
NOIR = ...  # voir la documentation pour connaître le nombre correspondant à la couleur noire
BLANC = ... # faire pareil avec les autres couleurs
VERT = ...
ORANGE = ...
ROUGE = ...
TITRE = ... # titre de la fenêtre (à mettre entre guillemets)

# taille de la fenetre 128x128 pixels
# penser à utiliser les constantes définies juste au-dessus
# pour la quit_key, voir les touches clavier à la fin de la documentation de Pyxel
pyxel.init(..., ..., title = ... , fps = ..., quit_key=...)

def update():
    pass        # pour l'instant, on ne fait rien dans cette fonction

def draw():

    # effacer la fenêtre et la remplir de couleur noire (voir la documentation pour savoir comment faire)
    # utiliser la constante NOIR définie plus haut
    ...

pyxel.run(update, draw)

A faire dans cet exercice :

copier / coller le code ci-dessus dans votre éditeur et faites ce qui suit :
dans les parenthèses de pyxel.init, remplacer les ... par les valeurs appropriées pour obtenir une fenêtre de 128 pixels de large sur 128 pixels de haut avec le titre que vous souhaitez et qui se ferme grâce à la touche que vous aurez choisie.
dans la fonction draw(), écrire le code qui permet d'effacer le contenu de la fenêtre et de mettre un fond noir. Si besoin, chercher dans la documentation de pyxel
exécuter votre programme pour vérifier qu'il fonctionne

Vous pouvez vous aider du cours de ce site et de la documentation en ligne pour répondre à ce premier exercice.

Etape 2 : Insérer une forme (un sprite) qui représentera notre serpent

Pour faire simple, on représentera notre serpent par un carré.

Nous pourrons, lors de la prochaine étape, déplacer cette forme, cet élément de notre jeu. Il va donc porter le nom de sprite.

import pyxel

# constantes (des variables dont la valeur ne change jamais)
LARGEUR = ...   # largeur de notre fenêtre
HAUTEUR = ...   # hauteur de notre fenêtre
FPS = ...   # nombre d'images par seconde dans notre jeu
NOIR = ...  # voir la documentation pour connaître le nombre correspondant à la couleur noire
BLANC = ... # faire pareil avec les autres couleurs
VERT = ...
ORANGE = ...
ROUGE = ...
TITRE = ... # titre de la fenêtre (à mettre entre guillemets)
CASE = ...  # taille (arête) de notre sprite (carré)

# variables globales (des variables dont la valeur change et qui seront utilisées partout)
sprite_x = ...      # définir la position horizontale du sprite au début (moins de la valeur de LARGEUR !)
sprite_y = ...      # définir la position verticale du sprite au début (moins de la valeur de HAUTEUR !)

# taille de la fenetre 128x128 pixels
# penser à utiliser les constantes définies juste au-dessus
pyxel.init(..., ..., title = ... , fps = ..., quit_key=...)

def update():
    pass        # pour l'instant, on ne fait rien dans cette fonction

def draw():

    # effacer la fenêtre et la remplir de couleur noire (voir la documentation pour savoir comment faire)
    # utiliser la constante NOIR définie plus haut
    ...
    # dessiner une forme carrée de couleur ORANGE (notre sprite) (voir la documentation ou ci-dessous pour savoir comment faire)
    # le carré est positionné aux coordonnées de l'écran sprite_x, sprite_y et il est de taille CASE
    ...

pyxel.run(update, draw)

On complète notre programme précédent :

au début du programme, on détermine les coordonnées x, y pour positionner le sprite (sprite_x, sprite_y). A vous de choisir. Attention la fenêtre ne fait que 128 sur 128 pixels, il ne faut pas dépasser ces valeurs.
dans draw(), nous allons dessiner un carré représentant notre vaisseau. Pour cela nous allons utiliser la fonction pyxel.rect().

Cette fonction est paramétrée de la façon suivante : pyxel.rect(positionx, positiony, largeur, hauteur, couleur) : - positionx, positiony : position (horizontale, verticale) du carré - largeur : largeur du carré - hauteur : hauteur du carré - couleur : couleur du carré (à choisir parmi les 16 disponibles)

Etape 3 : Déplacement du serpent

Reprenons le programme précédent (pour ne pas dévoiler les solutions de l'exercice précédent, les trous dans le programme n'ont pas été complétés. Il faut le refaire).

Rajoutons :

une constante VITESSE_SPRITE qui définira la vitesse de déplacement de notre sprite

import pyxel

# constantes (des variables dont la valeur ne change jamais)
LARGEUR = ...   # largeur de notre fenêtre
HAUTEUR = ...   # hauteur de notre fenêtre
FPS = ...       # nombre d'images par seconde dans notre jeu
NOIR = ...  # voir la documentation pour connaître le nombre correspondant à la couleur noire
BLANC = ...     # faire pareil avec les autres couleurs
VERT = ...
ORANGE = ...
ROUGE = ...
TITRE = ...     # titre de la fenêtre (à mettre entre guillemets)
CASE = ...  # taille de l'arête de notre sprite
VITESSE_SPRITE = ...    # vitesse du sprite = nombre de pixels dont il va se déplacer

# variables globales (des variables dont la valeur change et qui seront utilisées partout)
sprite_x = ...      # définir la position horizontale du sprite au début (moins de la valeur de LARGEUR !)
sprite_y = ...      # définir la position verticale du sprite au début (moins de la valeur de HAUTEUR !)

# taille de la fenetre 128x128 pixels
# penser à utiliser les constantes définies juste au-dessus
pyxel.init(..., ..., title = ... , fps = ..., quit_key=...)

def update():
    # on doit mettre ce qui suit pour que les variables globales puissent être utilisées dans la fonction update()
    global sprite_x, sprite_y  

    # mise à jour de la position du sprite en ajoutant la vitesse à la position
    sprite_x += ...    


def draw():

    # effacer la fenêtre et la remplir de couleur noire (voir la documentation pour savoir comment faire)
    # utiliser la constante NOIR définie plus haut
    ...
    # dessiner une forme carrée de couleur ORANGE (notre sprite) (voir la documentation ou ci-dessous pour savoir comment faire)
    # le carré est positionné aux coordonnées sprite_x, sprite_y et il est de taille CASE
    ...

pyxel.run(update, draw)

Gérer les sorties d'écrans

Problème du programme précédent : notre sprite sort de la fenêtre !!! Corrigeons cela avec quelques conditions.

Dans le jeu de Snake, quand le serpent sort d'un côté de la fenêtre, il réapparaît de l'autre côté

A FAIRE

Compléter le programme suivant en reprenant les valeurs du programme précédent et en ajoutant les nouvelles

import pyxel

# constantes (des variables dont la valeur ne change jamais) 
LARGEUR = ...   # largeur de notre fenêtre
HAUTEUR = ...   # hauteur de notre fenêtre
FPS = ...   # nombre d'images par seconde dans notre jeu
NOIR = ...  # voir la documentation pour connaître le nombre correspondant à la couleur noire
BLANC = ... # faire pareil avec les autres couleurs
VERT = ...
ORANGE = ...
ROUGE = ...
TITRE = ... # titre de la fenêtre (à mettre entre guillemets)
CASE = ...
VITESSE_SPRITE = ...

# variables globales (des variables dont la valeur change et qui seront utilisées partout)
sprite_x = ...      # définir la position horizontale du sprite au début (moins de la valeur de LARGEUR !)
sprite_y = ...      # définir la position verticale du sprite au début (moins de la valeur de HAUTEUR !)

# taille de la fenetre 128x128 pixels
# penser à utiliser les constantes définies juste au-dessus
pyxel.init(..., ..., title = ... , fps = ..., quit_key=...)

def update():
    # on doit mettre ce qui suit pour que les variables globales puissent être utilisées dans la fonction update()
    global sprite_x, sprite_y  

    # mise à jour de la position du sprite en ajoutant la vitesse à la position
    # si la position du vaisseau dépasse la largeur de la fenêtre, on déplace le vaisseau le vaisseau de l'autre côté de la fenêtre
    sprite_x += ...   
    if sprite_x > ... :
        sprite_x = 0 - ...   


def draw():

    # effacer la fenêtre et la remplir de couleur noire (voir la documentation pour savoir comment faire)
    # utiliser la constante NOIR définie plus haut
    ...
    # dessiner une forme carrée de couleur ORANGE (notre sprite) (voir la documentation ou ci-dessous pour savoir comment faire)
    # le carré est positionné aux coordonnées sprite_x, sprite_y et il est de taille CASE
    ...

pyxel.run(update, draw)

Si tu n'as pas fait d'erreur, le sprite se déplace vers la droite jusqu'au bord de la fenêtre, sort de la fenêtre et réapparaît de l'autre côté.

Utilisation du clavier pour changer la direction du serpent

Maintenant que tu sais déplacer le sprite, ajoutons du code pour faire ce déplacement seulement quand on appuie sur une touche du clavier.

Pour détecter une touche clavier enfoncée, on utilise pyxel.btn() en passant en paramètre la touche sur laquelle on appuie. Rappel : pour connaître les touches, il faut aller voir à la fin de la documentation.

Par exemple : pyxel.btn(pyxel.KEY_RIGHT) deviendra vrai si on appuie sur la flèche droite du clavier.

import pyxel

# constantes (des variables dont la valeur ne change jamais)
LARGEUR = ...   # largeur de notre fenêtre
HAUTEUR = ...   # hauteur de notre fenêtre
FPS = ...   # nombre d'images par seconde dans notre jeu
NOIR = ...  # voir la documentation pour connaître le nombre correspondant à la couleur noire
BLANC = ... # faire pareil avec les autres couleurs
VERT = ...
ORANGE = ...
ROUGE = ...
TITRE = ... # titre de la fenêtre (à mettre entre guillemets)
CASE = ...
VITESSE_SPRITE = ...

# variables globales (des variables dont la valeur change et qui seront utilisées partout)
sprite_x = ...      # définir la position horizontale du sprite au début (moins de la valeur de LARGEUR !)
sprite_y = ...      # définir la position verticale du sprite au début (moins de la valeur de HAUTEUR !)

# taille de la fenetre 128x128 pixels
# penser à utiliser les constantes définies juste au-dessus
pyxel.init(..., ..., title = ... , fps = ..., quit_key=...)

def update():
    # on doit mettre ce qui suit pour que les variables globales puissent être utilisées dans la fonction update()
    global sprite_x, sprite_y  



    # si la touche flèche droite du clavier est enfoncée
    if ...:
        # mise à jour de la position du sprite en ajoutant la vitesse à la position
        # si la position du vaisseau ne dépasse pas [largeur de la fenêtre - largeur du sprite], on déplace le vaisseau
    if sprite_x < ...
        sprite_x += ... 


    if sprite_x < ...
        sprite_x += ...   


def draw():

    # effacer la fenêtre et la remplir de couleur noire (voir la documentation pour savoir comment faire)
    # utiliser la constante NOIR définie plus haut
    ...
    # dessiner une forme carrée de couleur ORANGE (notre sprite) (voir la documentation ou ci-dessous pour savoir comment faire)
    # le carré est positionné aux coordonnées sprite_x, sprite_y et il est de taille CASE
    ...

pyxel.run(update, draw)

Pour finir...

Compléter le code précédent dans def update() avec un déplacement dans les autres directions : vers la gauche, vers le haut et vers le bas.

Essayer d'améliorer votre programme, pour que le sprite ne sorte pas de la fenêtre.