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

Version imprimable

13/12/2017, 15h11
Invité

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

Bonjour à tous,

J'ai un projet à réaliser, il s'agit d'un casse briques.

Je dois réaliser l'affichage de briques aléatoirement dans les 50% haut d'une div qui est la "zone de jeux".
Je suppose qu’il faut déjà réaliser une boucle qui créer des div dans la div " zone de jeux", puis personnaliser ces div en css. Mais je n'ai pas la petite lumière qui permettrait de trouver le code.

Merci par avance de votre aide.
13/12/2017, 18h40
Beginner.

Salut,

Oui si tu en as plusieurs il serait judicieux d'utiliser une boucle...
Pour "fabriquer" des balises div (ou autres) il y a la fonction document.createElement(tagName[, options]);...

Le nombre de div à fabriquer est aléatoire c'est ça ? Il n'y a pas un min et un max ?
Et quelles doit être leurs position ?

Ma fonction est la suivant =>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function creerDIV(){ for (i=0;i<5;i++){ var MonDiv=document.getElementById(''); MonDiv.setAttribute('name', 'name_myDIV'); MonDiv.setAttribute('id', 'id_myDIV'+i); MonDiv.className = 'format_myDIV'; MonDiv.innerHTML="div " +i; document.body.appendChild(MonDiv); for (j=0;j<8;j++){ var MonDiv2=document.getElementById('ZonePopBlock'); MonDiv2.setAttribute('name', 'name_myDIV'); MonDiv2.setAttribute('id', 'id_myDIV'+j); MonDiv2.className = 'format_myDIV'; MonDiv2.innerHTML="div " +j; document.body.appendChild(MonDiv2); }} }
Elle fonctionne et me push bien toutes mes div mais dans le body.
document.div.appendChild(MonDiv2);

En changeant comme-ceci les dernières lignes de chaque boucle rien n'est push dans la div que je souhaite. La est mon problème enfaite ....
Il faut que toutes mes briques que je fabrique aléatoirement soient contenu dans ma div qui à pour id="ZoneDeJeu".

Il faut aussi que je fixe un nombre de briques (div) par ligne => 8
et un nombre de ligne => 6

Je me suis mal exprimé mais c'est l'affichage ou non des briques dans la div="ZoneDeJeu" qui est aléatoire. On peut se retourner avec 15 briques n importe ou sur les 6 lignes de 8 briques, puis 32 puis 25 etc.... Mais je galère à concevoir un algo en Javascript sans utiliser canvas et autres plugin pour gérer tout ca.

Merci par avance de votre aide.

13/12/2017, 19h24
Beginner.

Désolé mais j'ai du mal à comprendre...

C'est quoi "MonDiv" ?

Déjà je ne crois pas que var MonDiv=document.getElementById(''); soit correct car il n'y pas de id...

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function creerDIV(){ for (i=0;i<5;i++){ var MonDiv=document.getElementById('ZonePopBlock'); MonDiv.setAttribute('name', 'name_myDIV'); MonDiv.setAttribute('id', 'id_myDIV'+i); MonDiv.className = 'format_myDIV'; MonDiv.innerHTML="div " +i; document.body.appendChild(MonDiv); for (j=0;j<8;j++){ var MonDiv2=document.getElementById('ZonePopBlock'); MonDiv2.setAttribute('name', 'name_myDIV'); MonDiv2.setAttribute('id', 'id_myDIV'+j); MonDiv2.className = 'format_myDIV'; MonDiv2.innerHTML="div " +j; document.body.appendChild(MonDiv2); }} }
'MonDiv' c'est une brique qui est créée à chaque itération
'ZonePopBlock' est la div dans laquelle doit être push toutes mes briques à la fin des deux boucles

Désole si je ne suis pas très claire, je vous avoue que je me suis perdu moi même sur ce programme .... j'ai vraiment du mal avec cette génération de bloque via JS puis de random.

13/12/2017, 19h30
Beginner.

Citation:

Envoyé par asse21

Il faut aussi que je fixe un nombre de briques (div) par ligne => 8
et un nombre de ligne => 6

