Maintenant que j’ai fini de coder le jeu Pong, je veux que tout le monde puisse en voir le code source, pour le modifier si souhaité.

Pour cela j’ai décidé de publier mon programme sur le site GitHub.

GitHub

GitHub est un site web sur lequel on peut publier le code source de ses projets java.

J’ai un compte GitHub « Wollef ». On peut y accéder à l’URL https://github.com/wollef.

Configuration et utilisation de Git en local

Installation de eGit

Pour publier le code source depuis Eclipse sur GitHub il faut installer eGit dans Eclipse (menu Help, Install New Software, puis choix du site  http://download.eclipse.org/egit/updates ).

Création de la base locale

Ensuite on doit ouvrir la perspective git dans Eclipse (menu Window, Perspective, Open Perspective, Git), car la première fois on doit créer la base de code source locale sur le disque dur.

Une fois dans la perspective Git, on fait cela en cliquant « create a new local git repository ».

Enregistrement du projet dans la base locale

Pour transformer son projet en projet GitHub , on doit retourner dans la perspective Java, cliquer droit sur le projet, choisir « team/share project », et choisir le repository local.

Dans le panneau github avec les « unstaged change » on clique sur « add to index », puis sur « Commit and push ».

Le code est alors dans la base locale

Création du repository sur le site GitHub et publication du code

Ensuite on doit aller sur le site GitHUB avec le navigateur, demander à créer un nouveau repository. On obtient une URL qui permettra de publier le code.

On revient alors dans Eclipse, on clique droit sur l’icône du projet, on choisit « Team/Remote/Push ». On tape l’URL du projet GitHub, le user id et le password du compte GitHub. Dans le panneau suivant, on choisit de publier la « master branch » (dans source ref), puis on valide avec Finish.

Et hop ! Le code est publié sur le site GitHub et d’autres programmeurs peuvent le récupérer dans leur environnement Eclipse.

Programmer en équipe avec GitHub du code sur le site GitHub

Avec GitHub, plusieurs programmeurs peuvent travailler en même temps sur le code du programme, publier leurs modifications une fois qu’elles sont finies, pour que tout le monde puisse les récupérer et soit à jour au fil des travaux des uns et des autres.

Mais c’est trop long d’expliquer ici le fonctionnement du travail en équipe avec GitHub.

Pour le moment je joue seul contre l’ordinateur mais je voudrais jouer ensemble avec mon petit frère.

Donc il faut dire que la deuxième raquette soit contrôlée par le clavier.

Pour contrôler la deuxième raquette avec le clavier il fallait créer deux nouvelles variables qui s’appellent gegnermoveup et gegnermovedown, ces variables mémorisent quels mouvements veut le joueur.

protected static boolean gegnermoveup= false;
protected static boolean gegnermovedown= false;

Donc j’ai programmé que quand on touche la touche Q la raquette monte et quand on touche W la raquette descend : c’est ce qui est en gris dans le code.

@Override
	public void keyPressed(KeyEvent e) {
		 if (e.getKeyCode()== KeyEvent.VK_UP ) {
			 Var.moveup = true;
		 } else if (e.getKeyCode()== KeyEvent.VK_DOWN) {
			 Var.movedown = true;
		 } else if (e.getKeyCode()== KeyEvent.VK_Q ) {
			 Var.gegnermoveup = true;
		 } else if (e.getKeyCode()== KeyEvent.VK_W) {
			 Var.gegnermovedown = true;
		 }
		 
	}

	@Override
	public void keyReleased(KeyEvent e) {
		 if (e.getKeyCode()== KeyEvent.VK_UP ) {
			 Var.moveup = false;	
		 } else if (e.getKeyCode()== KeyEvent.VK_DOWN) {
			 Var.movedown = false;
		 } else if (e.getKeyCode()== KeyEvent.VK_Q ) {
			 Var.gegnermoveup = false;	
		 } else if (e.getKeyCode()== KeyEvent.VK_W) {
			 Var.gegnermovedown = false; 
		 } else if (e.getKeyCode()== KeyEvent.VK_C) {
			 Var.modeCouleurs = true;
		 } else if (e.getKeyCode()== KeyEvent.VK_B) {
			 Var.modeCouleurs = false;
		 }
	}

Enfin j’ai copié la classe Movement qui calcule la position de la première raquette dans une nouvelle classe qui s’appelle GegnerMovementManual pour qu’elle calcule la position de la deuxième raquette.

Pour que cela fonctionne il faut remplacer l’utilisation de GegnerMovement (le mode automatique) par cette nouvelle classe GegnerMovementManual (le mode avec le clavier).

 

Les différences entre la classe Movement et la classe GegnerMovementManual sont en gris dans le code (utiliser gegnermoveup, gegnermovedown, gegnery pour la raquette 2 au lieu de moveup, movedown, y pour la raquette 1).

public GegnerMovementManual() {
		move = new Timer();
		move.scheduleAtFixedRate(new TimerTask() {
			@Override
			public void run() {
				if (Var.gegnermoveup == true) {
					if (Var.gegnery >= 20) {
						Var.gegnery -= 2;
			
					}
				} else if(Var.gegnermovedown) {
					if(Var.gegnery <= Var.screenheight - 200) {
						Var.gegnery +=2 ;
					}
				}

			}
		}, 0, 4);
	}

Et voilà maintenant nous pouvons jouer à deux à Pong !!!

Pour pouvoir changer le mode avec le clavier, j’ai ajouté une variable qui s’appelle gegnermodeauto.

	static boolean gegnerModeAuto = true;

J’ai modifié le KeyHandler pour changer cette variable quand on appuie la touche A (Gegner Automatique) ou Z (Gegner manuel).

else if (e.getKeyCode()== KeyEvent.VK_A) {
		 Var.gegnerModeAuto = true;
	 } else if (e.getKeyCode()== KeyEvent.VK_Z) {
		 Var.gegnerModeAuto = false;
	 }

Et j’ai modifié les deux classes GegnerMovementManual et GegnerMovement pour que soir l’une soit l’autre s’exécute en fonction de la variable.

public GegnerMovement() {
		move = new Timer();
		move.scheduleAtFixedRate(new TimerTask() {
			public void run() {
				if (Var.gegnerModeAuto == true) {
					… reste du code

public GegnerMovementManual() {
		move = new Timer();
		move.scheduleAtFixedRate(new TimerTask() {
			@Override
			public void run() {
				if (Var.gegnerModeAuto == false) {
					… reste du code

Pour savoir quel mode est actif, j’ai modifié la classe Draw pour afficher un signe * à côté du score du Gegner quand le mode est automatique.

g.drawString(
"" + Var.gegnerPoints+(Var.gegnerModeAuto ? "*" : ""), Var.screenwidth/2 + 50, 
75
);

Et voici le résultat :

Comme c’est un peu triste d’avoir le jeu en noir et blanc je voulais ajouter de la couleur.

Pour décider du mode d’affichage j’ai ajouté une variable qui dit quand c’est en couleur.

static boolean modeCouleurs = true;

Et j’ai modifier le fichier Draw pour dire quel couleur et quelle forme utiliser.

if (Var.modeCouleurs) 
	g.setColor(Color.DARK_GRAY);
else
	g.setColor(Color.BLACK);
		
g.fillRect(0, 0, Var.screenwidth, Var.screenheight);
	
g.setColor(Color.WHITE);	
for(int i = 0; i<= 30; i++) {
	g.fillRect(Var.screenwidth/2 -5, i * 20, 10, 10);
}
		
if (Var.modeCouleurs) 
	g.setColor(Color.BLUE);		

if (Var.modeCouleurs) 
	g.fillRoundRect(Var.x, Var.y, 25, 150,15,15);
else
	g.fillRect(Var.x, Var.y, 25, 150);
		
if (Var.modeCouleurs) 
	g.setColor(Color.GREEN);
	
if (Var.modeCouleurs) 
	g.fillRoundRect(Var.gegnerx, Var.gegnery, 25, 150,15,15); 
else
	g.fillRect(Var.gegnerx, Var.gegnery, 25, 150); 
			
if (Var.modeCouleurs) 
	g.setColor(Color.RED);
		
g.setFont(Var.pixelfont);
g.drawString("" + Var.playerPoints, Var.screenwidth/2 - 95, 75);
g.drawString("" + Var.gegnerPoints, Var.screenwidth/2 + 50, 75);

if (Var.modeCouleurs) 
	g.setColor(Color.ORANGE);		

if (Var.modeCouleurs) 
	g.fillOval((int)Var.ballx, (int) Var.bally, 20, 20);
else
	g.fillRect((int)Var.ballx, (int) Var.bally, 20, 20);

J’ai utilisé la variable dans un if pour décider d’utiliser la couleur pour dessiner chaque objet : la balle, le score, les raquettes, … Et j’en ai profité pour changer les formes des raquettes et de la balle.

Et voila le résultat !!!

Comme j’ai envie de changer les couleurs pendant le jeu j’ai modifié le Keyhandler pour passer en couleur en tapant sur la touche C et en noir et blanc sur la touche B.

…
else if (e.getKeyCode()== KeyEvent.VK_C) {
	 Var.modeCouleurs = true;
} else if (e.getKeyCode()== KeyEvent.VK_B) {
	 Var.modeCouleurs = false;
}

On a vu que dans le jeu original la vitesse de la balle augmente au cours de la partie, jusqu’à ce que l’un des joueurs perde le point.

Or dans la version du tutoriel la balle va toujours à la même vitesse.

On doit donc trouver comment changer la vitesse de la balle pendant le jeu.

Etude de la classe BallMovement

Le fichier qui dirige la balle s’appelle BallMovement.

public BallMovement() {
   move = new Timer();
   move.scheduleAtFixedRate(
      new TimerTask() {
         public void run() {
            Var.ballx += Var.balldirx;
            Var.bally += Var.balldiry;
         }
      },
      0,
      4
   );
}

Toutes les 4 millisecondes, le timer exécute ce qui est dans la méthode run() : la nouvelle position de la balle qui est ballx et bally, est modifiée de balldirx et balldiry.

Dans la version du tutoriel la balledirx et la balldiry sont toujours 1 ou -1 et c’est le fichier BallKollision qui change ces valeurs quand la balle touche une raquette.

Ajout de la variable ‘vitesse’

On doit modifier le code pour ajouter la notion de vitesse.

On va donc créer la variable vitesse dans le fichier var.

static int vitesse=3;

Et maintenant faire changer la position en utilisant la vitesse :

Var.ballx += Var.balldirx * Var.vitesse;
Var.bally += Var.balldiry * Var.vitesse;

En relançant le jeux la balle va beaucoup plus vite (3 fois) et c’est plus difficile à jouer !!!

Augmentation de la vitesse pendant le jeu

Il faut maintenant trouver un moyen de changer la vitesse pendant le jeu, donc il faut savoir depuis quand le jeu a commencé. On va donc ajouter une variable débutjeu

static long debutJeu= 0;

A chaque fois que la balle est mise au centre on mémorise l’heure de la partie

Var.debutJeu = System.currentTimeMillis();

 

A chaque cycle de BallKollision on va calculer une vitesse qui va dépendre de la durée de la partie.

long maintenant = System.currentTimeMillis();
long duree = maintenant - Var.debutJeu;
Var.vitesse = 1 + duree / 10000;
Var.ballx += Var.balldirx * Var.vitesse;
Var.bally += Var.balldiry * Var.vitesse;

Toutes les dix secondes la balle accélère.

En relançant le jeu c’est bien ce qui ce passe. Mais la vitesse augmente de 1 à chaque fois : quand la vitesse passe de 1 à 2, c’est trop rapide pour l’ordinateur.

Changement plus progressif de la vitesse

On doit trouver le moyen de rendre progressif l’accélération de la balle. Au lieu d’utiliser des nombres entiers on utilise des nombres décimaux.

Dans le fichier Var, cela donne :

static double ballx = 200, bally = 500;
static double vitesse=1;

Dans le fichier BallMovement, cela donne :

long maintenant = System.currentTimeMillis();
double duree = maintenant - Var.debutJeu;
Var.vitesse = 1.0 + duree / 10000.0;
Var.ballx += Var.balldirx * Var.vitesse;
Var.bally += Var.balldiry * Var.vitesse;

On a aussi dû corriger la classe Draw car le dessin doit se faire avec des nombres entiers (dessin de la balle à sa position) :

g.fillRect((int)Var.ballx, (int) Var.bally, 20, 20);

Hourra ! Le programme marche comme l’original avec une balle qui accélère en cours de jeu !

Etude du code du jeu

Pour Programmer un jeu vidéo il faut donc créer différents fichiers ou classes (c’est une manière d’organiser le programme en java) pour que tout fonctionne.

Main:

Le fichier Main est le premier qui est lancé, et il permet de dire quelles autres classes doivent être utilisées pour faire fonctionner le jeu.

Gui:

La classe Gui crée la fenêtre du jeu et elle utilise deux autres classes pour contrôler la fenêtre :

• La classe « KeyHandler » qui examine quelle touche on tape sur le clavier. Ensuite quand on a touché une touche il va regarder quelle action cette touche doit déclencher dans le jeu.
• La classe « Draw » défini les formes de la balle, du terrain et des raquettes puis les dessine dans la fenêtre.

Gui

KeyHandler

Draw:

Var

La classe Var contient toute les variables et les paramètres du programme :

• La fenêtre du programme et ses dimensions
• La position de la balle, des raquettes, la direction de la balle
• Le mouvement de la raquette que demande le joueur

Movement

A chaque cycle, La classe « Movement » calcule la nouvelle position de la raquette du joueur en fonction des touches appuyées.

 

GegnerMovement:

A chaque cycle, la classe « GegnerMovement » essaye de mettre la raquette du deuxième joueur (dans mon cas l’ordinateur) à la même hauteur que la balle quand la balle rentre dans la moitié du terrain du deuxième joueur. La vitesse de la raquette de l’ordinateur est limitée par le code. Donc il ne peut pas toujours gagner (ce serait trop facile pour lui de calculer plus vite… )

BallMovement:

A chaque cycle, la classe « BallMovement » calcule où se trouve la balle et ça dépend de la direction de la balle.

Attention ! Dans cette version du jeu, la balle se déplace toujours à la même vitesse. Ce n’était pas le cas dans la version originale. Dans la prochaine partie de mon Travail Personnel, je vais modifier le jeu pour qu’il fonctionne comme l’original.

BallKollision:

A chaque cycle, la classe « BallKollision » permet de calculer les angles de rebond de la balle pendant le jeu :

• Si la balle touche une raquette, la balle rebondit dans le même angle
• Et si la balle franchit un côté, elle est remise au milieu du terrain et elle repart vers le joueur. Et le point et ajouté au joueur qui a marqué.

 

 

Maintenant que nous connaissons le jeux Pong, intéressons-nous à la programmation d’une version de ce jeu en java !

Comment j’ai trouvé le tutorial

Je voulais trouver comment programmer un jeu simple sur java. Pour commencer j’ai recherché sur Google. Ensuite comme je n’ai rien trouvé je suis allé sur YouTube et j’ai trouvé un youtubeur qui a fait des tutoriels pour programmer le jeu Pong.

Le tutorial

Pour programmer Pong avec java j’ai donc regardé des tutoriels sur YouTube. (les 4 liens ci-dessous)

1: https://www.youtube.com/watch?v=d-U9RKG-uGw

2: https://www.youtube.com/watch?v=tXz48MWhcHY

3: https://www.youtube.com/watch?v=ORbpwl7oemA

4: https://www.youtube.com/watch?v=LpYOSD7X2Is

Le Youtubeur de ce Tutoriel s’appelle : FoX DeN. Son site web s’appelle : www.fox-den.de .

Son hobby c’est la programmation et il a déjà publié différents mini jeux, ainsi qu’un programme qu’on peut acheter sur son site web : Mapeditor. Ce logiciel permet de programmer très facilement de jeux en 2D.

La réalisation du tutorial dans mon Eclipse

Pendant le précèdent travail personnel, j’ai installé un logiciel (Eclipse) qui permet de programmer en java. Et comme je voulais programmer quelque chose en java ça m’a beaucoup aidé.

Pour programmer un jeu vidéo il faut faire plusieurs classes ou fichier qui contiennent chacun un morceau du programme.

J’ai appris qu’il fallait avoir beaucoup de patience pour programmer un jeu vidéo.

Pour programmer le jeu en suivant pas à pas les explications, j’ai bien travaillé pendant 4h.

Souvent c’était difficile car le tutoriel contenait des fautes, mais les corrigeait plus tard.

Alors quand on avait terminé une partie du jeu et qu’on le lançait il ne marchait pas. Ensuite avec mon père on a cherché où était les fautes, en essayant de comprendre ce que faisais le programme en détail. Ensuite en continuant la vidéo nous avons vu le youtubeur corriger ces propres fautes, et on retrouvait le fil du travail. C’était très intéressant car j’ai vu pour la première foi comment il fallait programmer un jeu pour qu’il fonctionne, et que cela demande beaucoup d’attention et de réflexion.

Le jeu en fonctionnement

Le Screenshot suivant présente le jeu lancé depuis mon environnement de programmation Java Eclipse.

Pendant que je prenais le temps de faire le Screenshot, l’ordinateur a marqué 4 points !

Allons plus loin ensemble  !

Comme je souhaite aussi continuer à apprendre la programmation, j’ai exploré le code du jeu :

• Etude du code du tutoriel Pong en Java

puis j’ai essayé d’enrichir cette version du jeu réalisée par FoX DeN.

• Modification du jeu avec une vitesse variable !
• Modification du jeu avec de la couleur !
• Modification du jeu pour jouer à deux !

Le code du jeu modifié est disponible sur GitHub, car je l’y ai publié !

• • Publication du code sur GitHub !