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 !