htdoc/htdocs_old/ipad/function7.js

function FingerComponent(obj_list,sync_obj,canvas){
	//alert("!!!");
	this.TRANSFORM_PREFIXED = this.getVendorPrefixed(["transform", "msTransform", "MozTransform", "webkitTransform", "OTransform"]);
	this.canvas=canvas;
	//alert("!!!!");
	this.boxList = [];
	this.car = this.assignBox(sync_obj);
	this.car["beginRun"]=false;
	this.car["newStage"]=0;
	this.car["yforLine"]=[0];
	this.car["dragDeg"]=[];
    
	this.boxList.push(this.car);
	
	for(var i = 0,objId;objId=obj_list[i];i++){
		var temp = this.assignBox(objId);
		this.boxList.push(temp);
		this.listen(temp);
	}
	this.arrow=this.boxList[1];
	var _this=this;
	var loop=function(){
		_this.moveCar();
		for(var i=0; i<_this.boxList.length; i++) {
			_this.transform(_this.boxList[i]);
		}
		requestAnimationFrame(loop);
	};
	loop();
	this.loop=loop;

}

FingerComponent.prototype.moveCar=function() {
	
	if(this.car.beginRun){	
		var xMargin=[0,430,640,0,0];
		var maxStage= 9; //¨F­±
		var step=1; //¦æ¶i³t«×
		
		var ctx = this.canvas.getContext("2d");
		//ctx.moveTo(xMargin[this.car.newStage-1],this.car.yforLine[this.car.newStage-1]);
		ctx.lineTo(this.car.x+30,this.car.y-10);
		ctx.lineWidth = 5;
		ctx.lineLength = 6;
		ctx.strokeStyle = "red";
		ctx.stroke();
		this.car.isUpdated = true;
		
		if(this.car.x==212){
			//console.log("!!!");
			var tol=5e-1;
			if(this.car.rad < this.arrow.rad && this.arrow.rad-this.car.rad>=tol){
				this.car.rad += 0.2;
				return;
			}
			else if(this.car.rad > this.arrow.rad && this.car.rad-this.arrow.rad>=tol){
				this.car.rad -= 0.2;
				return;
			}
			/*else{
				
			}*/
		}
		if(this.car.x>212)
			step=0.5;
		var deltay=step*Math.tan(this.car.rad*Math.PI/180); //¦æ¶i¨¤«×
		this.car.x+=step;
		this.car.y+=deltay;
    
		//this.car.style.transformOrigin="20% 40%";
		
		if(this.car.x>=xMargin[this.car.newStage]){
			this.car.beginRun=false;
			this.car.yforLine.push(this.car.y);	
			var $normal_line=$("#normal-line").clone().attr("id","");//.css("left","0px");
			var left=(this.car.x-70);
			var carWidth=10;
			var carHeight=50;
			var top=this.car.y+((carHeight/3)/Math.tan(this.car.rad*Math.PI/850)+carWidth)*Math.sin(this.car.rad*Math.PI/180);
			var style="position:absolute;left:"+left+"px;top:"+top+"px;";

			this.arrow.x=this.car.x;
			this.arrow.y=this.car.y;
			//this.arrow.isUpdated=true;

			saveRecordr(0,this.car.x,0,0,0);
	    saveRecordr(0,0,this.car.y,0,0);

		  if(this.car.x == 430 && this.car.y >= 100 && this.car.y<=350){
				this.arrow.element.className="arrow-begin hidden";
				var _this=this;
				check.style.display = "inline";
				check.style.top = 650;
				check.style.left = 500;
				saveRecord(250);
				saveRecord(100);
				setTimeout(
					function(){
						correct.style.display = "inline";
						correct.style.top = 650;
						correct.style.left = 500;
						next.style.display = "inline";
						next.style.top =600;
						next.style.left = 750;
						back.style.display = "inline";
						back.style.top =600;
						back.style.left = 630;
						
						next.setAttribute("data-url","406A.php?correct=true&x="+_this.car.x+"&y="+_this.car.y+"&rad="+_this.car.rad);
					}
				,3000);	
			}
			if(this.car.x == 430 && this.car.y < 100 || this.car.y >351){
				this.arrow.element.className="arrow-begin hidden";
				check.style.display = "inline";
				check.style.top = 650;
				check.style.left = 500;
				saveRecord(250);
				saveRecord(200);
				setTimeout(
					function(){
						wrong.style.display = "inline";
						wrong.style.top = 650;
						wrong.style.left = 500;
						next.style.display = "inline";
						next.style.top =600;
						next.style.left = 750;
						back.style.display = "inline";
						back.style.top =600;
						back.style.left = 630;
					}
				,3000)
			}
		}
		else{
			this.arrow.element.className="arrow-begin hidden";
		}
	}		
}
function nextPage(code,url){
	saveRecord(code);
	setTimeout(1500,location.replace(url));
	
}
function dragPic(){
	dragTime = Math.floor(Date.now() / 1000);
}
FingerComponent.prototype.checkRes=function() {
  document.getElementById("Answer1").style.display="inline";
}
FingerComponent.prototype.assignBox=function(picS) {
	var pic = document.getElementById(picS);
	//console.log(pic);
	return {
		element: pic,
		isUpdated: true,
		x: 120,//Math.random() * (window.innerWidth - 200),
		y: 50,//Math.random() * (window.innerHeight - 300),
		rad: 45,//Math.random()*Math.PI * 2,
		scale: 1,
		rafId: 0,
		zIndex: 0,
		degx: 0,
		degy: 0
	}
}
FingerComponent.prototype.listen=function(pBoxO) {
	var finger = new Fingers(pBoxO.element);
	var flag=false;
	var _this=this;
	finger.addGesture(Fingers.gesture.Drag, null).addHandler(function(pEventType, pData, pFingers) {
			if(pEventType === Fingers.Gesture.EVENT_TYPE.move) {
				var x=pFingers[0].getDeltaX();
				var y=pFingers[0].getDeltaY();

				var temp=pBoxO.rad+y/3;
				if(temp>=0 && temp<=55)
					pBoxO.rad = temp;
				//_this.arrow.rad = pBoxO.rad;				
			    //_this.arrow.isUpdated=true
				//_this.car.isUpdated=true
				pBoxO.isUpdated = true;
				
			}
			else if(pEventType === Fingers.Gesture.EVENT_TYPE.end) {
				//pBoxO.element.className+=" hidden";
				_this.car.dragDeg.push(_this.car.rad);
				_this.car.beginRun=true;
				_this.car.newStage++;
				_this.car.lastRad=_this.car.rad;
			}
	});

	pBoxO.fingers = finger ;
}

