ClaDb
Messages postés4Date d'inscriptiondimanche 6 mars 2016StatutMembreDernière intervention 7 mars 2016
-
6 mars 2016 à 15:39
ucfoutu
Messages postés18038Date d'inscriptionlundi 7 décembre 2009StatutModérateurDernière intervention11 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.
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és19026Date d'inscriptionmardi 11 mars 2003StatutContributeurDernière intervention20 avril 2024656
>
ClaDb
Messages postés4Date d'inscriptiondimanche 6 mars 2016StatutMembreDerniè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és15475Date d'inscriptionlundi 11 juillet 2005StatutModérateurDernière intervention23 avril 2024103
>
Whismeril
Messages postés19026Date d'inscriptionmardi 11 mars 2003StatutContributeurDernière intervention20 avril 2024 7 mars 2016 à 09:18
Ayé, j'ai sorti mes crayons de couleurs ;)
ClaDb
Messages postés4Date d'inscriptiondimanche 6 mars 2016StatutMembreDernière intervention 7 mars 2016
>
BunoCS
Messages postés15475Date d'inscriptionlundi 11 juillet 2005StatutModérateurDernière intervention23 avril 2024 7 mars 2016 à 09:46
ucfoutu
Messages postés18038Date d'inscriptionlundi 7 décembre 2009StatutModérateurDernière intervention11 avril 2018211 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és4Date d'inscriptiondimanche 6 mars 2016StatutMembreDerniè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és18038Date d'inscriptionlundi 7 décembre 2009StatutModérateurDernière intervention11 avril 2018211
>
ClaDb
Messages postés4Date d'inscriptiondimanche 6 mars 2016StatutMembreDerniè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.
Modifié par BunoCS le 7/03/2016 à 09:17
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") :
D'avance merci pour votre aide
Bonne soirée
7 mars 2016 à 06:47
Je demande l'intervention d'un modérateur.
7 mars 2016 à 09:18
7 mars 2016 à 09:46