javascript 축구 게임 1(스크립트포함)

<!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 = 100;
		var by = 100;
		var px = 300;
		var py = 300;
		$("#ball").css({left:bx,top:by});
		$("#post").css({left:px,top:py});
		function goLeft(){
			bx = bx - 50;
			checkGoal();
		}
		function goRight(){
			bx = bx + 50;
			checkGoal();
		}
		function goUp(){
			by = by - 50;
			checkGoal();
		}
		function goDown(){
			by = by + 50;
			checkGoal();
		}
		function checkGoal(){
			$("#ball").animate({left:bx,top:by});
			if( bx == px && by == py ) {
				alert("Goooooooooooal !!!!");
			}
		}
		function goRefresh(){
			bx = 100;
			by = 100;
			checkGoal();
		}
		function goAuto(){
			goRefresh();
			for(var i=1;i<=4;i++){
				goRight();
			}
			for(var i=1;i<=4;i++){
				goDown();
			}
		}
	</script>
</body>
</html>