Bonjour,
Je suis débutant (en javascript)
et avec le framework pixi.js j'ai voulu créer des hexagones réagissant à des événements lorsque je clique sur un hexagone, je dois avoir ses coordonnées x et y qui s'affichent.
Cependant j'ai toujours l'affichage sur la console 'click 0 0' comme s'ils ne reconnaissait pas mon x et mon y.
Je pense que c'est une subtilité de l'utilisation des fonctions en JS mais comme je ne suis pas un spécialiste de ce langage je viens vers vous.
Voici le code, la ligne incriminée se trouve à la ligne 81, merci d'avance pour vos réponses !
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
function jeu(){
	console.log(PIXI);
	var renderer = PIXI.autoDetectRenderer(600, 600,{antialias: true, transparent: false, resolution: 1});
	document.getElementById("pixi").appendChild(renderer.view);
	var stage = new PIXI.Container(0xFFFFFF);
 
	//var background= new PIXI.Sprite.fromImage('prairie-verte-1_2997580.jpg');
 
	var param = {
		l : 60,
		calcule : function(){
			this.h= this.l*0.45;
			this.x1 = this.l/4;
			this.y1 = 0;
			this.x2 = this.l*3/4;
			this.y2 = this.y1;
			this.x3 = this.l;
			this.y3 = this.h;
			this.x4 = this.x2;
			this.y4 = this.h*2;
			this.x5 = this.x1;
			this.y5 = this.h*2;
			this.x6 = 0;
			this.y6 = this.h;
		},
	};
	param.calcule()
	function Hexagone(x,y) {
		this.x=x;
		this.y=y;
		if(this.x%2 == 0){
			this.xBase = this.x*3*param.l/4;
			this.yBase = this.y*2*param.h
		} else{
			this.xBase = this.x*3*param.l/4;
			this.yBase = (this.y+1/2)*2*param.h
		}
	}
 
	Hexagone.prototype.dessiner = function(){
		this.hex = new PIXI.Graphics();	
		this.hex.beginFill(0x00FF00);
		this.hex.lineStyle(1, 0x000000);
		this.hex.moveTo(this.xBase + param.x1, this.yBase + param.y1);
		this.hex.lineTo(this.xBase + param.x2, this.yBase + param.y2);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x2, this.yBase + param.y2);
		this.hex.lineTo(this.xBase + param.x3, this.yBase + param.y3);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x3, this.yBase + param.y3);
		this.hex.lineTo(this.xBase + param.x4, this.yBase + param.y4);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x4, this.yBase + param.y4);
		this.hex.lineTo(this.xBase + param.x5, this.yBase + param.y5);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x5, this.yBase + param.y5);
		this.hex.lineTo(this.xBase + param.x6, this.yBase + param.y6);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.beginFill(0x00FF00);
		this.hex.moveTo(this.xBase + param.x6, this.yBase + param.y6);
		this.hex.lineTo(this.xBase + param.x1, this.yBase + param.y1);
		this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h);
		this.hex.endFill();
		this.hex.hitArea = new PIXI.Polygon([
   			new PIXI.Point(this.xBase + param.x1,this.yBase + param.y1),
   			new PIXI.Point(this.xBase + param.x2,this.yBase + param.y2),
   			new PIXI.Point(this.xBase + param.x3,this.yBase + param.y3),
   			new PIXI.Point(this.xBase + param.x4,this.yBase + param.y4),
   			new PIXI.Point(this.xBase + param.x5,this.yBase + param.y5)
		]);
		this.hex.interactive = true;		
		this.hex.click =function(data){console.log("click x :"+this.x+" y : "+this.y)};
		stage.addChild(this.hex);
	}
 
 
 
	listeHexa=[];
	for(var y=0;y<10;y++){
		for(var x=0;x<10;x++){
			hexa = new Hexagone(x,y)
			hexa.dessiner()
			listeHexa.push(hexa);
		}
	}
 
 
	renderer.render(stage);
	update();
	function update(){
	    requestAnimationFrame(update);
	    renderer.render(stage);
};
}