Drag&Drop pour jeu javascript
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:
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 !
