Création d'une boucle pour générer des div

Invité · 14/12/2017, 22h56

Règles pour les briques =>

1.2.2. Générer des blocs aléatoires
Dans les 50% supérieurs de la zone de jeu, les briques doivent être affichées. Les briques appartiennent à une grille invisible et telle
ne peut pas être placé en dehors de cette grille.
Pour chaque cellule de cette grille, une brique peut ou non être générée sur la base d'un aléa. Créer une couleur aléatoire
(avec RVB) pour chaque brique.

Du coup je ne suis plus dans la bonne section du fofo je sais bien ....

**Beginner.** · 14/12/2017, 23h08

Je ne sais qui t'a donné ce travail mais je trouve que la précision et la clarté du cahier des charges laissent à désirer...

Avec ces infos je ne vois pas quelles doivent être les dimensions de cette fameuse grille ? Combien de lignes et colonnes ?

Envoyé par asse21

Pour le nombre, Je doit remplir une zone qui représente 50% de mon plateau de Jeu. Cette Zone de 50% est deja faite avec du CSS, elle s'appelle "ZonePopBlock"
Il faudrait donc que j'ai plusieurs lignes de briques qui remplissent ma "ZonePopBlock" qui représente 50% de ma ZoneDeJeu

C'est la zone "ZonePopBlock" qui doit faire 50% de la zone de jeu ? Il s'agit donc des dimensions de la grille ?

Je ne vois pas comment on va deviner ça si tu nous donne pas ce CSS et aussi le HTML (c'est-à-dire est-ce une div ?)

**Beginner.** · 14/12/2017, 23h15

Envoyé par asse21

Pour chaque cellule de cette grille, une brique peut ou non être générée sur la base d'un aléa.

Pour ça je t'avais donné un exemple pour le principe : http://jsbin.com/pifebehake/edit?js,output

Envoyé par asse21

Créer une couleur aléatoire (avec RVB) pour chaque brique.

Perso je choisirais un nombre de couleur, par exemple 7. Ensuite pour choisir aléatoirement la couleur on pourrait utiliser la fonction donnée dans le code ci-dessus pour générer aléatoirement un nombre entre 1 et 7...

Invité · 14/12/2017, 23h22

C'est pour ca que je suis perdu ... le cahier des charges et très vague mais à la fois impose des trucs bizarres ....

Voici le

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<html>
<body>
<div id="ZoneDeJeu">
<div id="Gride">
</div>
</div>
</body>
</html>

Je veut que ma grille soit créer dans "Gride"

Voici le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#ZoneDeJeu {
height: 600px;
width: 650px;
position: relative;
margin-left: auto;
margin-right: auto;
border: solid 1px;
cursor:none;
}
 
#Gride { /* ma Gride fait donc 50% de la taille de ma "ZoneDeJeu" => C'est la dedans que je dois afficher mes briques en générant une grille de la taille de ma div="Gride" */
position: relative;
height: 50%;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
text-align:center;
}

Enfaîte peut importe le le nombre de lignes et de colones, il faut simplement que tout l'espace de ma div="Gride" soit occupé par ma grille qui génère des bloques aléatoirement en respectant un alignement en hauteur et en largeur.

On va y arriver, mais si la base comme vous dites du cahier des charges et pas nette je suppose que c'est normal de galérer autant.

**Beginner.** · 14/12/2017, 23h38

Envoyé par asse21

Enfaîte peut importe le le nombre de lignes et de colones, il faut simplement que tout l'espace de ma div="Gride" soit occupé par ma grille qui génère des bloques aléatoirement en respectant un alignement en hauteur et en largeur.

Ben je crains que ça importe justement car pour afficher une grille il va bien falloir lui donner un nombre de lignes et de colonnes... Connaitre ses dimensions (hauteur et largeur) ne suffit pas...

Par contre si en plus tu connais la taille des briques et l'espace entre elles on peut en déduire le nombre de lignes et de colonnes...

Ou bien tu choisis le nombre de lignes et de colonnes et on en déduis la taille des briques...

