Avant cette séance nous avons télechargé Processing sur nos Iphone et Meryem a adapté le code afin de l'exécuter sur le portable. Sachant que le téléphone est tactile, il a fallu créer des carrés sur l'écran pour représenter les touches avec un carré pour chaque direction (droite, gauche, haut, bas). Voici le code:

int carrey=0;

int cercle = int(random (0,19));

int cerclex = 0;

int cercley = 0;

int a=20;

int compteur=0;

void setup() {

size(screen.width, screen.height);

frameRate(20);

}

void draw () {

background (#70DEAD);

compteur++;

if (compteur==50){compteur =0;

carrex=carrex+a;}

fill(#0A78FA);

rect(carrex,carrey,20,20);

fill(255);

rect(0,380,100,80);

rect(100,380,100,80);

rect(200,380,100,80);

rect(300,380,100,80);

fill(0);

textSize(20);

text("DROITE",15,423);

text("GAUCHE",110,423);

text("HAUT",223,423);

text("BAS",332,423);

cerclex=20*cercle+10;

cercley=20*cercle+10;

for (int i=0; i<400; i=i+20) {

line(0, i,400,i);}

for (int z=0; z<400; z=z+20) {

line(z,0,z,380);}

if (carrex==cerclex-10 && carrey==cercley-10) {cercle = int(random (0,19)); }

fill(#FA0A52);

ellipse(cerclex,cercley,19,19);

if (mousePressed && mouseX<380 && mouseX<100){

carrex=carrex+a; compteur=0;}

if (mousePressed && mouseX<380 && mouseX<200 && mouseX>100){

carrex=carrex-a; compteur=0;}

if (mousePressed && mouseX<380 && mouseX<300 && mouseX>200){

carrey=carrey-a; compteur=0;}

if (mousePressed && mouseX<380 && mouseX<400 && mouseX>300) {

carrey=carrey+a; compteur=0;}

fill(0);

if (carrex>width){ textSize(40); text("GAMEOVER",90,200);}

if (carrex<0) { textSize(40); text("GAMEOVER",90,200);}

if (carrey>height) { textSize(40); text("GAMEOVER",90,200);}

if (carrey<0) { textSize(40); text("GAMEOVER",90,200);}

}

Pendant la séance, après de nombreuses recherches et tentatives, nous avons cherché dans des exemples de Processing puis sur internet un moyen de rajouter un carré à notre carré initial pour créer notre serpent, lorsque celui-ci touche le cercle (la pomme). Mais nous n'avons finalement pas trouvé de réponse à notre question à la fin de la séance. Nous y réfléchirons chez nous puis lors de la séance suivante.

Pendant que Meryem continuait les recherches, Ophélie a créé un score qui s'affiche et qui augmente de 1 lorsque le carré touche le cercle. Le score s'affiche lorsque la partie est perdu, le message "Game Over" s'affiche avec le score. Voici les lignes correspondantes:

int score=0;

// dans le draw

if (carrex==cerclex-10 && carrey==cercley-10) {cercle = int(random (0,19));

score=score+1;    }

fill(0);

textSize(20);

text(score,200,20);

fill(0);

if (carrex>400) { textSize(40); text("GAMEOVER",90,190);               text("Score:",120,250); text(score,250,250);    }

if (carrex<0) { textSize(40); text("GAMEOVER",90,190); text("Score:",120,250);text(score,250,250);    }

if (carrey>400) { textSize(40); text("GAMEOVER",90,190); text("Score:",120,250);text(score,250,250);    }

if (carrey<0) { textSize(40); text("GAMEOVER",90,190); text("Score:",120,250);text(score,250,250);    }