Comments and documentation

- Comments added on the three js files
- Docmentation added in "src"
- Little reorganization of the project

Author: estebanstb

js/apple.js

@@ -1,5 +1,14 @@
+// Projet : P_Bulles_Snake-PCX
+// Auteur : LEBET Esteban
+// Classe : CID2A
+// Date : 07.11.2023
+// Description : Fichier qui fait apparaître des pommes aléatoirement et les dessine
+// Lieu : ETML, Sébeillon
+
+// Classe représentant la pomme du jeu
 export class Apple {
     constructor(unitSize, gameWidth, gameHeight) {
+        // Propriétés de la pomme
         this.unitSize = unitSize;
         this.gameWidth = gameWidth;
         this.gameHeight = gameHeight;
@@ -8,6 +17,7 @@ export class Apple {
         this.foodNumber = 0;
     }
 
+    // Méthode pour créer une nouvelle position de la pomme de manière aléatoire
     createFood() {
         const randomFood = (min, max) => {
             const randNum = Math.round((Math.random() * (max - min) + min) / this.unitSize) * this.unitSize;
@@ -19,6 +29,7 @@ export class Apple {
         this.foodNumber += 1;
     }
 
+    // Méthode pour dessiner la pomme sur le gameboard
     drawFood(ctx) {
         let foodImage = new Image();
         foodImage.src = "images/grayishApplePixel.png";

js/main.js

@@ -2,22 +2,26 @@
 // Auteur : LEBET Esteban
 // Classe : CID2A
 // Date : 07.11.2023
+// Description : Fichier principal qui gére affiche et gère le snake
+// Lieu : ETML, Sébeillon
 
+// Importation des classes nécessaires depuis les fichiers externes
 import { Apple } from "./apple.js";
 import { Snake } from "./snake.js";
 
+// Constantes définissant des éléments du jeu
 const gameBoard = document.querySelector("#gameBoard");
-// const boxShadow = document.querySelector("#gameBoard").style["boxShadow"] = "0 0 200px #99999";
 const ctx = gameBoard.getContext("2d");
 const scoreText = document.querySelector("#scoreText");
 const resetBtn = document.querySelector("#resetBtn");
-const startBtn = document.querySelector("#startBtn");
 const gameWidth = gameBoard.width;
 const gameHeight = gameBoard.height;
 const boardBackground = "#add8c1";
 const snakeColor = "#273608";
 const snakeBorder = "#add8c1";
 const unitSize = 25;
+
+// Variables de jeu
 let score = 0;
 let running = false;
 
@@ -27,11 +31,14 @@ const apple = new Apple(unitSize, gameWidth, gameHeight);
 // Instance de Snake avec la référence à Apple, la couleur du serpent, la bordure du serpent, et scoreText
 const snake = new Snake(unitSize, apple, snakeColor, snakeBorder, score, scoreText);
 
+// Référence le les touches du claviers et le click de la souris pour le bouton RESET
 window.addEventListener("keydown", snake.changeDirection.bind(snake));
 resetBtn.addEventListener("click", resetGame);
 
+// Fonction principale pour démarrer le jeu
 gameStart();
 
+// Initialisation du jeu
 function gameStart() {
     running = true;
     scoreText.textContent = "SCORE : " + score;
@@ -40,6 +47,7 @@ function gameStart() {
     nextTick();
 }
 
+// Fonction récursive permettant de mettre à jour le jeu à  des intervalles prédéfinis
 function nextTick() {
     if (running) {
         setTimeout(() => {
@@ -49,39 +57,45 @@ function nextTick() {
             snake.drawSnake(ctx);
             checkGameOver();
             nextTick();
-        }, 75);
+        }, 75); // Vitesse du jeu, 1000 = 1s ; 100 = 0.1s
     } else {
         displayGameOver();
     }
 }
 
+// Effacer le contenu du gameboard
 function clearBoard() {
     ctx.fillStyle = boardBackground;
     ctx.fillRect(0, 0, gameWidth, gameHeight);
 }
 
+// Vérifier les conditions de fin de jeu
 function checkGameOver() {
-    switch (true) {
-        case snake.snake[0].x < 0:
-        case snake.snake[0].x >= gameWidth:
-        case snake.snake[0].y < 0:
-        case snake.snake[0].y >= gameHeight:
-        case snake.checkCollision():
-            running = false;
-            break;
+    if (
+        snake.snake[0].x < 0 || // Si la tête du serpent dépasse le bord gauche du gameboard
+        snake.snake[0].x >= gameWidth || // Si la tête du serpent dépasse le bord droit du gameboard
+        snake.snake[0].y < 0 || // Si la tête du serpent dépasse le bord supérieur du gameboard
+        snake.snake[0].y >= gameHeight || // Si la tête du serpent dépasse le bord inférieur du gameboard
+        snake.checkCollision() // Si le serpent entre en collision avec lui-même
+
+    ) {
+        // Si l'une des conditions ci-dessus est vraie, le jeu est arrêté
+        running = false;
     }
 }
 
+// Afficher l'écran de fin de jeu
 function displayGameOver() {
     clearBoard();
     ctx.font = "70px 'NokiaFont', sans-serif";
     ctx.fillStyle = "#273608";
     ctx.textAlign = "center";
-    ctx.fillText("GAME", gameWidth / 2, gameHeight / 3);
-    ctx.fillText("OVER", gameWidth / 2, gameHeight / 2);
+    ctx.fillText("GAME", gameWidth / 2, gameHeight / 2.4);
+    ctx.fillText("OVER", gameWidth / 2, gameHeight / 1.6);
     running = false;
 }
 
+// Réinitialiser le jeu
 function resetGame() {
     score = 0;
     snake.resetSnake();

js/snake.js

@@ -1,5 +1,14 @@
+// Projet : P_Bulles_Snake-PCX
+// Auteur : LEBET Esteban
+// Classe : CID2A
+// Date : 07.11.2023
+// Description : Fichier géreant la taille du serpent, son mouvement, ses collisions et si il mange une pomme ou non
+// Lieu : ETML, Sébeillon
+
+// Représente le serpent du jeu
 export class Snake {
-        constructor(unitSize, apple, snakeColor, snakeBorder, score, scoreText) {
+    constructor(unitSize, apple, snakeColor, snakeBorder, score, scoreText) {
+        // Propriétés du serpent
         this.unitSize = unitSize;
         this.xVelocity = unitSize;
         this.yVelocity = 0;
@@ -10,10 +19,11 @@ export class Snake {
         this.apple = apple;
         this.snakeColor = snakeColor;
         this.snakeBorder = snakeBorder;
-        this.score = score; // Ajout de la référence à score
+        this.score = score; // Référence au score
         this.scoreText = scoreText;
     }
 
+    // Méthode pour déplacer le serpent
     moveSnake() {
         const head = {
             x: this.snake[0].x + this.xVelocity,
@@ -31,6 +41,7 @@ export class Snake {
         }
     }
 
+    // Méthode pour dessiner le serpent sur le gameboard
     drawSnake(ctx) {
         ctx.fillStyle = this.snakeColor;
         ctx.strokeStyle = this.snakeBorder;
@@ -40,12 +51,13 @@ export class Snake {
         });
     }
 
+    // Méthode pour changer la direction du serpent en fonction de la touche du clavier
     changeDirection(event) {
         const keyPressed = event.keyCode;
-        const LEFT = 37;
-        const UP = 38;
-        const RIGHT = 39;
-        const DOWN = 40;
+        const LEFT = 37; // 37 = chiffre atribué à la touche flèche de gauche
+        const UP = 38; // 38 = chiffre atribué à la touche flèche de haut
+        const RIGHT = 39; // 39 = chiffre atribué à la touche flèche de droite
+        const DOWN = 40; // 40 = chiffre atribué à la touche flèche du bas
 
         const goingUp = this.yVelocity == -this.unitSize;
         const goingDown = this.yVelocity == this.unitSize;
@@ -72,6 +84,7 @@ export class Snake {
         }
     }
 
+    // Méthode pour vérifier si le serpent entre en collision avec lui-même
     checkCollision() {
         for (let i = 1; i < this.snake.length; i += 1) {
             if (this.snake[i].x == this.snake[0].x && this.snake[i].y == this.snake[0].y) {
@@ -81,10 +94,12 @@ export class Snake {
         return false;
     }
 
+    // Méthode pour réinitialiser le serpent
     resetSnake() {
-        this.snake = [
+        this.snake = 
+        [
             { x: this.unitSize, y: 0 },
-            { x: 0, y: 0 }
+            { x: 0, y: 0 }          
         ];
         this.xVelocity = this.unitSize;
         this.yVelocity = 0;