Cela peut être n'importe quel nombre entre 0 et 8 et entre 0 et 6, ok mais comment sont fixé ces nombres ? D’après quelle règle ?
13/12/2017, 19h37
Beginner.

Citation:

Envoyé par asse21

'MonDiv' c'est une brique qui est créée à chaque itération

Ok dans ce cas il faut en revenir à ce que je disais : "Pour "fabriquer" des balises div (ou autres) il y a la fonction document.createElement(tagName[, options]);...".

Tu peux faire ça : var MonDiv = document.createElement("div");...

Citation:

Envoyé par asse21

'ZonePopBlock' est la div dans laquelle doit être push toutes mes briques à la fin des deux boucles

Je croyais que les briques devaient être dans la div qui à pour id="ZoneDeJeu" ?
13/12/2017, 19h57
Invité

Oui je sais bien mais ce code ne fonctionne pas

Code:

var MonDiv = document.createElement("div");

Pourriez vous m'expliquer un code propre avec des "noms globaux", je veut comprendre comment fonctionne le faite de push des div dans une autre div pour créer mes briques.
Mais la je vous avoue que je suis perdu... J'ai besoins de bonne base pou repartir proprement.
Désolé de ne rien comprendre à ce point ... :)

En tout cas merci de votre aide déjà :)
13/12/2017, 20h22
Beginner.

Ok voilà un exemple : http://jsbin.com/jojedipube/edit?html,css,js,output

Cette fonction fabrique 5 briques (div) et les insére dans la div id="ZoneDeJeu"...
13/12/2017, 21h17
Invité

Merci beaucoup voila un exemple bien congrès de ma situation !

Il me reste plus qu'a adapté cette situation à mon jeu pour générer des lignes supplémentaires.

Sauf que le soucis qui se pose c'est comment faire apparaître toutes ces briques maintenant créée de manière aléatoire ?

Je dois certainement utiliser la fonction de "math" random ?
13/12/2017, 21h28
Beginner.

C'est bien pour ça que je t'ai posé la question au message #6...

Je n'ai toujours pas compris ce qui doit être aléatoire dans ton jeu...
13/12/2017, 21h36
Invité

Un fois que toutes mes briques sont générée dans ma zoneDeJeu, au moment de l'affichage certaines briques doivent rester cachées et ce aléatoirement.

Apres je ne sais pas si le plus simple est de générée les briques de manières aléatoire dès le départ, c'est-à-dire se retrouver avec par exemple sur les 2 premières lignes
=> "brique/vide/vide/brique/brique/vide/vide"
=> "brique/brique/vide/brique/brique/brique/brique"
....
....
Et ainsi de suite pour les autres lignes.

Ou alors de les cachées à l'affichage toujours de manière à avoir un affichage de briques dans la zoneDeJeu aléatoire, c'es-à-dire avec des briques et des trous répartie aléatoirement dans la ZoneDeJeu.

En sachant que par la suite je devrais gérer les collisions entre la balle et ces même briques dans la zoneDeJeu.
13/12/2017, 22h22
Beginner.

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

Citation:

Envoyé par asse21

Un fois que toutes mes briques sont générée dans ma zoneDeJeu, au moment de l'affichage certaines briques doivent rester cachées et ce aléatoirement.

Oui mais tu dois en fabriquer combien ? Et quelle doit être leurs positions ? Est-ce 8x6 ? Et pour les positions ce serait dans une grille de 8 lignes et 6 colonnes ?

Citation:

Envoyé par asse21

Apres je ne sais pas si le plus simple est de générée les briques de manières aléatoire dès le départ, c'est-à-dire se retrouver avec par exemple sur les 2 premières lignes
=> "brique/vide/vide/brique/brique/vide/vide"
=> "brique/brique/vide/brique/brique/brique/brique"

Vide ou cachées ? Si tu fabriques toutes les briques (8x6) après tu peux cacher (les rendre invisibles) celles que tu veux en conservant ou non la place qu'elle occupent...Tu peux par exemple toutes les fabriquer une par une et chaque fois décider si elle doit être visible ou non... Il suffit d'une fonction qui génère "aléatoirement" un 0 (invisible) ou un 1 (visible).
13/12/2017, 23h14
Beginner.