Invité · 14/12/2017, 23h43

Hauteur brique : 15px
largeur brique : 50px
intervalle horizontal entre 2 briques : 3 px
intervalle verticale entre 2 briques (soit entre 2 lignes): 10px

Je pense qu'il est préférable de délimiter les variables liées au briques pour en déduire le nombre de ligne et de colonnes.

**Beginner.** · 15/12/2017, 00h01

Ben non justement ce n'est pas si simple car je suppose que tu veux une répartition régulière, non ?

--> La largeur avec ce CSS est de 650px-les marges = 610 px

Si par exemple tu prends 11 briques par lignes ça fait 550px il reste 60px pour l'espace entre brique il faudrait donc un espacement horizontale de 6px et non de 3px.

Invité · 15/12/2017, 00h07

Ha oui oui tout à fait !!! j'avais oublié ca

Hauteur brique : 15px
largeur brique : 50px
intervalle horizontal entre 2 briques : 6 px
intervalle verticale entre 2 briques (soit entre 2 lignes): 10px

Mais on ne peut pas faire en fonction de la taille de la ZoneDeJeu ? plutôt que de poser des variables en dur ? Si la taille de la ZoneDeJeu change, il faudrait que le nombre de briques augmente mais sans changer les propriétés CSS de ces dernières.

Je précise que ZoneDeJeu et ZonePopBlock sont "relativ", donc les dimensions s'adaptent. On ne peut pas faire de même pour toutes les briques ?

**Beginner.** · 15/12/2017, 00h40

Envoyé par asse21

Je précise que ZoneDeJeu et ZonePopBlock sont "relativ", donc les dimensions s'adaptent. On ne peut pas faire de même pour toutes les briques ?

Mais dans ton CSS on a des valeur fixe pour le height et le width:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#ZoneDeJeu {
     height: 600px;
     width: 650px;
     /*...*/
 }

Invité · 15/12/2017, 09h24

Tout à fait ! mais j'ai créée des boutons pour modifier ces valeurs et pouvoir modifier les dimensions de la ZoneDeJeu.

**Beginner.** · 15/12/2017, 15h25

Ce genre d'infos il faut les donner dés le début car sinon on va tourner en rond...

Du coup ça change des choses : il va falloir faire des choix : par exemple :

soit on fixe les nombres de lignes, de colonnes et l'espacement entre les briques et alors c'est la taille des briques qu'on fait varier en fonction de la taille de la grille.
soit on fixe la taille des briques et l'espacement entre elles et alors ce sont les nombres de lignes et de colonnes on fait varier en fonction de la taille de la grille.

Soit un mixte des deux un pour chaque dimensions, oui car par exemple je ne pense pas qu'il soit judicieux de faire varier la hauteur des briques mais sa largeur oui, d'ailleurs perso je garderais fixe la hauteur de la grille...

Avec tes boutons tu veux varier la largeur de la grille ou sa hauteur ou les deux ?

Invité · 15/12/2017, 15h42

Bon clairement se projet tourne à la catastrophe pour moi !! :/

Nous devons prendre en compte le faite que le jeux sera ouvert sur plusieurs navigateur, or une gride ne fonctionne pas sous Internet Explorer !!! :/

Oublions l'idée de la gride ! Je m'excuse de vous faire tourner en rond comme ça.

Je dois toujours utiliser Jquery, mon jeux doit pouvoir tourner sur InternetE, je reprend donc votre code de la boucle "for" en JS :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var zoneDeJeu2 = document.getElementById("ZoneDeJeu2");
function fabriqueBriques2() {
 
var uneBrique;
 
for (var i = 0; i < 5; i++) {
// fabrique une brique
uneBrique = document.createElement("div");
 
// Ajoute aléatoirement une classe à cette brique pour lui donner un style via CSS
if (getRandomIntInclusive(0, 1)) {
uneBrique.className = "classBriqueVisible";
// Ajoute un contenu à cette brique...
uneBrique.innerHTML = "brique n°" + (i + 1) ;
}
else {
uneBrique.className = "classBriqueInvisible";
// Ajoute un contenu à cette brique...
uneBrique.innerHTML = "brique n°" + (i + 1) ;
}
// Insére cette brique dans la div ZoneDeJeu
zoneDeJeu2.appendChild(uneBrique);
}
}
 
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}

