Logo de SAASF

Snake

Sortie pour la première fois à la fin des années 1970, Snake est un jeu vidéo culte. Bien qu'il est plutôt une catégorie de jeu vidéo qu'un jeu vidéo en lui même, il représente une page du jeu vidéo, par sa simplicité, mais aussi parce qu'il est fun. Découvrez notre propre version de ce jeu, made in Aster Système.
Contenu

Les dépendances du projet

Notre version de Snake utilise un bon nombre de technologies, made in Aster Système.

La partie graphique est faite via notre librairie graphique C++ et OpenGL : SCLS Graphic "Benoit". Elle permet un affichage très satisfaisant et simple, bravant tous les défis d'un projet comme ça.

Le projet est hebergé sur Github, juste ici. Il est sous license GPL V3.0.

Contenu

Partie 1 : la zone de jeu

Pour commencer, nous allons développer la zone de jeu où évoluera notre serpent.

La fenêtre principale

On commence par créer une fenêtre principale, en format téléphone 9:16 pour faciliter la réalisation des shorts. Notre fenêtre fera 540 X 960 pixels de taille. Le titre de la fenêtre sera "Snake par Aster Système". Le fond de la fenêtre sera noir par défaut. Pour pouvoir utiliser de la 2D dans la fenêtre, on crée une page 2D avec SCLS Graphic "Benoit", appelé "a_gui". Elle occupera la totalité de la fenêtre.

La zone de jeu

Dans "GUI", on ajoute un objet nommé "a_playground", qui représentera la zone de jeu. Elle occupera une place de 540 X 540 pixels, soit un carré. On la place de telle manière qu'elle occupera la totalité de la largeur de la fenêtre. Pour la hauteur, on place le milieu de la zone de jeu à 3/5 de la hauteur totale, soit ici, 576 pixels. La texture appliquée sera une texture fabriqué directement dans le code source, sans avoir besoin d'image extérieure. Il s'agira d'une texture avec un fond de gris RGB (160, 160, 160). On y appliquera aussi une légère bordure, composé de 3 parties en tout. Une partie sera la partie extérieure de la bordure gauche-bas, de couleur RGB (60, 60, 60). La deuxième partie sera la partie intérieure de la bordure gauche-bas, après la bordure extérieure, de couleur RGB (102, 102, 102). Finalement, la dernière partie sera la partie extérieure de la bordure droite-haut, de couleur RGB (200, 200, 200). La largeur de ces trois bordures est appelée "a_outer_line_width", et est par défaut à 4.

Cadriller la zone de jeu

Le tracé du cadrillage de la zone de jeu se fera à même la texture. Pour commencer, on calcul chaque positions X et Y et tailles largeurs et hauteurs de chaque case, verticale et horizontale. Pour cela, on doit repartir la zone de jeu en un certain nombre de cases, ici 15 X 15 cases. Nous devons en plus prendre en compte la bordure. Grâce à cela, par proportionnalité, on peut connaître toutes les positions et tailles nécessaires. Avec ces positions et tailles, on peut tracer à la fin de chaque case la ligne de cadrillage interne, de largeur "a_inner_line_width" et de couleur RGB (102, 102, 102). Cependant, on ne doit pas tracer la dernière ligne, car la fin de la dernière ligne est juste à côté du bord droite / haut de la zone de jeu, et n'est donc pas nécessaire. Or, nous devons compter cet absence de tracé de la dernière ligne, en ajoutant "a_inner_line_width" (la valeur manquante) pour le calcul de la largeur nécessaire au cadrillage.

Grâce aux données de positions de chaque case, on peut savoir précisément où placer une certaine texture, et quelle taille elle doit occuper.

Contenu

Partie 2 : le serpent

Dans un jeu Snake, le plus important est très certainement le serpent. Sinon, il n'y aurait pas de jeu.

Afficher le serpent

Chaque case de la grille peut prendre une certaine texture. Le serpent sera constitué d'un certain nombre de parties, nommées "Snake_Piece". Chaque partie occupera une case particulière de la grille. Elles sont stockées dans une file. La dernière partie ajoutée représente la tête du serpent, qui aura une texture légèrement différente.

La texture de la tête du serpent est composée de deux yeux rectangulaires. Ces yeux représentent un triangle blanc, qui représentent 1/4 de la texture, constitué d'un triangle noir de 3/5 de la taille du triangle blanc. Le triangle noir commence à 3/100 derrière le bord du triangle blanc, dans la direction du serpent, et au milieu de l'autre direction. Le triangle blanc commence à 1/10 pixels du bord de la texture, dans la direction du serpent, et à 3/25 de l'autre direction, du bord de leur côté respectif. Il y a une texture pour chacune des quatres directions possible (haut, bas, gauche, droite).

