Created
October 3, 2014 15:13
-
-
Save youngershen/01265b7077baf3aa515d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(window, document){ | |
if(window.jigs4w){ | |
return window.jigs4w; | |
}else{ | |
jigs4w = {}; | |
window.jigs4w = jigs4w; | |
} | |
var total_steps = 0; | |
var partition_list = []; | |
var start_time = 0; | |
var current_index = 0; | |
jigs4w.init = function(source, options, image, partition){ | |
total_steps = 0; | |
partition_list = []; | |
var fm = document.createDocumentFragment(); | |
var list = this.create_list(); | |
partition_list = list; | |
for(var i = 0 ; i < list.length; i++){ | |
var item = document.createElement('div'); | |
item.style.cssText = 'width:'+ this.clip_width +'px;height:'+ this.clip_height +'px; overflow:hidden;'; | |
item.appendChild(list[i]); | |
fm.appendChild(item); | |
} | |
this.source.innerHTML = ''; | |
this.source.appendChild(fm); | |
start_time = new Date().getTime(); | |
this.timer(); | |
} | |
jigs4w.timer = function(){ | |
this.timer && clearInterval(this.timer); | |
var end_time = new Date().getTime(); | |
var t = end_time - start_time; | |
var h = parseInt(t/3600/1000); | |
var m = parseInt((t % (3600*1000))/60/1000); | |
var s = parseInt(t % (60*1000)/1000); | |
var o = [h < 10 ? '0'+ h : h, m < 10 ? '0'+ m : m, s < 10 ? '0'+ s : s]; | |
this.opts.runHandler && this.opts.runHandler(o); | |
var _this = this; | |
this._timer = setInterval(function(){ | |
_this.timer(); | |
}, 1000); | |
} | |
jigs4w.create_list = function(){ | |
var ret = []; | |
var total = parseInt(this.partition[0]) * parseInt(this.partition[1]); | |
console.log("total : " + total); | |
for(var i = 0 ; i < total; i++){ | |
var img = document.createElement('img'); | |
//var p = this.getPos(i); | |
img.id = i + ''; | |
img.src = this.origin_image; | |
if(i == (total -1)){ | |
var pos = [-10000,-10000,-10000,-10000]; | |
}else { | |
var pos = this.get_position(i); | |
} | |
var css = this.build_css(pos); | |
//img.setAttribute("style", css ); | |
img.style.cssText = css; | |
ret.push(img); | |
} | |
return this.get_random(ret); | |
} | |
jigs4w.get_random = function(tt){ | |
var new_list = []; | |
var length = tt.length; | |
for(var i = 0 ; i < length ; i++){ | |
var rand = Math.floor(Math.random() * tt.length) | |
if(tt[rand].id == (this.total_clips - 1 + '')){ | |
current_index = i; | |
} | |
tt[rand].title = i; | |
new_list[i] = tt[rand]; | |
tt.splice(rand, 1); | |
} | |
return new_list; | |
} | |
jigs4w.build_css = function(pos){ | |
//console.log("pos:" + pos); | |
var ret = 'width:'+ this.width +'px;height:'+ this.height; | |
ret += 'px;margin-left:'+ (-pos[3]) +'px;margin-top:'+ (-pos[0]); | |
ret += 'px;clip:rect('+ pos[0] +'px,'+ pos[1] +'px,'+ pos[2] +'px,'+ pos[3] +'px);'; | |
return ret; | |
} | |
jigs4w.get_position = function(index){ | |
var width = this.clip_width; | |
console.log("clip_width:" + width); | |
console.log("width:" + width); | |
var height = this.clip_height; | |
var abs_pos_r = parseInt((index ) / this.partition[1]) + 1 ; | |
var abs_pos_v = parseInt((index ) % this.partition[1]) + 1 ; | |
var pos = []; | |
pos[0] = parseInt(height * (abs_pos_r - 1));//top | |
pos[1] = parseInt(width * (this.partition[1] - abs_pos_v)); //right | |
pos[2] = parseInt(height * (this.partition[0] - abs_pos_r)); //bottom; | |
pos[3] = parseInt(width * (abs_pos_v - 1)); //left | |
return pos; | |
} | |
jigs4w.check_pos = function(index){ | |
var row = this.partition[0]; | |
var col = this.partition[1]; | |
var total = row * col; | |
var target1 = 0; | |
var target2 = 0; | |
var target3 = 0; | |
var target4 = 0; | |
if(current_index + 1 < row ){ | |
target1 = 999; | |
target3 = current_index + row; | |
}else{ | |
target1 = current_index - row; | |
if(current_index + row > total){ | |
target3 = 999; | |
}else{ | |
target3 = current_index + row; | |
} | |
} | |
if((current_index + 1) % row == 1){ | |
target4 = 999; | |
target2 = current_index + 1 | |
}else{ | |
target4 = current_index - 1; | |
target2 = current_index + 1; | |
if((current_index + 1) % row == 0){ | |
target2 = 999; | |
target4 = current_index - 1; | |
} | |
} | |
if(index == target1 || index == target2 || index == target3 || index == target4){ | |
console.log("can change") | |
return true; | |
}else{ | |
return false; | |
} | |
} | |
jigs4w.touchHandler = function(e){ | |
var tar = e.target; | |
var flag = true; | |
if(!tar) { | |
tar = e.touches[0].target; | |
if(e.touches.length !== 1) { | |
flag = false; | |
} | |
} | |
if(flag && tar.tagName === 'IMG') { | |
var i = parseInt(tar.title); | |
var p = current_index - i; | |
console.log("current index :" + current_index); | |
console.log("clicked index:" + i); | |
if(jigs4w.check_pos(i)){ | |
//change position | |
jigs4w.change_position(i); | |
jigs4w.check_success(); | |
console.log("change"); | |
}else{ | |
//do nothing | |
console.log("nochange"); | |
} | |
} | |
} | |
jigs4w.change_position = function(i){ | |
var clicked_image = partition_list[i]; | |
var index_image = partition_list[current_index]; | |
var temp = index_image; | |
var id = index_image.id; | |
//index_image.title = clicked_image.title; | |
index_image.id = clicked_image.id; | |
index_image.style.clip = clicked_image.style.clip; | |
index_image.style.marginLeft = clicked_image.style.marginLeft; | |
index_image.style.marginTop = clicked_image.style.marginTop; | |
console.log("change_position title:"+ current_index) | |
clicked_image.id = id; | |
//clicked_image.title = current_index; | |
console.log("after change title" + clicked_image.title); | |
clicked_image.style.clip = "rect(-1000px,-1000px,-1000px,-1000px)"; | |
clicked_image.style.marginLeft = '1000px'; | |
clicked_image.marginTop = '10000px'; | |
current_index = i; | |
total_steps = total_steps + 1; | |
this.opts.changeHandler && this.opts.changeHandler(total_steps); | |
} | |
jigs4w.check_success = function(){ | |
console.log(partition_list); | |
var flag = true; | |
for(var i = 0 ; i < partition_list.length; i++){ | |
if(partition_list[i].id != i){ | |
flag = false; | |
break; | |
} | |
} | |
if(flag){ | |
this.timer && clearInterval(this.timer); | |
this.opts.successHandler && this.opts.successHandler(); | |
} | |
} | |
jigs4w.instance = function(source, options, image, partition){ | |
//image : image_path_str | |
//partition: [1,2], [3,3] | |
_this = this; | |
this.source = source; | |
this.opts = options; | |
this.partition = partition; | |
this.origin_image = image; | |
this.origin_image_element = document.createElement('img'); | |
this.origin_image_element.src = image; | |
this.width = this.origin_image_element.width; | |
this.height = this.origin_image_element.height; | |
this.clip_width = this.width / this.partition[1]; | |
this.clip_height = this.height / this.partition[0]; | |
this.total_clips = parseInt(partition[0]) * parseInt(partition[1]); | |
source.style.width = this.width + 'px'; | |
source.style.height = this.height + 'px'; | |
document.addEventListener('click', this.touchHandler, true); | |
this.init(); | |
} | |
})(window, document); | |
var step_div = document.getElementById('steps'); | |
var timer_div = document.getElementById('timer'); | |
var handler = {} | |
handler.successHandler = function(){ | |
alert("successful!"); | |
} | |
handler.changeHandler = function(s){ | |
step_div.innerHTML = "steps : " + s; | |
} | |
handler.runHandler = function(time){ | |
timer_div.innerHTML = time[0] + ":" + time[1] + ":" + time[2]; | |
} | |
jigs4w.instance(document.getElementById('jigsaw'),handler,"1.jpg", [3,3]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment