Javascript-форум - Определение координат DOM Объектов.

Добрый день всем. Изучаю создание браузерных игр с помощю js, jquery, html5. Столкнулся с проблемой. При проверке положения элемента ball, на его ударение об элемент paddle, проверка как таковая не срабатывает. И элемент ball проходит сквозь paddle. Как я думаю проблема в определении правильных координат элеметов. Помогите понять в чем дело. Ниже исходный код файлов index.html и game.js
index.html

<DOCTYPE!>
<html>
	<head>
		<style>
			#game{
				position: absolute;
				overflow: hidden;
				background: #00d3fa;
				height: 300px;
				width: 300px;
			}
			#fly
			{
				background: #af3d00;
				position: absolute;
				width: 50px;
				height: 15px;
				left: 50;
				bottom: 25;
			}
			#ball{
				position: absolute;
				background: #36ff12;
				width: 15; 
				height: 15;
				top: 100;
				left: 140;
			}
		</style>
		<script src = "js/jquery-1.6.4.min.js"></script>
		<script src = "js/game.js"></script>
	</head>
	<body>
		<div id = "game">
			<div id = "land">
				<div id = "paddle"></div>
				<div id = "ball"></div>
			</div>
		</div>
	</body>
</html>

game.js

var KEYS = {
	UP: 38,
	LEFT: 37,
	RIGHT: 39
};

var game = {};
game.pressedKeys = [];
game.ball = 
{
	speed: 3,
	directionY: 1,
	x: 140,
	y: 100
};

$(function(){
	game.timer = setInterval(gameloop, 30);
	
	$(document).keydown(function(e){
		game.pressedKeys[e.which] = true;
	});
	
	$(document).keyup(function(e){
		game.pressedKeys[e.which] = false;
	});
	
	function gameloop()
	{
		MoveBall();
		Movepaddle();
	}
	
	function Movepaddle()
	{
		if(game.pressedKeys[KEYS.LEFT])
		{
			var left = parseInt($("#paddle").css("left"));
			$("#paddle").css("left", left - 5);
		}
		if(game.pressedKeys[KEYS.RIGHT])
		{
			var left = parseInt($("#paddle").css("left"));
			$("#paddle").css("left", left + 5);
		}
	}
	
	function MoveBall()
	{
		var ball = game.ball;
		var gameHeight = parseInt($("#game").height());
		var gameWidth = parseInt($("#game").width());
		
		//удар о верх
		if(ball.y + ball.speed * ball.directionY < 0)
		{
			ball.direction = 1;
		}
		
		
		//за полем или нет
		if(ball.y + ball.speed *ball.directionY > gameHeight)
		{
			ball.x = 140; ball.y = 100;
			$("#ball").css({
				"left": ball.x,
				"top": ball.y
			})
		}
		
		//границы объектов
		var paddleTop = parseInt($("#paddle").css("top"));
		var paddleLeft = parseInt($("#paddle").css("left"));
		var paddleRight = parseInt($("#paddle").css("right"));
		var ballLeft = parseInt($("#ball").css("left"));
		var ballRight = parseInt($("#ball").css("right"));
		
		//!!!В ЭТОМ МЕСТЕ НАЧИНАЕТСЯ ПРОВЕРКА ПОПАДАНИЯ МЯЧА НА РАКЕТКУ КОТОРАЯ НЕ СРАБАТЫВАЕТ!!!
		//проверка на попадание на paddle
		if (ballLeft > paddleLeft && ballRight < paddleRight)
		{
			if(ball.y + ball.speed * ball.DirectionY >= paddleTop)
			{
				ball.directionY = -1;
			}
		}
		
		//перемещение мяча
		ball.y += ball.speed * ball.directionY;
		
		$("#ball").css({
				"left": ball.x,
				"top": ball.y
			})
	}
});