Intervalles et collisions

Code principal
Reste du code
Commentaires (enseignant)

Il faudrait détecter quand le carré rouge touche le rectangle vert...

Travail (activité en classe entière) :
- étudier une stratégie permettant de détecter si deux rectangles sont en collision
- coder une fonction "intersect(a1,b1,a2,b2)" qui détecte si les intervalles [a1 b1] et [a2 b2] ont une intersection vide
- coder une fonction "collision(x1,x2,w1,h1,x2,y2,w2,h2)" qui détecte si deux rectangles sont en collision
- déclencher une explosion si le carré rouge atteint le rectangle vert...

suiv. préc.

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 loopdraw() {
  // la ligne suivante permet d'exécuter la fonction "draw" toutes les 10 millisecondes !
  return setInterval(draw, 10);
}

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 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 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 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 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);
}

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();
}

Travail à faire avec un vidéo-projecteur.

Expliquer les différents sens de l'égalité : "=" et "==".

Les fonctions peuvent être mises n'importe où dans le code (sauf dans une autre fonction !)

Pour s'amuser avec les fonctions, il y a la page suivante...

Fiche-élève

solution :

function intersect(a1,b1,a2,b2){
//renvoie "false" si l'intersection de [a1 a2] et [b1 b2] est vide
if(b1 < a2 | | b2 < a1) return false;
else return true;
}

function collision(x1,y1,w1,h1,x2,y2,w2,h2){
//renvoie "true" si les deux rectangles se rencontrent
if( intersect(x1-w1/2,x1+w1/2,x2-w2/2,x2+w2/2) && intersect(y1-h1/2,y1+h1/2,y2-h2/2,y2+h2/2) ) return true;
else return false;
}

et :

if (collision(x1,y1,10,10,x2,y2,30,10)) explode(x1,y1,'red');