Skip to content

Instantly share code, notes, and snippets.

@youngershen

youngershen/index.html

Created October 3, 2014 15:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save youngershen/72475138c80c7f184280 to your computer and use it in GitHub Desktop.
Save youngershen/72475138c80c7f184280 to your computer and use it in GitHub Desktop.
Download ZIP
jigs4w puzzle
Raw
index.html
<html>
<head>
<style>
.jigsaw{
position: relative;
border: 2px solid #7f9db9;
overflow: hidden;
}
.jigsaw div{
position: relative;
float: left;
overflow: hidden;
}
.jigsaw img{
cursor: pointer;
}
</style>
</head>
<body>
<div id = 'jigsaw' class = 'jigsaw'>
</div>
<div>
<span id="timer"></span></br>
<span id="steps"></span>
</div>
</body>
<script src = 'test.js'></script>
</html>
Raw
jigs4w.js
(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