Sauvegarder les positions de la souris X Y au clic dans une variable
Bonjour,
Je vous explique un peu le projet. Je dois réaliser un jeu pour une société de croisière maritime.
Donc j'ai une carte du monde avec toutes les villes desservies. Le joueur peut naviguer d'une ville à une autre et le trajet est modélisé par des pointillés.
Pour ce, j'ai réalisé un graphe avec un algorithme de recherche du plus court chemin pour arriver à la destination choisie par l'utilisateur (algo' de Dijkstra). Mon problème est au niveau de la modélisation du trajet, je parle au niveau représentation graphique et conception.
Il y a 31 villes (sommets de graphe) et 35 chemins au total (35 arcs entre les sommets), pour modéliser les chemins avec les arrondis (oui, car le bateau ne va pas traverser un continent il faut qu'il en fasse bien tour etc...) je devrais être obligé de découper la courbe de liaison entre deux sommets en différents points qui seront les coordonnés à suivre pour modéliser le trajet. Seulement ça risque d'être vraiment fastidieux si je dois saisir 10 ou 30 points de coordonnés pour chaque trajet...
J'ai donc pensé à une solution qui serait d'afficher dans un canvas la carte avec les villes et qu'en cliquant avec la souris sur le trajet à dessiner on récupère les coordonnées des clics qu'on stockerait dans une variable. Cela éviterait que je les saisisse toutes à la main.
Je sais pas si je me suis assez bien exprimé, par exemple si je veux le tracé de Barcelone à Londres et bien je vais faire plusieurs clics (chaque clic symbolisera l'endroit où va passer le bateau) pour représenter le trajet et une variable sauvegardera les coordonnées X et Y d'un clic, après je pourrais me servir des résultats pour modéliser le trajet. Donc je vais cliquer autour de l'Espagne en remontant vers la France jusqu'à Londres.
Seulement (si vous pensez que ça fonctionne déjà) je ne sais pas comment récupérer les coordonnées au clic et surtout comment les stocker dans une variable :/
Je vous remercie pour votre aide et si vous avez besoin de plus de précision, n'hésitez pas à me questionner!
Merci!
EDIT: J'ai réussi avec une manière différente, je récupère les valeurs des coordonnées X et Y, que j'affiche dans une div avec la mise en forme qui convient et je n'ai plus qu'à copier/coller le tout!
Je mets le code pour ceux que ça intéresseraient:
Code:
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
|
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas, img { float: left;margin: auto; border:1px solid black; }
canvas { background:url(monde.png) }
#test {float: left;}
</style>
</head>
<body>
<canvas id="myCanvas" width="1080" height="503"></canvas>
<div id="test" width="200" height="50"></div>
<script>
document.addEventListener("DOMContentLoaded", init, false);
var coord = {
x: 0,
y: 0
};
function init()
{
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousedown", getPosition, false);
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
coord.x = x;
coord.y = y;
context.beginPath();
context.fillStyle="#FF4422"
context.arc(coord.x, coord.y, 2, 0, 2 * Math.PI);
context.fill();
var test = document.getElementById("test");
test.innerHTML = test.innerHTML+"context.lineTo("+coord.x+","+coord.y+");<br />";
}
</script>
</body>
</html> |
