Codage simple exo Javascript

Messages postés
4
Date d'inscription
dimanche 6 mars 2016
Statut
Membre
Dernière intervention
7 mars 2016
- - Dernière réponse : ucfoutu
Messages postés
18038
Date d'inscription
lundi 7 décembre 2009
Statut
Modérateur
Dernière intervention
11 avril 2018
- 7 mars 2016 à 18:18
Bonjour,

Je suis en train d'aider une amie sur un exo qu'elle doit faire en Javascript. Voilà son brief :

C'est un canvas de 350 sur 500px et le but c'est de faire apparaître aléatoirement des carrés depuis le haut du canvas, qu'ils tombent jusqu'en bas du canvas. Je voulais que lorsqu’on clique sur un carré, le carré disparaisse. En fait le but du jeu est simple : il faut cliquer sur les carrés pour les faire disparaître avant qu'ils ne touchent le bas du canvas sinon le jeu est perdu.

De mon côté, je n'ai eu que quelques cours, je suis donc totalement perdue et à la recherche d'un personne qui pourrait nous donner un gros coup de pousse...

Pour ceux que ça intéresse, elle m'a laissé des fichiers que je veux mettre à disposition.

D'avance merci,

Bonne journée
Afficher la suite 

2 réponses

Messages postés
14026
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
5 décembre 2019
322
ClaDb
Messages postés
4
Date d'inscription
dimanche 6 mars 2016
Statut
Membre
Dernière intervention
7 mars 2016
-
Après voir suivi ce lien, je me permets d'ajouter des précisions :

Sur le codage suivant, le canvas a été créé avec un carré qui tombe. Par contre il disparaît tout seul en plein milieu et je ne comprends pas du tout pourquoi...

Le codage (uniquement la partie "script") :

<script type="text/javascript">


var NBR_LIGNES = 5;
var NBR_BRIQUES_PAR_LIGNE = 8;
var BRIQUE_WIDTH = 48;
var BRIQUE_HEIGHT = 15;
var ESPACE_BRIQUE = 2;
var BARRE_JEU_WIDTH = 85;
var BARRE_JEU_HEIGHT = 10;
var DEPLACEMENT = 15;
var ZONE_JEU_WIDTH = 400;
var ZONE_JEU_HEIGHT = 300;
var DIMENSION_BALLE = 8;
var vitesse_balle = 1;

 
var tabBriques; // tableau pour insérer les briques
var barreX; //bouge droite à gauche
var barreY; //va pas bouger
var context;
var balleX = 50;
var balleY = 50;
var direction_balleX = 1;
var direction_balleY = -1;
var taille_tab_briques_hauteur = (BRIQUE_HEIGHT+ESPACE_BRIQUE)*NBR_LIGNES;
var boucle_du_jeu;
var gagne=0;
var nb_touche;
var nb_cases;
var tabCases;


window.addEventListener('click', function initialisation () {
 canvas = document.getElementById('canvasRox');
 context = canvas.getContext('2d');

  
// Initialisations des variables
 ZONE_JEU_WIDTH = canvas.width;
 ZONE_JEU_HEIGHT = canvas.height;
 barreX = (ZONE_JEU_WIDTH/2)-(BARRE_JEU_WIDTH/2);
 barreY = (ZONE_JEU_HEIGHT-BARRE_JEU_HEIGHT);
 balleX = 0;
 balleY = 300;
 creationBriques(context, NBR_LIGNES, NBR_BRIQUES_PAR_LIGNE, BRIQUE_WIDTH, BRIQUE_HEIGHT, ESPACE_BRIQUE);
 boucleJeu = setInterval(refreshGame,10);
 window.document.onkeydown = deplabarre;
 nb_touche = 0, nb_cases = tabCases[0];
}, false);



 

