Drag&Drop pour jeu javascript

**mehdi.chouaf** · 04/08/2015, 15h32

Bonjour tout le monde,
je realise un jeu, qui se base sur un principe de drag&drop, j'ai un code qui me dessines une belle case et je peux la bouger comme je veux, j'ai utilis� pour cela un canvas voir le code ci dessous

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
 
var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 500;
var HEIGHT = 300;
var out = false;
 
function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.fillText("",w,h)
 ctx.closePath();
 ctx.fill();
}
 
function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
 
function init() {
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");
 return setInterval(draw, 10);
}
 
function draw() {
 clear();
 //ctx.font = "bold 22pt Calibri,Geneva,Arial";
 ctx.fillStyle = "black";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "rgba(183, 274, 153, 0.5)";
 rect(x - 30, y - 30, 80, 80);
 
}
 
 
function myMove(e){
 if (out){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
 }
}
 
function myDown(e){
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
  out = true;
  canvas.onmousemove = myMove;
 }
}
 
function myUp(){
 out = false;
 canvas.onmousemove = null;
}
 
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;

J'ai un code similaire qui fait la meme chose mais pour un text.
ce que je n'arrives pas a faire c'est de faire bouger les deux en meme temps, sachant que le but final c'est de prendre la phrase, la d�couper (string.split), mettre chaque mot dans une case et faire bouger le tout.
PS : c'est un jeu ou il faut reformer une phrase a partir de mots m�lang�s
merci pour votre aide !

**Darkauron** · 04/08/2015, 16h09

Bonjour,

Si je comprend bien, tu nous fournis un code qui fonctionne, mais qui n'est pas (plus) celui actuellement utilis� ?

Non pas que j'ai la flemme de refaire ce que tu as fait, mais peux-tu fournir le code (HTML et JS) qui pose probl�me ?

Merci

**mehdi.chouaf** · 04/08/2015, 16h24

Le code que j'ai fournis est le Drag&Drop de la case dessin�.
j'ai dis que j'avais un code pareil qui fait bouger juste une chaine de caract�re, mais mon but est de faire bouger les deux.
Je n'ai pas un code officiel utilis�e, mais j'ai plusieurs bout de code qui font plus ou moin une petite partie de ce que je veux faire.
je vous remets le code avec la partie html

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
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Case-D&D</title>
</head>
<body>
<section>
 
<div>
<canvas id="canvas" width="500" height="800">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
 
<script type="text/javascript">
var canvas;
var ctx;
var x = 75;
var y = 50;
var WIDTH = 500;
var HEIGHT = 300;
var out = false;
 
function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.fillText("",w,h)
 ctx.closePath();
 ctx.fill();
}
 
function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
 
function init() {
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");
 return setInterval(draw, 10);
}
 
function draw() {
 clear();
 //ctx.font = "bold 22pt Calibri,Geneva,Arial";
 ctx.fillStyle = "black";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "rgba(183, 274, 153, 0.5)";
 rect(x - 30, y - 30, 80, 80);
 
}
 
 
function myMove(e){
 if (out){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
 }
}
 
function myDown(e){
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
  out = true;
  canvas.onmousemove = myMove;
 }
}
 
function myUp(){
 out = false;
 canvas.onmousemove = null;
}
 
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
</section>
</body>
</html>

Merci

Drag&Drop pour jeu javascript

JavaScript

Discussions similaires

Partager

Partager