<?xml version="1.0" encoding="UTF-8"?>

<upm-export>
	<title>Enseignement de l&#039;informatique et du numérique au lycée Boissy d&#039;Anglas</title>
	<link>https://icn-isn-boissy.yj.fr/wp</link>
	<description></description>
	<pubDate>Wed May 6 11:58:48 2026 / +0000  GMT</pubDate>
	<generator>Universal Post Manager 1.1.2 [ www.ProfProjects.com ] </generator>
	<language></language>
	
			<item>
			<title>Mise au point d'un jeu de Casse-briques avec Processing</title>
			<link>http://icn-isn-boissy.yj.fr/wp/?p=110</link>
			<pubDate>Wed May 6 11:58:48 2026 / +0000  GMT</pubDate>
			<guid isPermaLink="false">http://icn-isn-boissy.yj.fr/wp/?p=110</guid>
			<content-encoded><![CDATA[L'objectif de cette activité est d'apprendre quelques rudiments de programmation sous Processing par la mise au point d'un petit jeu de Casse-briques.

L'objectif de cette activité est d'apprendre quelques rudiments de programmation sous Processing par la mise au point d'un petit jeu de Casse-briques.

<!--more-->

On suppose que Processing a été correctement installé.

On s'aidera pour cela :
<ul>
 	<li>Du <a href="http://fr.flossmanuals.net/processing/introduction/" target="_blank">manuel en français de Processing</a> du site <a href="http://fr.flossmanuals.net" target="_blank">flossmanuals.net</a> (réalisé pour la version 2 de Processing).</li>
 	<li>De l'aide de Processing (voir Aide/Documentation ; on peut aussi placer le curseur sur mot et utiliser Aide/Chercher dans la documentation).</li>
</ul>
Il est demandé de prendre régulièrement des notes dans votre carnet de bord. Pour cela on pourra s'aider des balises &lt;pre&gt; et &lt;code&gt;.  Exemple :
<pre>&lt;pre&gt;&lt;code&gt;
Quelques lignes de code
&lt;/code&gt;&lt;/pre&gt;</pre>
<h2>Récupération du fichier</h2>
Pour commencer, télécharger le fichier <a href="http://icn-isn-boissy.yj.fr/wp/wp-content/uploads/2015/10/CasseBriques.zip">CasseBriques.zip</a> et le décompresser dans votre <em>sketchbook</em>.

Lancer le programme pour le tester.
<h2>Tâche n°1 : Rédiger la documentation des fonctions nettoyer(), bouger() et dessiner()</h2>
<strong>Cahier des charges : </strong>Les fonctions <em>nettoyer</em>(), <em>bouger</em>() et <em>dessiner</em>() doivent être documentées à l'aide de commentaires dans le code du programme. La documentation permet de comprendre le rôle et le fonctionnement de chaque fonction.

<strong>Ressource :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-commentaires/" target="_blank">http://fr.flossmanuals.net/processing/les-commentaires/</a></li>
</ul>
<strong>Indications :</strong>
<ul>
 	<li>Identifier dans le programme les lignes de la fonction <em>draw</em>() où sont appelées les fonctions <em>nettoyer</em>(), <em>bouger</em>() et <em>dessiner</em>().</li>
 	<li>Pour comprendre l'effet d'une fonction, on peut désactiver son appel en commentant la ligne correspondante dans le programme.</li>
 	<li>Les documentations des fonctions <em>nettoyer</em>(), <em>bouger</em>() et <em>dessiner</em>() doivent se trouver aux lignes respective n° :  98, 107 et 126.</li>
</ul>
<h2>Tâche n°2 : Calculer et afficher le score du joueur</h2>
<strong>Cahier des charges :</strong> Le joueur gagne 100 points chaque fois qu'une brique est touchée. Le score s'affiche dans le bandeau en haut à droite.

<strong>Ressources :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-variables/" target="_blank">http://fr.flossmanuals.net/processing/les-variables/</a></li>
 	<li><a href="http://fr.flossmanuals.net/processing/lespace-de-dessin/" target="_blank">http://fr.flossmanuals.net/processing/lespace-de-dessin/</a></li>
</ul>
<strong>Indications :</strong>
<ul>
 	<li>Après avoir lu la documentation sur les variables, déterminer le type à choisir pour la variable <em>score</em>.</li>
 	<li>Une variable peut-être <em>globale</em> ou <em>locale</em>, selon que l'on peut y accéder partout dans le programme ou seulement là où elle est déclarée (par exemple dans une fonction ou une boucle). Déterminer si la variable <em>score</em> doit être locale ou globale.</li>
 	<li>Les variables globales sont déclarées au tout début du programme (voir le commentaire au début du programme). Les variables locales sont déclarées là où on en a besoin. Déclarer correctement, avec le bon le type et au bon endroit, la variable <em>score</em>.</li>
 	<li>Initialiser dans la fonction <em>setup</em>() la variable <em>score</em> à la valeur qu'elle doit prendre au début du jeu.</li>
 	<li>Repérer dans le programme l'endroit où est identifié qu'une brique a été touchée [<em>aide : chercher dans la fonction </em>rebond<em>()</em>]. Ajouter à cet endroit 100 point à la variable <em>score</em>.</li>
 	<li>Afficher le score à droite du bandeau dans la fonction <em>dessiner_bandeau</em>() à l'aide des fonctions <em>textAlign</em>() et <em>text</em>(). On pourra utilement utiliser les variables <em>width</em> et <em>height</em> de Processing qui contiennent les dimensions de la fenêtre de dessin.</li>
</ul>
<h2>Tâche n°3 : Afficher un message avant de lancer le jeu</h2>
<strong>Cahier des charges :</strong> Afficher le message "Pret ?" avant de lancer le jeu.  Pour cela écrire l'en-tête de la fonction <em>afficher</em>, dont le code est commenté tout à la fin du programme.

<strong>Ressources :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-methodes/">http://fr.flossmanuals.net/processing/les-methodes/</a> (on pourra se limiter à consulter les trois dernières parties, <em>La valeur de retour d'une méthode</em>, <em>Les paramètres d'une méthode </em> et <em>La portée des variables</em>).</li>
</ul>
<strong>Indications</strong>
<ul>
 	<li>Repérer à la toute fin du fichier le code de la fonction <em>afficher</em> qui est commenté.</li>
 	<li>La fonction <em>afficher</em> prend comme paramètre un <em>message</em> et ne renvoie rien. Déterminer le type de la fonction <em>afficher</em> et de son paramètre <em>message</em>.</li>
 	<li>Écrire à la place de la ligne "// EN TÊTE À CRÉER", l'en-tête de la fonction <em>afficher</em>.</li>
 	<li>Modifier la fonction <em>setup</em>(), qui est appelée au début du jeu, pour afficher le message voulu à l'aide de la fonction <em>afficher</em>().</li>
</ul>
<h2>Tâche n°4 : Traiter la sortie du terrain de la balle</h2>
<strong>Cahier des charges :</strong> Pour le moment la sortie du terrain de la balle n'est pas gérée. Écrire la fonction <em>perdre</em> qui affiche le message "Perdu !" et l'appeler lorsque la balle sort du terrain.

<strong>Ressource :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-conditions/" target="_blank">http://fr.flossmanuals.net/processing/les-conditions/</a></li>
</ul>
<strong>Indications :</strong>
<ul>
 	<li>Écrire la fonction <em>perdre</em> qui affiche le message voulu à l'aide de la fonctions <em>afficher</em>.</li>
 	<li>Quelle est la condition qui permet de savoir si la balle est sortie de la fenêtre ?</li>
 	<li>Identifier dans le programme l'endroit où tester la sortie de la balle.</li>
 	<li>Se servir des variables de Processing comme <em>width</em> ou <em>height</em>.</li>
</ul>
<h2>Tâche n°5 : Calculer automatiquement la position des briques</h2>
<strong>Cahier des charges :</strong> Créer une fonction <em>repartir</em> permettant de calculer de manière automatique la position des différentes briques du mur. Cette fonction renverra la position sur une longueur donnée de l'élément n°<em>i</em> sur un total de <em>N</em> éléments. Utiliser cette fonction pour répartir les briques du mur sur toute la largeur, mais seulement sur la moitié supérieure de la fenêtre. Modifier pour cela la fonction <em>creer_mur</em>().

<strong>Ressource :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-methodes/" target="_blank">http://fr.flossmanuals.net/processing/les-methodes/</a></li>
 	<li><a href="http://fr.flossmanuals.net/processing/lespace-de-dessin/" target="_blank">http://fr.flossmanuals.net/processing/lespace-de-dessin/</a></li>
 	<li><a href="http://fr.flossmanuals.net/processing/les-formes/" target="_blank">http://fr.flossmanuals.net/processing/les-formes/</a></li>
</ul>
<strong>Indications :</strong>
<ul>
 	<li>Les briques sont dessinées avec l'option <em>rectMode(CENTER)</em>.</li>
 	<li>Identifier les paramètres à fournir à la fonction, leurs types, et le type de la grandeur de retour.</li>
 	<li>Il faut utiliser deux fois la fonction <em>repartir</em> : une fois pour l'abscisse, et une fois pour l'ordonnée de la brique.</li>
 	<li>Tester la fonction pour différentes configurations des 8 briques du programme (par exemple 2×4, 4×2, 2+4+3, etc.).</li>
</ul>
<h2>Tâche n°6 : Réécrire la fonction creer_mur()</h2>
<strong>Cahier des charges :</strong> Réécrire la fonction creer_mur() à l'aide de boucles afin qu'elle soit plus lisible et occupe le moins de lignes possibles.

<strong>Ressource :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-repetitions/" target="_blank">http://fr.flossmanuals.net/processing/les-repetitions/</a></li>
 	<li><a href="http://fr.flossmanuals.net/processing/les-listes/" target="_blank">http://fr.flossmanuals.net/processing/les-listes/</a></li>
</ul>
<h2>Tâche n°7 : Modifier le nombre et l'état des briques</h2>
<strong>Cahier des charges :</strong> Modifier le programme de manière à ce que le nombre de briques soit fixé automatiquement par le nombre de lignes et de colonnes voulus. Fixer ceux-ci à 6 lignes de 8 briques. Les briques de la ligne n°1 (en partant du bas) sont détruite en un coup, celles de la ligne n°2 en deux coups, etc.

<strong>Ressource :</strong>
<ul>
 	<li><a href="http://fr.flossmanuals.net/processing/les-repetitions/" target="_blank">http://fr.flossmanuals.net/processing/les-repetitions/</a></li>
 	<li><a href="http://fr.flossmanuals.net/processing/les-listes/" target="_blank">http://fr.flossmanuals.net/processing/les-listes/</a></li>
</ul>
<strong>Indication :</strong>
<ul>
 	<li>Le nombre de coups nécessaire pour détruire une brique est fixé par la variable <em>etat</em> de la classe <em>Brique</em> (voir fichier <em>Brique.pde</em>).</li>
</ul>
<h2>Pour finir</h2>
Après avoir complété les sept tâches précédentes et avoir pris des notes sur chacune dans votre carnet de bord, plusieurs pistes d'améliorations peuvent être envisagées pour le casse-brique. Par exemple :
<ul>
 	<li>Utiliser un nombre de vie limité, et l'afficher dans le bandeau.</li>
 	<li>Au bout d'un certain temps, renforcer la résistance des briques, et/ou diminuer la taille de la raquette.</li>
 	<li>Jouer avec plusieurs balles.</li>
 	<li>Créer plusieurs niveaux, avec de plus en plus de briques, ou des brique de plus en plus difficiles à détruire.</li>
 	<li>etc.</li>
</ul>]]></content-encoded>
			<excerpt-encoded><![CDATA[]]></excerpt-encoded>
			<wp-post_id>110</wp-post_id>
			<wp-post_date>2015-10-07 22:29:12</wp-post_date>
			<wp-post_date_gmt>2015-10-07 20:29:12</wp-post_date_gmt>
				</item>
</upm-export>
