Modification du design :

On va repartir d'une version du jeu de balles, qui fonctionne comme la précédente mais avec les modifications suivantes :

• le remplacement des composants de type "balle" par des "lutins image".
  (ce qui permet d'afficher des images).
• des changements de nom Balle1 devient lutinBalle, Balle2 devient lutinRaquette,
• l'ajout d'images dans les media : balle1.png, balle2.png, balleT.png, raquette.png et space.jpg
  disponibles à cette adresse http://onvaessayer.org/cycle4/pong/resources/media

Vous pouvez réaliser ces modifications vous-même, ou télécharger la version mise à jour que vous pouvez tester pour vérifier que le jeu de balles fonctionne comme avant.

remplacement des composants de type "balle" par des "lutins"

Modifications du design pour passer à Pong

type	catégorie	Nom	rôle	propriété	valeur
		Screen1	racine	alignt horiz. alignt vertical couleur fond image fond orient. écran status bar titre visible	centré haut gris clair space.jpg portrait Non Non
label	Interface	labelScore	compter le score	couleur fond taille Police largeur hauteur Texte couleur Texte	aucun 24 automatique automatique score : 0 rouge
cadre	dessin	Cadre1	cadre de jeu	couleur fond largeur hauteur	aucun remplir parent remplir parent
balle lutin image	dessin	balle1 lutinBalle		hauteur largeur image intervalle rotation vitesse	40 40 balleT.png 20 non coché 0
balle lutin image	dessin	balle2 lutinRaquette		hauteur largeur image intervalle rotation vitesse	35 120 raquette.png 20 non coché 0
notificateur	interface utilisateur	Notificateur1	messages et alertes
son	media	Son1	vibration
accéléromètre	capteurs	Accéléromètre1	déplacement raquette	sensibilité	modéré
horloge	capteurs	HorlogeAccelero	déplacement raquette	timer always fire chrono activé intervalle	non coché coché 20

Modification du code : jeu de balles → Pong:

La version qui coprend les mises à jour précédentes peut être téléchargée à cette adresse

Pour réaliser Pong on repart du jeu de balle, (avec la version modifiée du design). Vous pouvez commencer par désactiver tous les blocs et réactiver les scripts au fur et à mesure de leur modification.

On applique la décomposition précédente avec 2 nouvelles variables et 4 scripts à modifier :

1. initialisation des nouvelles variables : vitesseInitiale et accélération
2. modification du script de démarrage d'une partie : quand cadre1.touché
3. modification du script de déplacement de la raquette : quand horlogeAccelero.chronomètre
4. modification du script de collision entre balle et raquette : quand lutinBalle.collision
5. modification du script lié aux bords : quand lutinBalle.bord Atteint

Pour modifier le code avec App Inventor, suivez le tableau suivant. La décomposition déjà faite est rappelée à droite, et les blocs à modifier à gauche.

Jeu de balles balle 1   balle 2	Pong lutinBalle   lutinRaquette
initialisation de la variable score à 0	initialisation de la variable score à 0 initialisation de la variable vitesseInitiale à 5 initialisation de la variable acceleration à 0.5
	Afficher la déclaration des variabls pour Pong

Modification du script de démarrage d'une partie : quand cadre1.touché

Jeu de balles balle 1   balle 2	Pong lutinBalle   lutinRaquette
quand le joueur touche le cadre de dessin, démarrer une partie : mettre le score à 0 activer le déplacement de la balle2 (chronomètre) placer balle2 à un endroit aléatoire,	quand le joueur touche le cadre de dessin, démarrer une partie : mettre le score à 0 activer le déplacement de la raquette (chronomètre) placer raquette en bas au milieu faire descendre la balle depuis le haut, à la vitesse initiale, dans une orientation aléatoire entre -45° et -135°
	Afficher le code pour Pong

à chaque déclenchement du chronomètre : quand horlogeAccelero.chronomètre

Jeu de balles balle 1   balle 2	Pong lutinBalle   lutinRaquette
A chaque intervalle d'horloge (chronomètre) déplacer balle2 en x et y, selon inclinaison	A chaque intervalle d'horloge(chronomètre) déplacer raquette en x, à gauche ou à droite selon l'inclinaison
	Afficher le code pour Pong

quand la balle rentre en collision avec la raquette : quand lutinBalle.collision

Jeu de balles balle 1   balle 2	Pong lutinBalle   lutinRaquette
quand la balle2 entre en collision avec la balle1 : ajouter 1 au score, l'afficher dans Label Score, faire vibrer le smartphone, faire aller la balle1 à un endroit aléatoire, Si le score est égal ou supérieur à 10 désactiver le chronomètre afficher message : gagné	quand la raquette entre en collision avec la balle : ajouter 1 au score, l'afficher dans Label, faire vibrer, faire rebondir/ changer l'orientation de la balle avec un angle aléatoire entre 45° et 135° ajouter accélération à sa vitesse
	Afficher le code pour Pong

quand la balle atteint un bord : quand lutinBalle.bord Atteint

Jeu de balles balle 1   balle 2	Pong lutinBalle   lutinRaquette
quand la balle2 atteint bord, arrêter la partie et afficher "perdu"	quand la balle atteint bord ! si bord du bas (ou bas et gauche, ou bas et droit):     arrêter partie et afficher "perdu" sinon :     rebondir
Le bord atteint est un numéro compris entre -4 et 4, transmis en paramètre de l'évènement.     1: north, 3: east, -1: south, -3: west,     2: northeast, 4: southeast, -2: southwest, -4: northwest si 2 bords sont touchés en même temps Vous pouvez tester le bord touché avec ces nombres ou avec les constantes définies dans les composants lutin : si le bord est (4 ou -1 ou -2) ou (sudEst ou sud, ou sudOuest) : Arrêter la partie et afficher "perdu" sinon : rebondir sur le bord
	Afficher le code pour Pong

version finale des blocs