Menu

Generation de grille

adamsjilal 46 Messages postés lundi 14 mars 2016Date d'inscription 29 avril 2018 Dernière intervention - 8 mars 2018 à 18:27
Bonjour,
j'esper que vous allez bien, a part ça j avais un projet a faire et du coup je doit generer de differents grilles(hexagonal, rectangulaire, etc) mais le probleme j'arrive a pas comprendre comment generer et quel structure de donnée faut il utiliser puis que chaque cas de la grille doit avoir quatre voisins pour echange des informations a la suite. j'ai un peu commencé a coder mais ce n'est pas l'objectif.
je vous explique le principe, par exemple pour le grille rectangulaire, l'utilisateur ajoutera autant de point qu'il veux, a chaqu'il ajoute un point une case, la couleur de la case change et lorsque le nombre de point atteint le 4, cette cas la doit donner a ses quatre voisins un point comme ca elle redeviendra vierge(vide).
je ne sais pas si j'été claire ou pas mais ce ca l'objectifs
ce qui me pose le probleme le plus, c'est la choix de la structure la case, puis que chaque case rectangulaire aura 4 voisins qui seront ses quatre coté. Bien sur le longage c'est javascripte et je suis pas assez en celui-ci.
Si vous comprenez mon probleme ca aurais m'aider enoremement.
voici le code

generer.onclick = function(){
   		document.write(martice);
   		//alert("la valeur de champsTaille1 "+champsTaille1+"la valeur de champsTaille2"+champsTaille2)
   		if(i == 0){
   				 var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
		var ctx = canevas.getContext('2d');
		ctx.fillStyle = "gray"; // définit la couleur de remplissage du rectangle 
		ctx.fillRect(40, 40, 55, 50);
   		}else if(i == 1){
   			var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "green"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(40, 40, 55, 50);
   		}else if(i == 2){
   			var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "black"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(40, 40, 55, 50);
   		}
   		else if(i == 3){
   			var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "red"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(40, 40, 55, 50);
   		}
	 
i++;
 }

voici la methode de distribution pour les voisins.

 	while(i==4){
 		//voisin gauche
 		var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "red"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(55/2, 40, 55, 50);
//voisin du droit
i--;
var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "red"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(40, 20, 55, 50);
//voisin haut 

i--;
var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "red"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(110, 40, 55, 50);
// voisin en bas
i--;
var canevas = document.getElementById('monCanevas'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
var ctx = canevas.getContext('2d');
ctx.fillStyle = "red"; // définit la couleur de remplissage du rectangle 
ctx.fillRect(40, 80, 55, 50);	
--i;
 	}
 }

voici la page html
<div id="pavage">

		<select name="pavage">
		<option value="Grille">Grille</option>
		<option value="Hexgonal">Hexgonal</option>
		<option value="Penrose">Penrose</option>
		<option value="Triangulaire">Triangulaire</option>
		<div id="element">
			<label id="taille">Taille</label>
			<input type="text" name="taille" id="input1">
			<input type="text" name="taille" id="input2">
			<button id="generer">Generer</button>
			<button id="app">appliquer</button>
		</div>
	</select>
	<div id="test"></div>
	</div>
	
		<canvas id="monCanevas" width="450" height="450" style="border:1px solid #aaa"></canvas>
	<p id="demo"></p>
<script src="../jquery/dist/jquery.min.js"></script>
<script src="../angular/angular.min.js"></script>
<script src="main.js"></script>	
<script type="text/javascript" src="js/file.js"></script>

Merci en avance.
Afficher la suite