Code source du projet de jeu avec p5.js

Afficher/Masquer les commentaires

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>

On appelle les frameworks de p5.js.

<script language="javascript" src="JS/p5.js."/>
<script language="javascript" src="JS/p5.dom.js."/>
<script language="javascript" src="JS/p5.sound.js."/>

C'est le fichier sketch.js qui contient le code de notre jeu.

<script language="javascript" src="JS/sketch.js."/>
</head>

On définit la zone où sera placé le jeu ici myGame.

<div id="myGame"></div>
<body>
</body>
</html>

Afficher/Masquer les commentaires

On énumère les variables, mais ce n'est pas nécessaire en javascript.

var img;
var listeX= new Array();
var listeY= new Array();
var listeR= new Array();
var test;
var score=0;
var fond;
var couleur;
var couleur2;
var etat=false;

On définit les fonctions setup() et draw() comme dans processing.

function setup() {
  myCanvas =createCanvas(520, 350);
  myCanvas.parent('myGame');
  img = loadImage("data/moonwalk.jpg");
  mySound = loadSound('data/pan.mp3');
  couleur=color(255,8,24);
  couleur2=color(255,214,3);
}

function draw() {
  image(img, 0, 0,520,350);
  if(etat==false){
	stroke("red");
	fill("red");
	textSize(30);
	text("pour jouer appuyer sur ENTER", 60, 180);
	text("pour pause appuyer sur p", 100, 220);
  }	
  if(etat==true){
    stroke("white");
	fill("white");
    test=floor(random(0,30));
    if (test==0){
       ajouterBoule();
       }
   afficherBoule();
   push();
   noCursor();
   noFill();
   strokeWeight(2);
   stroke(couleur);
   ellipse(mouseX, mouseY, 30, 30);
   line(mouseX-30, mouseY, mouseX+30, mouseY);
   line(mouseX, mouseY-30, mouseX, mouseY+30);
   pop();
   bougerBoule();
   stroke("yellow");
   fill("yellow");
   textSize(16);
   text("votre score est de : "+score, 250, 20);
   }
}

On définit des fonctions pour notre jeu.

function ajouterBoule() {
  listeX=append(listeX,floor(random(-50, -10))); 
  listeY= append(listeY,floor(random(0, 300)));
  listeR=append(listeR,floor(random(20,50)));
 }

function afficherBoule(){
    for(var i=0;i<listeX.length;i++){
      ellipse(listeX[i],listeY[i],listeR[i],listeR[i]);
  }
}

function bougerBoule(){
  for (var i=0; i<listeX.length; i++) {
    var vx=int(random(1, 3));
    var vy=int(random(-5, 5));
    listeX[i]=listeX[i]+vx;
    listeY[i]=listeY[i]+vy;
  }
}

function jouerSon(){
if(mouseX>0 && mouseX<520 && mouseY>0 && mouseY<350 && etat==true){
mySound.play();
}
}

On définit les méthodes de p5.js (mousePressed(), mouseReleased() et keyPressed()) utiles pour notre jeu.

function mousePressed() {
  couleur=couleur2;
  jouerSon();
  for (var i=0; i<listeX.length; i++) {
    if (dist(mouseX, mouseY, listeX[i], listeY[i])<listeR[i]-10) {
      listeR.splice(i,1);
      listeX.splice(i,1);
      listeY.splice(i,1);
      i--;
      score=score+1;
    }
  }
}


function mouseReleased(){
  couleur=color(255,8,24);
}

function keyPressed() {
  if (keyCode === ENTER) {
    etat=true;
  } else if (keyCode === 80) {
    etat=false;
  }
}