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

Vue hybride

Discussions similaires

Partager

Partager