Définition de régions cliquables par (x, y) coords javascript toile Phaser

Question

== == Le Crux
Comment définir avec élégance cinq régions cliquables surface égale en termes de (x, y) les coordonnées d'un pentagone ?

== == Le contexte
J'ai un sprite cliquable pour un jeu javascript en utilisant Phaser. Le sprite a la forme d'un pentagone et chacun des sommets définit un territoire qui est le cinquième de la surface du pentagone. Lorsque l'utilisateur clique sur le territoire, le gestionnaire d'événements appelle la fonction appropriée pour ce territoire et renvoie la position (x, y) cliquée dans le territoire.

Je suis un programmeur javascript novice qui aimerait apprendre comment (et pourquoi) écrire elegant code, si possible. Je peux faire un peu de maths. Normalement, les régions cliquables sont définies comme des rectangles, mais il s'agit d'un cas particulier. La symétrie quintuple du graphique fait partie intégrante du thème du jeu (Five Elements Gong Fu).

Quel est un bon moyen de définir ces régions cliquables en termes de coordonnées? Je me sens comme s'il y avait un peu de génie informatique (on pourrait penser que cela dépendrait de la symétrie pour définir les coordonnées d'une manière élégante, mais je n'ai pas pu en déterminer un.)

de plus, le graphique est centré dans un fichier .png qui est rectangulaire. Je dois traduire en quelque sorte les coordonnées des quartiers du pentagone aux coordonnées de la toile afin que l'utilisateur peut se sentir qu'ils sont en cliquant la région appropriée.

modifier
== Crappy Graphique ==
Idéalement, le pentagone serait dessiné symétriquement, mais je l'ai simplement malmené. Comme ceci:

Comment définir le (x, y) les coordonnées du quartier A afin que l'utilisateur peut cliquer sur la région A et il appelle Function_for_region_A (gestionnaire)?

Answer 1

Je ne sais rien à propos de phaser, donc voici seulement javascrip. Vous pouvez faire pivoter la toile entière et la repasser à son angle normal lorsque vous avez terminé. Ainsi, une fois tournées, les régions deviennent des carrés et rendent le code et la programmation plus simples. Je pense que vous devez faire pivoter la toile de 60 ° pour obtenir des carrés, mais je ne suis pas sûr. Je ne sais pas si cela est correct, donc plz ne me Jugde ou enlever des points de moi xD, ce qui est vraiment vraiment compliqué pour ME.Here est le code: `

var ctx = document.getElementById("canvasId").getContext("2d"); 
//code to draw the the pentagon here 
var regionA = { //Because the canvas rotates, the x and y points change, so it must have other destination points. 
    x : pointToTheLeftInRegionA.x, 
    y : pointToTheLeftInRegionA.y - pointAtTopInRegionA.y/2 
} 
function canvasWhenClicked(event) { //Function called when : "<canvas onclick="canvasWhenClicked(event)" ...></canvas>" 
    var X = event.clientX; //Finds x coordinates of where you clicked 
    var Y = event.clientY; //Finds x coordinates of where you clicked 
    ctx.rotate(60 * Math.PI/180); 
    if (X > regionA.x && X < regionA.width + regioA.x) { //Sees if the X where clicked is bigger than regionA's X and smaller than regionA X + width 
     if (Y > regionA.y && Y < regionA.height + regionA.y) { //Sees if the Y where clicked is bigger than regionA's Y and smaller than regionA X + height 
      Function_for_region_A(handler); //If clicked in box, call function 
     } 
    } 
    ctx.rotate((360 - 60) * Math.PI/180); //rotate the canvas back 
}