Discussion :

[Invité]

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.

[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 ?

[Invité]

Ma fonction est la suivant =>

Code :

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

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

[Invité]

Code :

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

[Beginner.]

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 ?

[Beginner.]

'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");...

'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" ?

[Invité]

Oui je sais bien mais ce code ne fonctionne pas

Code :

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

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à

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

[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 ?

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

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

[Beginner.]

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

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 ?

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

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

[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

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

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

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

[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 !

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