TP : Séance 2

TP : Séance 2

Dans cette séance nous allons nous intérresser à l’affichage graphique et aux interactions avec l’utilisateur·ice.

Pour voir le résultat de ce code cliquez sur “Code JS” puis sur “Graphic Output”.

Exercice 1

Recopiez ce code dans algoscript et observer la différence entre MouseClick et MouseMove.

function MouseClick(x,y) {
  Texte(x, y, 'Aie !!!', 'red');
}

function MouseMove(x,y) {
  CerclePlein(x, y, 5, 'black');
}

Exercice 2

Recopiez ce code et essayer de comprendre comment le faire fonctionner (regardez le nom de la fonction).

function Keypressed(c) {
  Texte(mouseX, mouseY, Ascii_vers_Caractere(c), 'black');
}

Exercice 3

1. Recopiez ce code et executez le.

function draw() {
  // Tout le code en dehors de cette fonction ne sera exécuté qu'une seule fois !
  Initialiser();
  RectanglePlein(mouseX, mouseY, 5, 100, 'blue');
  CerclePlein(posx, posy, 10, 'red');

  posx += vx;
  posy += vy;
}

function Keypressed(c) {
  // Lorsqu'on appuie sur le clavier le programme s'arrête
  noLoop();
}

// Position de la balle
var posx, posy;
posx = 150;
posy = 100;

// Vitesse de la balle
var vx, vy;
vx = 1;
vy = 1;

// Cette ligne va executer la fonction draw chaque milliseconde
Loop(-1);

Nous allons maintenant modifier ce code pour en faire un jeu de pong ! Aidez vous du memento (“Code JS” -> “Memento”).

1. Dans la fonction draw écrivez la ligne de code qui dessine un rectangle de 600 par 400 à l’aide de Rectangle(x, y, w, h, color) et ainsi délimiter une aire de jeu.
2. Identifiez et modifier les deux ligne de code qui gère la vitesse de la balle pour qu’elle aille 2 fois moins vite.
3. Ecrivez une condition pour modifier la vitesse de la balle lorsqu’elle atteint un des bords de l’aire de jeu de façon à ce qu’elle “rebondisse” contre les bords.
4. Dans un jeu de pong la barre monte et descend mais ne se déplace pas de droite à gauche ! Identifiez et modifiez la ligne qui affiche la barre de telle sorte que sa position en x soit fixe.
5. La balle ne doit pas rebondir contre le mur de droite mais contre la barre. Modifiez la condition qui fait rebondir la balle sur le mur de gauche pour qu’elle rebondisse seulement si elle se trouve sur la barre (vérifier ses coordonnées en y et en x).

Pour aller plus loin:

1. Afficher un message qui signifie que l’on a perdu lorsque la balle est sortie de la zone de jeu (avec Texte(x, y, chaine, couleur))

2. Avec la fonction MouseClick utilisée dans l’exercice 1 faite en sorte de recommencer une partie en positionnant la balle aléatoirement dans la zone de jeu (Hasard(n) permet d’obtenir un nombre entre 0 et n).