축구게임(화살표로 골대에 넣기) 기본 틀

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>coding game 1</title>
<style>
    #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 {
        left: 350px;
        top: 350px;
    }
    #post {
        background:url(http://webskills.kr/images/post.jpg);
    }
    #ball {
        background:url(http://webskills.kr/images/ball.jpg);
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="box">
        <div id="post"></div>
        <div id="ball"></div>
    </div>

    <script>
    //여기에 코드를 넣어서 게임을 완성하시오.
    //화살표키를 움직여 공을 상하좌우로 이동하며
    //공은 축구장을 벗어날 수 없고
    //공기 골대에 들어가면 게임 종료(창이 뜨거나....)

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