À faire vous même 4.1

Écrivez un programme permettant d'afficher 2 sprites à l'écran. Ces 2 sprites devront avoir une vitesse d'origine et une position d'origine aléatoires. Les 2 sprites devront rebondir sur les bords de la fenêtre de jeu.

Imaginez que maintenant nous désirions créer 10 sprites. Les choses commenceraient à se compliquer. Pour nous simplifier la tâche, p5.play nous propose de créer un groupe.

À faire vous même 4.2

Saisissez le code suivant dans le fichier script.js et testez cet exemple 


var img;
var group_smiley;
function preload() {
    img=loadImage("asset/smiley.png")
}

function setup() {
    createCanvas(800,300);
    group_smiley=new Group();
    for (i=0;i<10;i=i+1){
        var smiley_sprite;
        smiley_sprite=createSprite(random(20,780),random(20,280));
        smiley_sprite.addImage(img);
        smiley_sprite.setVelocity(random(-5,5),random(-5,5));
        group_smiley.add(smiley_sprite);
	}
    wall_g=createSprite(-5,150,10,300);
    wall_d=createSprite(805,150,10,300);
    wall_h=createSprite(400,-5,800,10);
    wall_b=createSprite(400,305,800,10);
    wall_d.immovable=true;
    wall_g.immovable=true;
    wall_h.immovable=true;
    wall_b.immovable=true;
}
function draw() {
    background(240,240,240);
    group_smiley.bounce(wall_g);
    group_smiley.bounce(wall_d);
    group_smiley.bounce(wall_b);
    group_smiley.bounce(wall_h);
    drawSprites();
}

Analysons le code ci-dessus :

Nous commençons par créer un groupe : group_smiley=new Group(); (ce groupe se nommera group_smiley.

La boucle for permet de créer 10 sprites. Grâce à la méthode add (group_smiley.add(smiley_sprite);) chaque sprite est "rangé" dans le groupe group_smiley

Pour la collision avec les bords de la fenêtre, nous utilisons la méthode bounce avec le groupe group_smiley (exemple : group_smiley.bounce(wall_g);, grâce à cette ligne, tous les sprites appartenant au groupe group_smiley rebondiront sur le bord gauche de la fenêtre de jeu).

À faire vous même 4.3

Pour qu'un sprite appartenant à un groupe group_smiley rebondisse sur les autres membres du groupe, il suffit d'écrire : group_smiley.bounce(group_smiley);.

Écrivez un programme permettant d'obtenir ceci :

À faire vous même 4.4

Écrivez un programme permettant d'obtenir ceci (à chaque collision entre le sprite "rigolant" et un des sprites "sanglants" le score augmente d'une unité, vous pouvez télécharger l'image du sprite "sanglant" ici).

À faire vous même 4.5

Saisissez le code suivant dans le fichier script.js et testez cet exemple 


var img;
var smiley_sprite_1;
var smiley_sprite_2;
var cont=false;
function preload() {
	img=loadImage("asset/smiley.png");
}

function setup() {
    createCanvas(800,300);
    smiley_sprite_1=createSprite(100,150);
    smiley_sprite_1.addImage(img);
    smiley_sprite_1.setVelocity(3,0);
    smiley_sprite_1.mass=1;
    smiley_sprite_2=createSprite(600,150);
    smiley_sprite_2.addImage(img);
    smiley_sprite_2.immovable=true;
}

function draw() {
	background(240,240,240);
	smiley_sprite_1.bounce(smiley_sprite_2,contact);
	if (cont==true){
		text("il y a eu contact !",350,100)
	}
	drawSprites();
}
function contact(){
	cont=true;

}

À faire vous même 4.6

Saisissez le code suivant dans le fichier script.js et testez cet exemple 


var img_1;
var img_2;
var smiley_sprite;
var group_smiley;
var score=0;
function preload() {
	img_1=loadImage("asset/smiley.png")
	img_2=loadImage("asset/smiley_blood.png")
}
function setup() {
	createCanvas(800,300);
	textSize(32);
	smiley_sprite=createSprite(random(20,780),random(20,280));
	smiley_sprite.addImage(img_1);
	smiley_sprite.setVelocity(random(-5,5),random(-5,5));
	group_smiley=new Group();
	for (i=0;i<10;i=i+1){
		var smiley_sprite_blood;
		smiley_sprite_blood=createSprite(random(20,780),random(20,280));
		smiley_sprite_blood.addImage(img_2);
		smiley_sprite_blood.setVelocity(random(-5,5),random(-5,5));
		group_smiley.add(smiley_sprite_blood);
	}
	wall_g=createSprite(-5,150,10,300);
	wall_d=createSprite(805,150,10,300);
	wall_h=createSprite(400,-5,800,10);
	wall_b=createSprite(400,305,800,10);
	wall_d.immovable=true;
    	wall_g.immovable=true;
    	wall_h.immovable=true;
    	wall_b.immovable=true;
}
function draw() {
	background(240,240,240);
	group_smiley.bounce(wall_g);
	group_smiley.bounce(wall_d);
	group_smiley.bounce(wall_b);
	group_smiley.bounce(wall_h);
	smiley_sprite.bounce(wall_g);
	smiley_sprite.bounce(wall_d);
	smiley_sprite.bounce(wall_b);
	smiley_sprite.bounce(wall_h);
	group_smiley.bounce(group_smiley);
	smiley_sprite.overlap(group_smiley,contact);
	text("Score : "+score,10,50)
	drawSprites();
}
function contact(sprite_1,sprite_2){
	sprite_2.remove();
	score=score+1;
}

Comme vous pouvez le constater ci-dessus, la fonction de callback contact peut prendre en paramètres les 2 sprites concernés par la collision. Si vous avez X.overlap(Y,contact); et function contact(sprite_1,sprite_2) alors X correspond à sprite_1 et Y correspond à sprite_2 (avec X et Y des sprites). Si X ou Y est un groupe de sprite (comme dans l'exemple ci-dessus), le fonctionnement reste le même : sprite_1 ou sprite_2 correspond au sprite du groupe qui a été concerné par la collision.

À faire vous même 4.7

Pour terminer cette activité, vous allez créer un petit jeu vidéo (il faut cliquer sur la fenêtre de jeu à l'aide du pointeur de la souris faute de quoi vous n'arriverez pas à diriger le sprite à l'aide des flèches):

Le sprite "souriant" est dirigé par le joueur à l'aide des flèches du clavier. Ce sprite doit attraper le plus possible de sprite "sanglant" en moins de 8 secondes.

Pour vous aider :