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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
$(document).ready(function(){
var k = Karma({
image: [
{'name':'sheep1','file':'sheep1.png'},
{'name':'sheep2','file':'sheep2.png'},
{'name':'sheep3','file':'sheep3.png'},
{'name':'rubbish','file':'rubbish.png'},
{'name':'rubbish_open','file':'rubbish_open.png'}
]
});
k.ready(function(){
var originalObjects = [
{id: "option0", count: 1},
{id: "option1", count: 2},
{id: "option2", count: 3}
];
// add all listeners
init_game();
// start the game
game_start();
function init_game(){
// add listeners for drag and drop
// make sure all the original objects can be dragged and cloned
for ( var i=0; i < originalObjects.length; i++ ){
$( "#" + originalObjects[i].id ).draggable({
helper: function(){
var c = $(this).clone();
c.attr('originalId', $(this).attr('id') );
return c;
},
//containment: '#gameArea',
appendTo: '#clonedObjects',
distance: 10,
start: function(){
bring_to_front(this);
},
stop:
function(ev, ui) {
// on drop, need to make a persistant clone of the helper
// unless we dropped on the rubbish bin of course
if (ui.helper.is(":visible")){
var helper = ui.helper.clone().draggable({
//containment: '#gameArea',
start: function(){
bring_to_front(this);
}
});
helper.appendTo('#clonedObjects');
}
}
});
}
// add handler to update score whenever items are moved
$("#gameArea").droppable({
activate: function(event, ui) {
update_score();
},
drop: function(event, ui) {
update_score();
}
});
// and to remove items when dropped in the rubbish bin
$("#discardTarget").droppable({
tolerance: 'intersect',
over: function(event, ui) {
ui.helper.hide();
$("#discardTarget").attr('src', Karma.image['rubbish_open'].media.src);
},
out: function(event, ui) {
ui.helper.show();
$("#discardTarget").attr('src', Karma.image['rubbish'].media.src);
},
drop: function(event, ui) {
// delete the helper from the DOM, after removing all listeners
ui.helper.unbind();
ui.helper.remove();
$("#discardTarget").attr('src', Karma.image['rubbish'].media.src);
}
});
// show the help text
$("#helpIcon").hover(
function(){ $("#helpText").show(); },
function(){ $("#helpText").hide(); }
);
}
function game_start(){
// restart the game
// remove all cloned objects
$("#clonedObjects").children().each(function(){
$(this).unbind();
$(this).remove();
});
update_score();
}
function update_score(){
var total = 0;
// sum the number of sheep that are over the dropTarget
$('#clonedObjects').children().each(function(){
if ( bounds_within($(this), $("#dropTarget")) ){
var oId = $(this).attr('originalId');
for ( var i=0; i < originalObjects.length; i++ ){
if ( originalObjects[i].id == oId ){
total += originalObjects[i].count;
break;
}
}
}
});
$("#total").html( Karma.convertNumToLocale(total, 'ne') );
}
// helper functions
function bring_to_front( el ){
// ensure that the zIndex of the passed element / selector is on top of all siblings
var zmax = 0;
$(el).siblings().each(function() {
var cur = parseInt( $(this).css('zIndex') );
zmax = cur > zmax ? cur : zmax;
});
$(el).css( 'zIndex', (zmax+1) );
}
function bounds_within( el1, el2 ){
if ( el1.offset().left > el2.offset().left &&
el1.offset().top > el2.offset().top &&
(el1.offset().left + el1.width()) < (el2.offset().left + el2.width()) &&
(el1.offset().top + el1.height()) < (el2.offset().top + el2.height()) ){
return true;
}
return false;
}
});
});
|
