Discussion :

[kolodz]

Bonjour,

Je viens de faire un script de génération de labyrinthe en JavaScript. L'idée de ce script est de généré des labyrinthes pour un jeu en 2D iso, sans passer par le serveur. J'aimerai avoir votre avis dessus.

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
clear();
var caracterWall = "#";
var caracterGrass = " ";
Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] == obj) {
            return true;
        }
    }
    return false;
}
function isInMapSet(mapSet, value ){
 
for (var index in mapSet){
    if(mapSet[index] instanceof Array){
        if(mapSet[index].contains(value)){
            return true;
        }
    }
}
return false;
}
function getIndexInMapSet(mapSet, value ){
for (var index in mapSet){
    if(mapSet[index] instanceof Array){
 
        if(mapSet[index].contains(value)){
            return index;
        }
    }
}
return false;
}
function mergeIndexInMapSet(mapSet, indexA, indexB){
    if(mapSet[indexA] instanceof Array && mapSet[indexB] instanceof Array ){
        mapSet[indexA] = mapSet[indexA].concat(mapSet[indexB]);
        delete mapSet[indexB];
        return true;
    }
    return false;
}
function displayMap(map){
    for (var x in map){
        if(typeof map[x] !== "function"){
            var line = "";
            for (var y in map[x]){
                if(typeof map[x][y] !== "function"){
                    var line = line+ map[x][y];
                }
            }
            console.log(line);
        }
    }
}
 
var map= new Array();
var x = 10;
var y = 60;
var randomOrder = new Array();
var mapSet =new Array();
for(i=0;i<x*2;i++){
	var line= new Array();
	for(j=0;j<y*2;j++){
		var matsetLine = new Array();
		var entry = new Array();
		if(i%2==0 && j%2==0){
    		matsetLine.push((i/2)+':'+(j/2));
    		mapSet.push(matsetLine);
    		randomOrder.push((i/2)+':'+(j/2));
			line.push(caracterGrass);
		} else {
			line.push(caracterWall);
		}
 
	}
	map.push(line);
}
randomOrder.sort(function() {return 0.5 - Math.random()});
 
for (var i in randomOrder)
{
	if(typeof randomOrder[i] !== "function"){
		var index = randomOrder[i].split(":");
		var posX = index[0];
		var posY = index[1];
		var possible = new Array();
		var currentIndex = posX+ ":"+posY;
		var ouestIndex = (posX-1)+ ":"+posY; 
		if(isInMapSet(mapSet,ouestIndex) && getIndexInMapSet(mapSet, ouestIndex)!= getIndexInMapSet(mapSet, currentIndex)){
			possible.push(ouestIndex);
		}
		var estIndex = (posX+1)+ ":"+posY;
		if(isInMapSet(mapSet,estIndex) && getIndexInMapSet(mapSet, estIndex)!= getIndexInMapSet(mapSet, currentIndex)){
			possible.push(estIndex);
		}
		var nordIndex = posX+ ":"+(posY-1); 
		if(isInMapSet(mapSet,nordIndex) && getIndexInMapSet(mapSet, nordIndex)!= getIndexInMapSet(mapSet, currentIndex)){
			possible.push(nordIndex);
		}
		var sudIndex = posX+ ":"+(posY+1);
		if(isInMapSet(mapSet,sudIndex) && getIndexInMapSet(mapSet, sudIndex)!= getIndexInMapSet(mapSet, currentIndex)){
			possible.push(sudIndex);
		}
		if(possible.length>0){
			var randomNumber=Math.floor(Math.random()*possible.length);
			var posSlip = possible[randomNumber].split(':');
			var posXRand = posSlip[0];
			var posYRand = posSlip[1];
			var wallX = parseInt(posX)+parseInt(posXRand);
			var wallY = parseInt(posY)+parseInt(posYRand);
			map[wallX][wallY] = caracterGrass;
			mergeIndexInMapSet(mapSet, getIndexInMapSet(mapSet,currentIndex), getIndexInMapSet(mapSet, possible[randomNumber]));
		}
	}
}
 
displayMap(map);

Quels sont selon vous les points à améliorer ?

Cordialement,
Patrick Kolodziejczyk.

[SylvainPV]

Bonjour,

Il s'agit plus d'un problème d’algorithmique que de Javascript, je pense que tu trouveras de meilleurs conseils sur des forums spécialisés sur ce sujet.

[kolodz]

L'ago fonctionne. Je recherche plus des conseils dans la structure du script. Et dans l'utilisation du langage.

[SylvainPV]

Eh bien dans l'ensemble le code est clair. Peut-être quelques détails, comme faire attention aux boucles for...in qui peuvent être traîtres selon les objets que l'on parcourt ; et aussi je te suggère de placer toutes tes fonctions dans un namespace afin de ne pas créer trop de variables globales :

Code :

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

1
2
3
4
5
6
7
 
(function(app){
 
app.mavariable = ...;
app.mafonction = function(){ ... };
 
})(window.app || (window.app = {}));

avec app le namespace que tu souhaites. Comme ça tu ne créeras qu'une seule variable globale, qui est le point d'entrée pour tout ton code.

Ah et aussi il est déconseillé d'étendre le prototype des objets natifs comme Array. Mieux vaut passer par un wrapper ou une fonction contains(monArray, maValue)

[kolodz]

Merci beaucoup. C'est le genre de conseils que je cherchais.

