축구게임 랜덤 포함(auto/refresh제외)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>coding game 1</title>
<style>
	#buttons {}
	#buttons div {width:20px; height:20px; font-family:Arial;font-size:15px;background:#000;color:#fff;line-height:20px;text-align:center;display:inline-block;}
	#buttons div:hover {background:#00f;color:#ff0;cursor:pointer;}
	#box {width:500px;height:500px;border:1px solid #000;position:relative;background:url(http://webskills.kr/images/grid.png);}
	#post, #ball {width:50px;height:50px;position:absolute;}
	#post { background:url(http://webskills.kr/images/post.jpg);}
	#ball { background:url(http://webskills.kr/images/ball.jpg);}
</style>
</head>
<body>
	<div id="buttons">
		<div onclick="goLeft();">←</div>
		<div onclick="goRight();">→</div>
		<div onclick="goUp();">↑</div>
		<div onclick="goDown();">↓</div>
		<div onclick="goAuto();" title="자동으로">A</div>
		<div onclick="checkGoal();" title="골체크">C</div>
		<div onclick="goRefresh();" title="새로시작">R</div>
	</div>
	<div id="box">
		<div id="post"></div>
		<div id="ball"></div>
	</div>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<script>
		var bx = (Math.floor((Math.random() * 9) + 1)) * 50;
		var by = (Math.floor((Math.random() * 9) + 1)) * 50;
		var px = (Math.floor((Math.random() * 9) + 1)) * 50;
		var py = (Math.floor((Math.random() * 9) + 1)) * 50;
		$("#ball").css({left:bx,top:by});
		$("#post").css({left:px,top:py});

		function goRight(){
			bx = bx + 50;
			if(bx > 450) bx = 450;
			$("#ball").css({left:bx});
		}
		function goLeft(){
			bx = bx - 50;
			if(bx < 0) bx = 0;
			$("#ball").css({left:bx});
		}
		function goUp(){
			by = by - 50;
			if(by < 0) by = 0;
			$("#ball").css({top:by});
		}
		function goDown(){
			by = by + 50;
			if(by > 450) by = 450;
			$("#ball").css({top:by});
		}
		function checkGoal(){
			if( bx == px && by == py ){
				alert("Gooooooooal~~!!");
			}
		}
	</script>
</body>
</html>