Tests et conditions

Code principal
Reste du code
Commentaires (enseignant)

Ici, la balle s'arrête lorsqu'elle arrive au bord de la fenêtre. Pour cela, on utilise "if(condition)" et "else".

Faites les modifications que vous voulez au jeu (des suggestions sont proposées ci-dessous).

Vous disposez des fonctions suppémentaires suivantes :
- rect(x,y,w,h,'color') //cette fonction affiche un rectangle de centre (x,y), de largeur w et de hauteur h
- explode(x,y,'color') //cette fonction affiche une explosion en (x,y)

Quelques exemples de modifications à réaliser :
1- Comment déplacer la balle vers le bas et l'arrêter quand elle arrive au bord de la fenêtre du jeu ?
2- Comment déplacer la balle horizontalement et l'arrêter quand elle arrive au bord de la fenêtre du jeu ?
3- Comment faire en sorte que lorsque la balle sort de la fenêtre du jeu, elle réapparait par le bord opposé ?
4- Comment faire exploser la balle à un certain moment ?
5- Comment remplacer la balle par un rectangle ?
6- Comment faire en sorte que plusieurs objets se déplacent ?

Rappel de quelques fonctions disponibles :
- 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
- rect(x,y,w,h,'color') //cette fonction affiche un rectangle de centre (x,y), de largeur w et de hauteur h
- clear() //cette fonction efface tout
- alea(a,b) //cette fonction renvoie un nombre entier au hasard compris entre a et b (inclus)
- explode(x,y,'color') //cette fonction affiche une explosion en (x,y)

Dans la condition, pour mettre "et", taper "&&" (touche 1 au dessus du a et du z). Pour mettre "ou", taper "||" (touche 6 avec AltGr).

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

Expliquer que si plusieurs instructions sont mises dans un "if" ou dans un "else", alors elles doivent être entre accolades.