Bouger le serpent

Le mouvement du serpent se fait via les flèches du clavier. Au commencement du jeu, la direction du serpent, qui ici, est un nombre entier, est de "-1", il ne bouge pas. Lorsque le joueur commence, la direction change selon la touche pressée (haut = 0, bas = 2, gauche = 1, droite = 3). Le serpent se déplace à un certain nombre de cases par secondes (par défaut, 3 cases par secondes). Quand il se déplace, les morceaux de serpent étant stockés dans une file, la tête du serpent avance (on ajoute un élement à la pile). Si le serpent grandit, le dernier morceau reste. Sinon, il est supprimé. Le jeu regarde l'objet situé à la nouvelle position du serpent. Si il s'agit de nourriture (case rouge), le serpent grandit. Sinon, sa taille ne change pas. Il y a toujours 3 objets "nourritures" sur la grille.
Contenu

Partie 3 : Game Over et GUI

Si le joueur perd, il faut qu'il le sache, et qu'il puisse recommencer la partie. Pour cela, on doit implémenter le Game Over, et une GUI qui s'affiche dés la mort du joueur.

Game Over

Quand le serpent se déplace, on peut savoir ce qui se situe devant lui. Si il se situe un bout du serpent, ou le bord de la zone de jeu, le joueur a perdu. Le serpent s'arrête de bouger. La texture de la tête du serpent change, les carrés sont remplacés par des croix. Ces croix ont exactement la même taille que le rectangle blanc, vu plus haut. Leur ligne mesure 7 pixels d'épaisseur, pour être visible malgré le retrécissement de l'image.

Au même moment, un texte affichant "Vous avez perdu" s'affiche, juste en dessous de la zone de jeu. Il prend toute la largeur de la fenêtre, et 50 pixels de haut. Il n'est affiché que quand le joueur a perdu. Au dessous de lui, un bouton "Recommencer" est placé. Il prend toute la largeur de la fenêtre, et 50 pixels de haut. Il n'est affiché que quand le joueur a perdu. Si le joueur clique dessus, le serpent repart à la case départ, avec une taille de 1. Le texte et le bouton disparaissent, jusqu'au prochain Game Over.

Le reste de la GUI

Pour permettre au joueur de connaître sa progression, on a rajouter un texte "Score" en haut de la fenêtre. Il se situe à 1 pixel du haut de la fenêtre, prend toute la largeur de la fenêtre et 50 pixels de haut. Il affiche le texte "Score : x / y" où x est la taille du serpent moins 1 et y la taille de la zone de jeu en cases moins 1. Pour finir, on ajoute notre logo en bas de la fenêtre. Il se situe au milieu de la fenêtre, à 30 pixels du bas de la fenêtre. Il prend toute la largeur de la fenêtre, et 1 / 8 de la hauteur de la fenêtre.

Contenu

Partie 4 : Gagner

Pour tester la mécanique quand le joueur gagne, on va implémenter une petite méthode de triche, pour gagner rapidement.

Triche

Si le joueur appuie sur "p", la triche se met en route. L'algorithme consiste en emprunter un chemin, de telle manière que le serpent ne croise aucun de ses bouts. Pour cela, il faut emprunter un chemin, qui soit topologiquement un cercle (une boucle). Des milliars de chemins de ce genre sont possibles, nous allons choisir un des plus simples. Nous allons cadriller le plan colonne par colonne, en utilisant la ligne d'en bas pour aller de la colonne droite à la colonne gauche. Si nous sommes dans une colonne pair, on monte. Sinon, on descend. Quand on arrive à l'avant dernière ligne, dans une colonne pair, on tourne à droite, pour passer sur colonne impair et commencer à monter. Cependant, si on est à la dernière colonne, on atteint la dernière ligne, et on tourne à gauche jusqu'à la première colonne. La première colonne étant 0 (pair), on se met donc à monter, et on recommence le tout, jusqu'à que le joueur gagne.

Victoire

Quand le joueur gagne, donc que le serpent fait la taille totale de la zone de jeu, il s'arrête de bouger. Un texte "Vous avez gagné" apparaît, exactement de la même manière que le texte "Vous avez perdu". Le bouton "Recommencer" apparaît aussi, pour recommencer la partie.