//réaffichage du jeu
function refreshGame() {
 clearContexte(context, 0, ZONE_JEU_WIDTH, 0, ZONE_JEU_HEIGHT);

//combien il reste de briques
 gagne=1;
 for (var i=0; i<tabBriques.length; i++) {
  context.fillStyle = "pink";
  for (var j=0; j<tabBriques[i].length; j++) {
   if (tabBriques[i][j] == 1) {
    context.fillRect((j*(BRIQUE_WIDTH+ESPACE_BRIQUE)),(i*(BRIQUE_HEIGHT+ESPACE_BRIQUE)),BRIQUE_WIDTH, BRIQUE_HEIGHT);
    gagne = 0;
   }
  }
 }

 
// Réaffichage des briques
 for (var i=0; i < tabBriques.length; i++) {
  context.fillStyle = "pink";
  for (var j=0; j < tabBriques[i].length; j++) {
   if (tabBriques[i][j] == 1) {
   context.fillRect((j*(BRIQUE_WIDTH+ESPACE_BRIQUE)),(i*(BRIQUE_HEIGHT+ESPACE_BRIQUE)),BRIQUE_WIDTH,BRIQUE_HEIGHT);
   gagne = 0;
   }
  }
 }
   
// réaffichage de la barre
   
  context.fillStyle = "pink";
  context.fillRect(barreX,barreY,BARRE_JEU_WIDTH,BARRE_JEU_HEIGHT);


// rebondissement balle sur les bords et sur la barre

  if ((balleX) > ZONE_JEU_WIDTH) direction_balleX = -1;
  else if ((balleX) <0) direction_balleX = 1;
 
  if ((balleY) > ZONE_JEU_HEIGHT) perdu();
  else {
   if((balleY)<0) direction_balleY = 1;
   else {
    if (((balleY) > (ZONE_JEU_HEIGHT - BARRE_JEU_HEIGHT)) 
    && ((balleX) >= barreX) && ((balleX) <= (barreX + BARRE_JEU_WIDTH))) {
     direction_balleY = -1;
     direction_balleX = 2*(balleX-(barreX+BARRE_JEU_WIDTH/2))/BARRE_JEU_WIDTH;
    }
   }
  }

// balle casse les briques

if (balleY <= NBR_LIGNES*(BRIQUE_HEIGHT+ESPACE_BRIQUE)+6 && balleY >=0) {
 var i = parseInt(balleY/(BRIQUE_HEIGHT+ESPACE_BRIQUE));
 var j = parseInt(balleX/(BRIQUE_WIDTH+ESPACE_BRIQUE));
  if(i<NBR_LIGNES && tabBriques[i][j] == 1) {
   nb_touche++;
   tabBriques[i][j] = 0;
   if(Math.floor(balleY-(vitesse_balle-1)) <= i*(BRIQUE_HEIGHT+ESPACE_BRIQUE))
    direction_balleY = -1;
    else if(balleY >= (i+1)*(BRIQUE_HEIGHT+ESPACE_BRIQUE)-ESPACE_BRIQUE)
     direction_balleY = 1;
      else
       direction_balleX = -direction_balleX;
  }
}


//balle  
  balleX += direction_balleX * vitesse_balle;
  balleY += direction_balleY * vitesse_balle;
  
  context.fillStyle = "black";
  context.beginPath();
  context.arc(balleX, balleY, DIMENSION_BALLE, 0, Math.PI*2, true);
  context.closePath();
  context.fill();

}

// déplacement de la barre
function deplabarre(e) {
 if (e.keyCode == 39) {
  if ( (barreX+DEPLACEMENT+BARRE_JEU_WIDTH) <= ZONE_JEU_WIDTH ) barreX += DEPLACEMENT;
  }
 else if (e.keyCode == 37) {
  if ( ((barreX-DEPLACEMENT)) >= 0 )  barreX -= DEPLACEMENT;
  }
}
 
function perdu() {
 clearInterval(boucle_du_jeu);
 alert("Perdu!");
}

function gagne() {
 clearInterval(boucle_du_jeu);
 alert("Bravo !");
}

 
function clearContexte(ctx, startwidth, ctxwidth, startheight, ctxheight) {
ctx.clearRect(startwidth, startheight, ctxwidth, ctxheight);
}
 

// Tableau pour les briques
 function creationBriques(ctx, nbrLignes, nbrParLigne, largeur, hauteur, espace) {
  tabBriques = new Array(nbrLignes);
  for (var i=0; i < nbrLignes; i++) {
  tabBriques[i] = new Array(nbrParLigne);
  ctx.fillStyle = "pink";
   for (var j=0; j < nbrParLigne; j++) {
   ctx.fillRect((j*(largeur+espace)),(i*(hauteur+espace)),largeur,hauteur);
   tabBriques[i][j] = 1;
}

}
return 1;
}



</script>




D'avance merci pour votre aide

