纯js 连线小游戏

<div style="width:600px;height:800px;">
<canvas height=800px width=600px  id="can">
</canvas>
</div>
<script>
	
	var timeable=true;
	var grower,rounder;
	var start=0;
	var speed=10;
	var originx=300;
	var originy=400;
	var originx1=300;
	var originy1=400;
	var second=0;
	var index=0;
	var celltime=10;
	var dir=1;
	var pointarr=[[400,400],[350,350],[450,250],[400,500],[350,450],[300,500],[300,400]];
	var pointarrPlayer=[];
	var nextAngle=getAngle(pointarr[index]);
	var currentAngle=90;
	var BLACK="black";
	var RED="red";
	var TOTAL=getTotal(pointarr);
	var message;
	
	
	function onTouchStart(){
		if(timeable){
			timeable=false;
			grower=setInterval(function(){
				start+=speed;
				drawLine(start);
			},50);
		}
	}
	
	function onTouchEnd(){
		clearInterval(grower);
		timeable=true;
		var result=start-TOTAL;
		
		console.log("dis:"+result);
		
		if(result>0){
			message="too long ...";
		}else if(result<0&&result>-10){
			message="perfact ...";
		}else if(result<-10&&result>-100){
			message="pass ...";
		}else{
			message="too short ...";
		}
		
		rounder=setInterval(function(){
				moveByCircle();
			},10);
	}
	
	
	function drawLine(x){
		var can = document.getElementById("can");
		var ctx = can.getContext('2d'); //得到画笔
		ctx.strokeStyle = RED;
		ctx.beginPath();
		ctx.moveTo(originx,originy);  
		ctx.lineTo(originx,originy-x);
		ctx.stroke();
	}
	
	function drawArry(arr,color){
		var can = document.getElementById("can");
		var ctx = can.getContext('2d'); //得到画笔
		ctx.strokeStyle = color;
		ctx.beginPath();
		ctx.moveTo(originx1,originy1);
		for(var i=0;i<arr.length;i++){
			ctx.lineTo(arr[i][0],arr[i][1]);
		}
		ctx.stroke();
	}
	
	function drawMoveLine(){
	   var hudu = (2*Math.PI / 360) *  second;
	   var r=start;
       var X = originx + Math.sin(hudu) * r;
       var Y = originy - Math.cos(hudu) * r 
	   var can = document.getElementById("can");
	   var ctx = can.getContext('2d'); //得到画笔
	   ctx.beginPath();
	   ctx.moveTo(originx,originy);  
	   ctx.lineTo(X,Y);
	   ctx.stroke();
	}
	
	function clear(){
		var can = document.getElementById("can");
		var ctx = can.getContext('2d'); //得到画笔
		ctx.clearRect(0,0,can.width,can.height);
	}
	
	function gameOver(){
		alert(message);
		window.clearInterval(rounder);   
	}
	
	
	function moveByCircle(){
		
	   clear();
	   drawMoveLine();
	   drawArry(pointarr,BLACK);
	   drawArry(pointarrPlayer,RED);
		
	   second+=dir;
	   currentAngle+=dir;
		
	   if(canChange(currentAngle,nextAngle,dir)){
			var distance=getDistance(originx,originy,pointarr[index][0],pointarr[index][1]);
			start=start-distance;
			if(start<=0){
				gameOver();
			}else{
				originx=pointarr[index][0];
				originy=pointarr[index][1];
				pointarrPlayer.push(pointarr[index]);
				if(index+1<pointarr.length){
					index++;
					dir=getDir(nextAngle,getAngle(pointarr[index]));
					console.log("currentAngle:"+currentAngle);
				}else{
					gameOver();
				}
			}
	   }
		
	}
	
	function canChange(cangle,angle,dir){
	
		//console.log("second:"+second+" cangle:"+cangle+" nangle:"+angle);
	
		if(dir>0){
			if(cangle>angle)
				return true;
		}else{
			if(cangle<angle)
				return true;
		}
		return false;
	}
	
	function getDir(cangle,nangle){
	
		if(cangle>360)
			cangle=cangle-360;
		else if(cangle<0)
			cangle=cangle+360;
			
		currentAngle=cangle;
	
		if(nangle<cangle){
			if(cangle-nangle<180){
				nextAngle=nangle;
				return -1;
			}else{
				nextAngle=nangle+360;
				return 1;
			}
		}else{
			if(nangle-cangle<180){
				nextAngle=nangle;
				return 1;
			}else{
				nextAngle=nangle-360;
				return -1;
			}
		}
	}
	
	function getDistance(x,y,x1,y1){
		dx = Math.abs(x1 - x);
        dy = Math.abs(y1 - y);
        var dis = Math.sqrt(Math.pow(dx,2)+Math.pow(dy,2));
		return dis;
	}
	
	function getAngle(point){
		return getAngleByPoint(point[0],point[1],originx,originy);
	}
	
	function getAngleByPoint(x,y,ox,oy){
		angle = Math.atan2((y-oy), (x-ox))*(180/Math.PI);
		return angle+180;
	}
	
	function getTotal(point){
	
		var total=0;
		
		var length=point.length;
		
		for(var i=0;i<point.length-1;i++){
			
			total+=getDistance(point[i][0],point[i][1],point[i+1][0],point[i+1][1]);
		
		}
		
		total+=getDistance(point[length-1][0],point[length-1][1],point[0][0],point[0][1]);
		
		console.log("total:"+total);
		
		return total;
	}
	
	document.body.addEventListener('keypress', onTouchStart, false);
	document.body.addEventListener('keyup', onTouchEnd, false);
	drawArry(pointarr,BLACK);
	
</script>

效果