php_group
/
htdoc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/flash3.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/hammer.min.js"></script>
</head>
<body>
<div id="wrapper" class="wrapper">
	<div class="start" onclick="start();">重來</div>
  <div class="car car4"></div>
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var isPress = false;
var place = false;
var onceClick = false;
var oriX,oriY,midX,midY,endX,endY,rot,nowX,nowY;
var oriX2, oriY2, nowX2, nowY2, midX2, midY2,hrX,hrY;
var mid = false;
var w = $('.car4').width()/2;
var h = $('.car4').height()/2;
var timer;
var tap = false;
var writing = true;

start();

function start(){
  isPress = false;
  place = false;
  onceClick = false;
  oriX='',oriY='',midX='',midY='',endX='',endY='',rot='',nowX='',nowY='';
  mid = false;
  tap = 0;
  ctx.clearRect(0,0,800,600);
  clearInterval(timer);
  $('.car4').finish().css({
    'left': '400px',
    'top': '548px',
    'transform': 'rotate(0)'
  });

  var ttt = setInterval(function(){
    writing = false;
  },5000);
  var hammer = document.getElementById("wrapper");
  var mc = new Hammer(hammer);
  mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
  mc.on("panleft panright panup pandown", function(ev) {
    tap = false;
    var e = ev;
    e.pageX = ev.center.x;
    e.pageY = ev.center.y;
    moveEvent(e);
  });
  mc.on("press", function(ev) {
    isPress = true;
    writing = true;
  });
  mc.on("tap", function(ev) {
    tap = true;
    place = true;
    var e = ev;
    e.pageX = ev.center.x;
    e.pageY = ev.center.y;
    moveEvent(e);
    mc.off('panleft panright panup pandown tap press');
  });

  $(".car4").mousedown(function(e){
    isPress = true;
    writing = true;
  });
  $(window).mouseup(function(){
    if (isPress){
      $(".car4").off('mousedown');
      $(window).off('mouseup');
      isPress = false;
      place = true;
    }
  });
  $(".wrapper").mousemove(function(e){
    moveEvent(e);
  });
}


jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

function moveEvent(e){
  var mouseX = parseInt(e.pageX);
  var mouseY = parseInt(e.pageY);
  if (isPress === true && tap == false){
    $('.car4').css({
      'left': mouseX,
      'top': mouseY
    });
  }
  if (place === true){
    var x = parseInt($('.car4').css('left'));
    var y = parseInt($('.car4').css('top'));
    
    rot = angle(x,y,mouseX, mouseY);
    $('.car4').rotate(-rot);

    oriX = x
    oriY = y
    writing = true;
    if (onceClick === false){
      onceClick = true;
      $(window).one('click', function(e){
        writing = false;
        $(".wrapper").off('mousemove');
        rot = angle(x,y,parseInt(e.pageX), parseInt(e.pageY));
        setCar(x, y, e.pageY);
      });
    }
  }
}

function getNewPosUP(x1,y1){
  var obj = {
    x: x1 - (w*Math.cos(rot*(Math.PI/180))) - (h*Math.sin(rot*(Math.PI/180))),
    y: y1 - (w*Math.sin(-rot*(Math.PI/180))) + (-h*Math.cos(-rot*(Math.PI/180)))
  }
  return obj;
}
function getNewPosDOWN(x1,y1){
  var obj = {
    x: x1 - (w*Math.cos(rot*(Math.PI/180))) + (h*Math.sin(rot*(Math.PI/180))),
    y: y1 - (-w*Math.sin(rot*(Math.PI/180))) + (h*Math.cos(rot*(Math.PI/180)))
  }
  return obj;
}

function setCar(carX, carY, tarY){
  var tarX = 400;
  if (rot <= 270 && rot >=90 && carX < 400){
    tarX = -100;
  }
  if ((rot > 270 || rot <90) && carX >= 400){
    tarX = 800;
  }
  var tarX2 = (carX < 400) ? 800:-100;
  var rot2 = newAngle(rot);
  var y1 = Math.abs(400-carX) * Math.tan((180-rot)*Math.PI/180);
  if (rot > 270 || rot <90){
    tarY = carY + y1;
  }else if(rot < 270 && rot > 90){
    tarY = carY - y1;
  }
  var tarY2;
  if (tarX2 === 800){
    tarY2 = tarY + Math.abs(tarX2-400) * Math.tan((180-rot2)*Math.PI/180);
  }else{
    tarY2 = tarY - Math.abs(tarX2-400) * Math.tan((180-rot2)*Math.PI/180);
  }

  var speed = (carX < 400) ? 160:80;
  var dist = distance(Math.abs(400-carX),y1);
  var t = dist / speed * 1000;
  carMoving(tarX, tarY, t, tarX2, tarY2, rot2);
}

function newAngle(rot){
  var rot2 = rot;
  if (rot > 270) rot2 = rot + (360-rot)*0.5;
  if (rot < 90) rot2 = rot - (rot)*0.5;
  if (rot > 90 && rot < 180) rot2 = rot - (rot - 90)*0.5;
  if (rot > 180 && rot < 270) rot2 = rot + (270 - rot)*0.5;
  return rot2;
}

function carMoving(left, top, t, left2, top2, rot2){
  timer = setInterval(function(){
    drawing();
  }, 100);
  // drawing();
  $('.car4').animate({
    "left": left,
    "top": top
  }, t, "linear", function(){
    mid = true;
    hrX = left;
    hrY = top;
    if (top >= 0 && top <= 600){
      var speed, t2;
      if (left2 > left){
        speed = 80;
      }else{
        speed = 300;
      }
      var balance = (top2 < top) ? 1000:0;
      var dist = distance(left2, top2);
      var t2 = (dist / speed) * 1000 + balance;
      $('.car4').rotate(-rot2);
      rot = rot2;
      $('.car4').animate({
        "left": left2,
        "top": top2
      },t2, "linear");
    }
  });
}

function distance(x,y){
  return Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
}

function angle(x1,y1,x2,y2){
  var x = Math.abs(x1-x2);
  var y = Math.abs(y1-y2);
  var z = Math.sqrt(x*x+y*y);
  var rotat = Math.round((Math.asin(y/z)/Math.PI*180));

  // 第一象限
  if (x2 >= x1 && y2 <= y1) {
      rotat = rotat;
  }
  // 第二象限
  else if (x2 <= x1 && y2 <= y1) {
      rotat = 180 - rotat;
  }
  // 第三象限
  else if (x2 <= x1 && y2 >= y1) {
      rotat = 180 + rotat;
  }
  // 第四象限
  else if(x2 >= x1 && y2 >= y1){
      rotat = 360 - rotat;
  }
  
  return rotat;
}

function drawing(){
  ctx.clearRect(0,0,800,600);
  var x1 = parseInt($('.car4').css('left'));
  var y1 = parseInt($('.car4').css('top'));
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.setLineDash([15,10]);
  if (!mid){
    ctx.moveTo(oriX, oriY);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();
  }else{
    ctx.moveTo(oriX, oriY);
    ctx.lineTo(hrX, hrY);
    ctx.moveTo(hrX, hrY);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();

    ctx.lineWidth = 2;
    ctx.setLineDash([]);
    ctx.beginPath();
    ctx.moveTo(0, hrY);
    ctx.lineTo(800, hrY);
    ctx.stroke();
    ctx.closePath();
  }

}

</script>
</body>
</html>