Добрый день всем. Изучаю создание браузерных игр с помощю 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
})
}
});
