php_group
/
htdoc


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!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 car1"></div>
  <div class="car car2"></div>
  <div class="car car3"></div>
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function start(){
  $('.car1').stop( true, true ).css('left','-120px');
  $('.car2').stop( true, true ).css('left','-240px');
  $('.car3').stop( true, true ).css('left','-360px');
  $('.car1').animate({
    "left": '370'
  }, 4000, "linear", function(){
    $(this).animate({
      "left": '900'
    }, 8000, "linear");
  });
  $('.car2').animate({
    "left": '370'
  }, 5000, "linear", function(){
    $(this).animate({
      "left": '900'
    }, 8000, "linear");
  });
  $('.car3').animate({
    "left": '370'
  }, 6000, "linear", function(){
    $(this).animate({
      "left": '900'
    }, 8000, "linear");
  });
  setInterval(function(){
    drawing();
  }, 100);
}

function drawing(){
  ctx.clearRect(0,0,800,600);
  var x1 = parseInt($('.car1').css('left')) + 10;
  ctx.strokeStyle = "#000000";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.setLineDash([15,10]);
  ctx.moveTo(0, 280);
  ctx.lineTo(x1, 280);
  ctx.moveTo(0, 320);
  ctx.lineTo(x1, 320);
  ctx.stroke();
  ctx.closePath();
}

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