php_group
/
htdoc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!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/flash1.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="bg"></div>
	<div class="wall"></div>
	<div class="obj"></div>
	<div class="shadow"></div>
	<div class="candle candle1">
		<div class="fire"></div>
	</div>
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>

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


var isPress = false;

var hammer = document.getElementById("wrapper");
var mc = new Hammer(hammer);
mc.on("press", function(ev) {
    isPress = true;
});
mc.on("pressup", function(ev) {
    isPress = false;
});
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright", function(ev) {
    var e = ev;
    e.pageX = ev.center.x;
    moveEvent(e);
});

var OrigOB1Y = Number($(".candle1").css("top").replace("px",""));
$(".candle1").mousedown(function(){
	isPress = true;
});
$(window).mouseup(function(){
	isPress = false;
});
$(".wrapper").mousemove(function(e){
	moveEvent(e);
});

function moveEvent(e){
	var mouseX = e.pageX;
	if (isPress && mouseX<240 && mouseX > 77){
		$(".candle1").css({
			"left":mouseX,
			"top" :OrigOB1Y-(mouseX-72)*0.51
		});
		var scaleRate = ((mouseX-77)*0.0012)+0.8;
		// console.log(scaleRate);
		$(".shadow").css("transform","scale("+scaleRate+")");
		// console.log($(".shadow"));

		var shadow = getPos($(".shadow"));
		var x1 = shadow.x - ((scaleRate-1)*60);
		var y1 = shadow.y - ((scaleRate-1)*100);
		var x2 = (shadow.x+122) + ((scaleRate-1)*60);
		var y2 = (shadow.y+60) - ((scaleRate-1)*20);
		var x3 = shadow.x - ((scaleRate-1)*60);
		var y3 = (shadow.y+124) + ((scaleRate-1)*40);
		var x4 = (shadow.x+122) + ((scaleRate-1)*60);
		var y4 = (shadow.y+183) + ((scaleRate-1)*100);
		

		ctx.clearRect(0,0,800,600);
		ctx.beginPath();
		var candle = getPos($(".candle1"));
		ctx.moveTo(candle.x+7,candle.y);
		ctx.lineTo(x1,y1);
		ctx.moveTo(candle.x+7,candle.y);
		ctx.lineTo(x2,y2);
		ctx.moveTo(candle.x+7,candle.y);
		ctx.lineTo(x3,y3);
		ctx.moveTo(candle.x+7,candle.y);
		ctx.lineTo(x4,y4);
		ctx.closePath();
		ctx.stroke();
	}
}

function getPos(tar){
	var result = {};
	result.x = Number(tar.css("left").replace("px",""));
	result.y = Number(tar.css("top").replace("px",""));
	return result;
}
</script>
</body>
</html>