Quelques lignes de code

Code principal
Reste du code
Commentaires (enseignant)

Ci-dessous, la fonction "draw" est la plus importante : c'est elle qui dessine les éléments du jeu.

La fonction "init" est indispensable : c'est elle qui permet de créer la zone graphique où il y aura le jeu. Cette zone a pour dimensions : 300x300

Fonctions utilisables :
- init()
- repeatdraw(n,t) //répéter draw n fois avec une attente de t ms à chaque fois
- loopdraw() // exécuter la fonction "draw" toutes les 10 millisecondes !
- circle(x,y,r,'color') //cette fonction permet de tracer un disque (cercle plein), de centre (x,y) et de rayon r
//pour mettre la couleur, utiliser le mot anglais entre guillemets simples,
//par exemple 'red' pour la couleur rouge
- clear() //cette fonction permet de tout effacer
- alea(a,b) //cette fonction renvoie un nombre entier au hasard compris entre a et b (inclus)
- axes() //permet d'afficher les axes du repère utilisé

suiv.

var dx = 2;
var dy = 4;
var WIDTH;
var HEIGHT;
var ctx;

function init() {
  // cette fonction permet d'initialiser et de démarer le jeu
  ctx = $('#canvas')[0].getContext("2d");
  WIDTH = $("#canvas").width();
  HEIGHT = $("#canvas").height();
}

function repeatdraw(n,t) {
  //répéter draw n fois avec une attente de t ms à chaque fois
  var rep=0;
  var time=0;
  while( rep < n){
    time=rep*t;
    setTimeout(draw,time);
    rep++;
  }      
}

function loopdraw() {
  // la ligne suivante permet d'exécuter la fonction "draw" toutes les 10 millisecondes !
  return setInterval(draw, 10);
}

function rect(x,y,w,h,color) {
  ctx.beginPath();
  ctx.rect(x-w/2,HEIGHT-(y+h/2),w,h);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

function explode(cx,cy,color){
  // Cette fonction affiche une explosion centrée au point de 
  // coordonnées (x,y).
  // la couleur est 'color' : par exemple, pour avoir du orange, 
  // indiquer 'orange'.
  var spikes=13;
  var outerRadius=30;
  var innerRadius=10;
  var rot=Math.PI/2*3;
  cy=HEIGHT-cy
  var xx=cx;
  var yy=cy;
  var step=Math.PI/spikes;
  ctx.beginPath();
  ctx.moveTo(cx,cy-outerRadius);
  for(i=0;i<spikes;i++){
    xx=cx+Math.cos(rot)*outerRadius;
    yy=cy+Math.sin(rot)*outerRadius;
    ctx.lineTo(xx,yy);
    rot+=step;
    xx=cx+Math.cos(rot)*innerRadius;
    yy=cy+Math.sin(rot)*innerRadius;
    ctx.lineTo(xx,yy);
    rot+=step;
  }
  ctx.lineTo(cx,cy-outerRadius);
  ctx.stroke();
  ctx.closePath();
  ctx.fillStyle=color;
  ctx.fill();
}

function circle(x,y,r,color) {
  //cette fonction permet de tracer un disque (cercle plein), de centre (x,y) et de rayon r
  //pour mettre la couleur, utiliser le mot anglais entre guillemets simples, 
  //par exemple 'red' pour la couleur rouge
  ctx.beginPath();
  ctx.arc(x, HEIGHT-y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  ctx.fillStyle='white';
  ctx.rect(0,0,WIDTH,HEIGHT);
}

function alea(a,b) {
  //cette fonction renvoie un nombre entier au hasard compris entre a et b (inclus)
  return Math.floor(Math.random()*(b+1-a)+a);
}
  
function axes() {
  ctx.beginPath();
  ctx.moveTo(5,HEIGHT);
  ctx.lineTo(5,0);
  ctx.lineTo(0,5);
  ctx.moveTo(10,5);
  ctx.lineTo(5,0);
  ctx.moveTo(0,HEIGHT-5);
  ctx.lineTo(WIDTH,HEIGHT-5);
  ctx.lineTo(WIDTH-5,HEIGHT);
  ctx.moveTo(WIDTH-5,HEIGHT-10);
  ctx.lineTo(WIDTH,HEIGHT-5);
  ctx.stroke();
  ctx.strokeText("300",10,10);
  ctx.strokeText("300",WIDTH-20,HEIGHT-10);
  ctx.strokeText("0",10,HEIGHT-10);
}

Utilisation avec vidéo-projecteur. Le but est de faire un peu d'algo mais surtout de motiver le calcul des intersections entre droite et cercle.

Il faut expliquer :

"var"
"function... {...}"
lignes de commentaires : "//..."
"(x,y)" : origine et axes du repère (REMARQUE : l'axe des ordonnées est ici dans le sens habituel des mathématiciens, ET PAS dans le sens habituel des informaticiens...) (afficher les axes grâce à "axes()")
l'illusion du mouvement est créée par une succession très rapide d'images (changer la vitesse grâce à "repeatdraw(50,600);"

Expliquer le "if" et faire en sorte que le carré vert explose quand x dépasse 300
-->explode(x,y,'yellow');

Question : comment faire en sorte que le carré vert se déplace en direction du disque rouge
--> à chaque itération, déplacement de "h" vers la droite ET déplacement de "h2" vers le haut : on peut dessiner l'escalier montrant le coefficient directeur de la droite...