FingerComponent.prototype.transform=function(pBoxO) {
	
	if(pBoxO.isUpdated) {
		pBoxO.element.style[this.TRANSFORM_PREFIXED] = "translateZ(0) " +
						"translate(" + pBoxO.x + "px, " + pBoxO.y + "px) " +
						"scale(" + pBoxO.scale + ") " +//+ "rotate3d(0,0,0," + pBoxO.rad + "rad) ";
						"rotate(" + pBoxO.rad + "deg) ";
		
		pBoxO.element.style.zIndex = pBoxO.zIndex;
		pBoxO.isUpdated = false;
	}
}
FingerComponent.prototype.getVendorPrefixed=function(pArrayOfPrefixes) {
	var result = null;
	for (var i=0; i<pArrayOfPrefixes.length; i++) {
		if (document.body.style[pArrayOfPrefixes[i]] !== undefined) {
			result = pArrayOfPrefixes[i];
			break;
		}
	}
	return result;
}
function saveRecord(code){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000));
}

function saveRecords(code,time){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&dragtime=" + time);
}

function saveRecordr(code,rotX,rotY,rotZ,rotS){
	xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState==4) {
			if(xmlhttp.status==200) {
				xmlhttp.abort();
			}
		}
	};
	xmlhttp.open("POST","saveRecord.php",true);
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("codenum=" + code + "&time=" + Math.floor(Date.now() / 1000) + "&rotx="+rotX+"&roty="+rotY+"&rotz="+rotZ+"&scale="+rotS);
}