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; //沙面 var step=1; //行進速度 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); //行進角度 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<=320){ 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 >321){ 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