Cordialement,
Patrick Kolodziejczyk.

[kolodz]

Je fait un petit up pour ajouter le code correspondant à ma version définitive :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
function LabGenerator() {
	this.width = 0;
	this.height = 0;
	this.map= new Array();
	this.mapSet = new Array();
	this.randomOrder = new Array();
	this.caracterWall = "#";
	this.caracterGrass = " ";
}
 
LabGenerator.generateMap = function(width, height) {
        this.caracterWall = "#";
    	this.caracterGrass = " ";
		this.width = width;
		this.height = height;
		this.map= new Array();
		this.mapSet = new Array();
		this.randomOrder = new Array();
		for(i=0;i<this.height*2;i++){
			var line= new Array();
			for(j=0;j<this.width*2;j++){
				var matsetLine = new Array();
				var entry = new Array();
				if(i%2==0 && j%2==0){
					matsetLine.push((i/2)+':'+(j/2));
					this.mapSet.push(matsetLine);
					this.randomOrder.push((i/2)+':'+(j/2));
					line.push(this.caracterGrass);
				} else {
					line.push(this.caracterWall);
				}
			}
			this.map.push(line);
		}
		this.randomOrder.sort(function() {return 0.5 - Math.random()});
		while(this._needDestroyWall()){
			for (var i in this.randomOrder)
			{
				if(typeof this.randomOrder[i] !== "function"){
					var index = this.randomOrder[i].split(":");
					this._destroyWall(index[0], index[1])
				}
			}
		}
	};
LabGenerator._needDestroyWall = function (){
	var count = 0
	for(index in LabGenerator.mapSet){
	if(LabGenerator.mapSet[index]!= null){
		count++
		}
	}
	return count > 1;
}
LabGenerator._destroyWall = function(posX, posY){
				var possible = new Array();
				var currentIndex = posX+ ":"+posY;
				var ouestIndex = (posX-1)+ ":"+posY; 
				if(this.isInMapSet(ouestIndex) && this.getIndexInMapSet(ouestIndex)!= this.getIndexInMapSet(currentIndex)){
					possible.push(ouestIndex);
				}
				var estIndex = (parseInt(posX)+1)+ ":"+posY;
				if(this.isInMapSet(estIndex) && this.getIndexInMapSet(estIndex)!= this.getIndexInMapSet(currentIndex)){
					possible.push(estIndex);
				}
				var nordIndex = posX+ ":"+(parseInt(posY)-1); 
				if(this.isInMapSet(nordIndex) && this.getIndexInMapSet(nordIndex)!= this.getIndexInMapSet(currentIndex)){
					possible.push(nordIndex);
				}
				var sudIndex = posX+ ":"+(parseInt(posY)+1);
				if(this.isInMapSet(sudIndex) && this.getIndexInMapSet(sudIndex)!= this.getIndexInMapSet(currentIndex)){
					possible.push(sudIndex);
				}
 
				if(possible.length>0){
					var randomNumber=Math.floor(Math.random()*possible.length);
					var posSlip = possible[randomNumber].split(':');
					var posXRand = posSlip[0];
					var posYRand = posSlip[1];
					var wallX = parseInt(posX)+parseInt(posXRand);
					var wallY = parseInt(posY)+parseInt(posYRand);
					this.map[wallX][wallY] = this.caracterGrass;
					this.mergeIndexInMapSet(this.getIndexInMapSet(currentIndex), this.getIndexInMapSet(possible[randomNumber]));
				}
}
 
 
LabGenerator.arrayContains = function(array,obj) {
		var i = array.length;
		while (i--) {
			if (array[i] == obj) {
				return true;
			}
		}
		return false;
	};
 
LabGenerator.isInMapSet = function (value){
		for (var index in this.mapSet){
			if(this.mapSet[index] instanceof Array){
				if(this.arrayContains(this.mapSet[index], value)){
					return true;
				}
			}
		}
		return false;
	};
 
LabGenerator.getIndexInMapSet = function ( value){
		for (var index in this.mapSet){
			if(this.mapSet[index] instanceof Array){
				if(this.arrayContains(this.mapSet[index],value)){
					return index;
				}
			}
		}
		return false;
	};
LabGenerator.mergeIndexInMapSet = function (indexA, indexB){
		if(this.mapSet[indexA] instanceof Array && this.mapSet[indexB] instanceof Array ){
			this.mapSet[indexA] = this.mapSet[indexA].concat(this.mapSet[indexB]);
			delete this.mapSet[indexB];
			return true;
		}
		return false;
	};
 
LabGenerator.displayMap = function displayMap(){
		for (var x in this.map){
			if(typeof this.map[x] !== "function"){
				var line = "";
				for (var y in this.map[x]){
					if(typeof this.map[x][y] !== "function"){
						var line = line+ this.map[x][y];
					}
				}
				console.log(line);
			}
		}
	};

Exemple de génération, puis d'affichage :

Code :

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

1
2
3
4
LabGenerator.generateMap(10,10);
LabGenerator.displayMap();
LabGenerator.generateMap(1,10);
LabGenerator.displayMap();

Pour avoir la carte directement :

Code :

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

LabGenerator.map

Vérifier si la case x/y est un mur :

Code :

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

LabGenerator.map[x][y] ==LabGenerator.caracterWall

Cordialement,
Patrick Kolodziejczyk.