Sujet Précédent Sujet Suivant

Codage simple exo Javascript

ClaDb Messages postés 4 Date d'inscription dimanche 6 mars 2016 Statut Membre Dernière intervention 7 mars 2016 - 6 mars 2016 à 15:39
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

A voir également:

Codage simple exo Javascript
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Javascript division entière ✓ - Forum C / C++ / C++.NET
Javascript redirect ✓ - Forum PHP

2 réponses

Réponse 1 / 2

Whismeril Messages postés 19026 Date d'inscription mardi 11 mars 2003 Statut Contributeur Dernière intervention 20 avril 2024 656
6 mars 2016 à 21:16

Bonjour

http://www.commentcamarche.net/faq/10925-demander-de-l-aide-pour-vos-exercices-sur-ccm

ClaDb Messages postés 4 Date d'inscription dimanche 6 mars 2016 Statut Membre Dernière intervention 7 mars 2016
Modifié par BunoCS le 7/03/2016 à 09:17

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 19026 Date d'inscription mardi 11 mars 2003 Statut Contributeur Dernière intervention 20 avril 2024 656 > ClaDb Messages postés 4 Date d'inscription dimanche 6 mars 2016 Statut Membre Dernière intervention 7 mars 2016
7 mars 2016 à 06:47

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 15475 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 23 avril 2024 103 > Whismeril Messages postés 19026 Date d'inscription mardi 11 mars 2003 Statut Contributeur Dernière intervention 20 avril 2024
7 mars 2016 à 09:18

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 15475 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 23 avril 2024
7 mars 2016 à 09:46

Merci beaucoup BrunoCS :)

Réponse 2 / 2

ucfoutu Messages postés 18038 Date d'inscription lundi 7 décembre 2009 Statut Modérateur Dernière intervention 11 avril 2018 211
Modifié par ucfoutu le 7/03/2016 à 08:15

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
7 mars 2016 à 17:56

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 211 > ClaDb Messages postés 4 Date d'inscription dimanche 6 mars 2016 Statut Membre Dernière intervention 7 mars 2016
Modifié par ucfoutu le 7/03/2016 à 20:13

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.

Discussions similaires

codage huffman

Partie entiére d'un nombre

integrer une variable javascript dans un lien hypertext

est-ce que "goto" existe en javascript ?

codage et décodage NRZ

Votre réponse

Discussions similaires