htdoc/htdocs_old/course3/function8.js

function FingerComponent(obj_list,sync_obj,canvas){
	this.TRANSFORM_PREFIXED = this.getVendorPrefixed(["transform", "msTransform", "MozTransform", "webkitTransform", "OTransform"]);
	this.canvas=canvas;
	
	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,610,800,0,0];
		var maxStage= 9; //沙面
		var step=0.5; //行進速度
		
		var ctx = this.canvas.getContext("2d");
		//ctx.moveTo(295,190);
		ctx.lineTo(this.car.x+30,this.car.y-10);
		//ctx.lineTo(this.car.x+30,this.car.y+232);
		ctx.lineWidth = 5;
		ctx.lineLength = 6;
		ctx.strokeStyle = "red";
		ctx.stroke();
		this.car.isUpdated = true;
		
		if(this.car.x==510){
			//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>510)
			step=1;
		var deltay=step*Math.tan(this.car.rad*Math.PI/180); //行進角度
		this.car.x+=step;
		this.car.y+=deltay;

		//this.car.style.transformOrigin="20% 40%";
	
		if(this.car.x >= 610){
			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;";
			//$("div").append($check.attr("style",style));
			this.arrow.x=this.car.x;
			this.arrow.y=this.car.y;
			this.arrow.isUpdated=true;
           
			//confirm(this.car.x);
			//confirm(this.car.y);
			saveRecordr(0,this.car.x,0,0,0);
	        saveRecordr(0,0,this.car.y,0,0);
			
		    if(this.car.x == 610.5 &&  this.car.y>=360)
			   {
				//this.arrow.element.className="hidden";
				 this.arrow.element.className="arrow-begin hidden";
				 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;
	           
				},3000)
			  }
			  if(this.car.x == 610.5 && this.car.y <= 361)
			   {
			
				//this.arrow.element.className="hidden";
			
				 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)
				
			  }
			  // if(this.car.x == 330 && this.car.y <= 200 || this.car.y>=331)
			  // {
				
				//this.arrow.element.className="hidden";
				//$("normal_line").className="hidden1";
				// this.arrow.element.className="arrow-begin hidden";
				// check.className= "";
		      //   setTimeout(
			  //   function(){
				// $("#wrong").removeClass("hidden");
				//   check.className = "hidden";
				//   next.className = "";
				//   back.className = "";
				//},3000)
				
			  //}	   
			//if( this.car.x == 640 && this.car.y >= 470 && this.car.y<=520)
			 //  {
				//this.arrow.element.className="hidden1";
				//$("#correct").removeClass("hidden");
				// wrong.className="hidden";
				//this.arrow.element.className="arrow-begin hidden";
			//  }	 
		}
		else
		{
			
			this.arrow.element.className="arrow-begin hidden";
			
		}
	}		
}
function nextPage(code,num){
	saveRecord(code);
	setTimeout(1500,location.replace(num+'.php'));
	
}
function dragPic(){
	dragTime = Math.floor(Date.now() / 1000);
}
FingerComponent.prototype.checkRes=function() {

 	//window.location.reload();
     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: 360,//Math.random() * (window.innerWidth - 200),
		y: 200,//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) {
				//pBoxO.x += pFingers[0].getDeltaX();
				//pBoxO.y += pFingers[0].getDeltaY();
				
				var x=pFingers[0].getDeltaX();
				var y=pFingers[0].getDeltaY();
				//console.log("X:"+x+" Y:"+y);
				var temp=pBoxO.rad+y/3;
				if(temp>=15 && temp<=105)
					pBoxO.rad = temp;//(y/100);
				//_this.car.rad=pBoxO.rad;
				_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);
}