Bonne soirée
Whismeril
Messages postés
14026
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
5 décembre 2019
322 > ClaDb
Messages postés
4
Date d'inscription
dimanche 6 mars 2016
Statut
Membre
Dernière intervention
7 mars 2016
-
Dans l'article, il parle d'utiliser la coloration syntaxique pour rendre le code plus lisible....
Je demande l'intervention d'un modérateur.
BunoCS
Messages postés
14681
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
5 décembre 2019
90 > Whismeril
Messages postés
14026
Date d'inscription
mardi 11 mars 2003
Statut
Contributeur
Dernière intervention
5 décembre 2019
-
Ayé, j'ai sorti mes crayons de couleurs ;)
ClaDb
Messages postés
4
Date d'inscription
dimanche 6 mars 2016
Statut
Membre
Dernière intervention
7 mars 2016
> BunoCS
Messages postés
14681
Date d'inscription
lundi 11 juillet 2005
Statut
Modérateur
Dernière intervention
5 décembre 2019
-
Merci beaucoup BrunoCS :)
Commenter la réponse de Whismeril
Messages postés
18038
Date d'inscription
lundi 7 décembre 2009
Statut
Modérateur
Dernière intervention
11 avril 2018
215
0
Merci
Bonjour,
Est-ce toi, ClaDb, qui te présenteras à cet "exo" en "représentation" de ton amie ?
Et si oui : quel membre de Codes-Sources as-tu choisi pour t'y représenter, pour répondre à la place de celui qui veut répondre à la place de l'examinée ?

EDIT : bon ... je vais me contenter de te parler d'un peu de logique, sans le moindre code.
Lorsque (par exemple) l'abscisse d'un objet que tu déplaces "déborde", du fait de son déplacement, une limite, le débordement est déjà fait et dépend du déplacement. Inverser seulement alors son sens de déplacement le repositionnera au mieux là où il était avant le déplacement ===>> retour à la situation première ===>> rebelote à l'infini.
Ce genre de mésaventure est évité (en informatique ou dans quelque autre domaine) en soumettant le déplacement à une correction avant même le débordement (si le déplacement va générer un débordement). De la pure arithmétique, donc ...
Et pour être encore plus pointilleux : lorsque le déplacement se fait de gauche à droite, on n'applique ces calculs non à l'abscisse de l'objet, mais à l'addition de son abscisse et de sa largeur.
Voilà : là s'arrête mon aide (et elle n'est que logique, sans code).

________________________
Nul ne saurait valablement coder ce qu'il ne saurait exposer clairement.
ClaDb
Messages postés
4
Date d'inscription
dimanche 6 mars 2016
Statut
Membre
Dernière intervention
7 mars 2016
-
Cette amie m'a demandé un coup de main. N'ayant pas réussi à trouver une solution, je pose la question sur ce forum.
ucfoutu
Messages postés
18038
Date d'inscription
lundi 7 décembre 2009
Statut
Modérateur
Dernière intervention
11 avril 2018
215 > ClaDb
Messages postés
4
Date d'inscription
dimanche 6 mars 2016
Statut
Membre
Dernière intervention
7 mars 2016
-
Montre-lui donc mon message et qu'elle "s'y mette". Ce n'est ensuite que de l'arithmétique assez élémentaire. Qu'elle prenne par exemple une feuille de papier avec les dessins de limites et- qu'elle y simule le déplacement d'un petit objet (vitesse, sens, inversement du sens, etc ...). Lorsqu'elle aura passé ce stade assez simple, la traduction en code sera élémentaire.
Souhaite-lui bonne chance et laisse-la donc s'y mettre et ... mériter la note qui lui sera attribuée (c'est le propos même de tout "exo").

EDIT : encore moins difficile (si vraiment difficulté à comprendre l'évidence) à comprendre : qu'elle imagine être enfermée dans une pièce et se déplacer de trois mètres vers le mur qui, à sa droite, se situe à un mètre. Elle ne risque pas (un mur, ...) de passer de l'autre côté, n'est-ce-pas ... (un mur ! ...). Que va-t-il alors se passer, si elle se déplace de trois mètres et en faisant abstraction des "frictions", etc ... ? ===>> ben 1 mètre vers le mur et deux en projection/rebond arrière, et c'est à partir de ce nouveau point qu'il convient d'inverser le sens de déplacement, non ? et pas avant, non ? Simple question de bon sens commun, avant de parler "informatique" !
Pour résumer : l'informatique est la traduction de la pensée et non la pensée celle de l'informatique ===>> pas de pensée ===>> pas de traduction informatique ! La pensée claire (mathématique) est là ? ===>> sa traduction informatique est alors jeu d'enfant.
Commenter la réponse de ucfoutu