Voilà encore un exemple (cette fois avec affichage aléatoire) :http://jsbin.com/pifebehake/edit?js,output

Clique sur le bouton "GO !" pour lancer l'affichage...

Tu peux le faire plusieurs fois pour voir les différences...
13/12/2017, 23h39
Invité

Merci beaucoup, je testerais ça demain !

Je vous remercie j'y vois beaucoup plus claire, Je vais mettre tout ça au propre et je vous tient au courant.

Après j'aurais la partie de la gestion de la trajectoire de la balle puis des collisions avec les briques :/

Mais je vous tiens au courant ! Au moins je comprends le code avec vos exemples :)

Bonne soirée
14/12/2017, 21h38
Invité

Bonjour à vous ! Encore moi :/

Je vient de m'apercevoir que pour gérer les collisions par la suite il est préférable de créer les briques dans une grille "gride" pour pouvoir récupérer les coordonnées plus simplement !

Mais bien entendu aucune idée de comment faire ! Il faut en plus de ça que je génère un ID pour chaque brique créés.

Merci par avance de votre aide.
14/12/2017, 22h03
Beginner.

Salut,

J'avais ouvert un fil sur les différentes façons de mettre en page : Mise en page en CSS : display:table Vs flexbox Vs grid layout ?...

Tu pourrais aussi utiliser une simple table... Ou même juste des div...

Dans tous les cas je ne suis pas sûr qu'avec ces moyens-là ce soit forcément plus simple de récupérer les coordonnées de chaque brique...
14/12/2017, 22h36
Beginner.

Pour récupérer les coordonnées d'un élément HTML il y a par exemple : getBoundingClientRect()... (Pas besoin d'une mise en page spéciale)

Mais déjà il faudrait savoir exactement ce que tu veux faire, quelles sont les règles d’affichage des briques : nombre, position, taille...

Est-ce que les briques doivent être espacées ou bien collées les unes aux autres ?

A toi de savoir ce que tu veux...
14/12/2017, 22h43
Invité

Déjà première chose importante, il faut que j'utilise la librairie Jquery pour me simplifie la vie et surtout car c'est imposé tout comme la grille pour stocker les briques.

Je n'ai pas de taille imposé, mais idéalement il faudrait quelles soient telles que => height = "15px" / width="48px"
L'espace entre les briques serait idéal avec "7px"
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

Merci encore !
14/12/2017, 22h52
Beginner.

Ben ce n'est pas facile de suivre, les règles changent... Au départ il était question d'une grille de 8 lignes et 6 colonnes, non ? Et le coté aléatoire ça devient quoi ?

Si les règles te sont imposées ben donne-les toutes, ça ira plus vite...

Pour ce qui est JQuery il y a un sous-forum dédié mais je trouve étrange d'imposer cela...
14/12/2017, 22h56
Invité

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 ....
14/12/2017, 23h08
Beginner.

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 ?

Citation:

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 ?)
14/12/2017, 23h15
Beginner.

Citation:

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

Citation:

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...

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:

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:

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.

14/12/2017, 23h38
Beginner.

Citation:

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...
14/12/2017, 23h43
Invité

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.
15/12/2017, 00h01
Beginner.

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.
15/12/2017, 00h07
Invité

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 ?
15/12/2017, 00h40
Beginner.
Citation:

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:

1 2 3 4 5 #ZoneDeJeu { height: 600px; width: 650px; /*...*/ }
15/12/2017, 09h24
Invité

Tout à fait ! mais j'ai créée des boutons pour modifier ces valeurs et pouvoir modifier les dimensions de la ZoneDeJeu.
15/12/2017, 15h25
Beginner.

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 ?

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:

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:

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:

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

15/12/2017, 16h52
Beginner.
Citation:

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"..."

Citation:

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...

Citation:

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é...
Citation:
Envoyé par asse21

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

Code:

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"...
15/12/2017, 17h02
Invité

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.