La génération des blocs dans la zone est aléatoire, mais il faudrait maitenant que j'utilise JQuery pour cette fonction et je vous avoue que j'aurais besoins d'aide pour la transposer en utilisant le plus possible la libraire JQuery.

Je serais d'avis de partir sur le faite de fixer "la taille des briques et l'espacement entre elles et alors ce sont les nombres de lignes et de colonnes on fait varier en fonction de la taille de la div => "ZonePopBlock."

Mes boutons qui font changer la taille de la div="ZoneDeJeu" qui contient la div="ZonePopBlock" => Sachant que "ZonePopBlock fait 50% de la taille de ZoneDeJeu en hauteur, pour la largeur c'est 100%.

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var hauteurZoneJeu = 600;
var largeurZoneJeu = 650;
 
function taille1() {
var taille1 = document.getElementById('ZoneDeJeu');
$('#ZoneDeJeu').height(hauteurZoneJeu);
$('#ZoneDeJeu').width(largeurZoneJeu);
}
 
function taille2() {
var taille2 = document.getElementById('ZoneDeJeu');
$('#ZoneDeJeu').height(hauteurZoneJeu);
$('#ZoneDeJeu').width(largeurZoneJeu + 425);
}
 
function taille3() {
var taille3 = document.getElementById('ZoneDeJeu');
$('#ZoneDeJeu').height(hauteurZoneJeu + 98);
$('#ZoneDeJeu').width(largeurZoneJeu);
}

Code HTML ou il faut que les briques soient posé "ZonePopBlock"=>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="ZoneDeJeu">
<div id="Gride">
</div>
</div>

**Beginner.** · 15/12/2017, 16h52

Envoyé par asse21

Bon clairement se projet tourne à la catastrophe pour moi !!

Comme je disais : "Je crois que certains disent un truc comme ça "un problème bien posé est un problème à moitié résolu"..."

Envoyé par asse21

Nous devons prendre en compte le faite que le jeux sera ouvert sur plusieurs navigateur, or une gride ne fonctionne pas sous Internet Explorer !!!

Tu pourrais utiliser une simple table... Dans tous les cas il faudra des lignes et des colonnes...

Dis-moi si tu veux qu'on utilise une table...

Envoyé par asse21

La génération des blocs dans la zone est aléatoire, mais il faudrait maitenant que j'utilise JQuery pour cette fonction et je vous avoue que j'aurais besoins d'aide pour la transposer en utilisant le plus possible la libraire JQuery.

Je trouve cela étrange : avoir un code en JS pur qui fonctionne mais devoir le transposer en un code avec JQuery juste pour utiliser JQuery ?

En plus le JS pur est préférable quand on débute (comme c'est mon cas d’ailleurs...)...

On peux toujours le faire en JS pur pour l'instant et après tu n'auras qu'à demander comment le transposer avec JQuery dans le sous-forum dédié...

Envoyé par asse21

Code HTML ou il faut que les briques soient posé "ZonePopBlock"=>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="ZoneDeJeu">
        <div id="Gride">
        </div>
    </div>

Ce serait plutôt : id="ZonePopBlock" plutôt que id="Gride", non ?

Après effectivement la grille doit être dans la div "ZonePopBlock"...

Invité · 15/12/2017, 17h02

J'ai finalement trouvé la bonne fonction pour me générer mes blocs comme je le voulait ! ENFIN

Maintenant il me manque une dernière chose=>

Je voudrais générer un ID différent pour chaque brique que je crée dans le code suivant, par exemple en utilisant "i" de ma boucle "for". Mais je ne connait pas la syntaxe pour réaliser cela.

Création d'une boucle pour générer des div

JavaScript

Discussions similaires

Partager

Partager