-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
40 lines (34 loc) · 1.4 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Canvas-dragdrop.js demo</title>
<script src="canvas-dragdrop.js"></script>
</head>
<body>
<canvas id=canvas width=800 height=480></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var some_object = {position: {x:20,y:20}, size:{w:100,h:120}};
var other_object = {position: {x:300,y:220}, size:{w:50,h:20}, color:"red"};
var cdd = new CanvasDragDrop(canvas);
cdd.makeDraggable(some_object);
cdd.makeDroppable(other_object,{
"drop":function(e){
this.color = ["green","red"][+(this.color!="red")];
}
});
/* a simple game loop */
setInterval(function(){
/* clear canvas */
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);
/* draw objects to screen */
ctx.fillStyle = "black";
ctx.fillRect(some_object.position.x, some_object.position.y, some_object.size.w, some_object.size.h);
ctx.fillStyle = other_object.color;
ctx.fillRect(other_object.position.x, other_object.position.y, other_object.size.w, other_object.size.h);
},10);
</script>
</body>
</html>