Вопросы по игре арканоид на JS?

Question

[Робот]

В JS новичок, делаю для тренировки. Посмотрел:
habrahabr.ru/post/202530 - арканоид в 30 строк (нет комментариев в коду)
codingcraft.ru/web-design/arcanoid.php - арканоид на jQuery (но хочется именно на JS)

Извините за нубство, но не знаю где прояснить такие вопросы:

1. Понятно что кубики вверху это инлайн-блоки, но что делать с кубиком-div после столкновения? Каким образом его убрать? Прописать ему display: none? Да ещё что бы остальные не сдвигались и что шарик в следующий раз по этому месту пролетал спокойно насквозь.

2. Надо не просто расположить inline-div'ы но и определить и закрепить за каждым его координаты? Иначе как потом шарик узнает врезался он во что-то или нет?

3. Направление движение ракетки для подрезания. Есть касание. Что бы определить направление надо заранее определять и хранить направление ракетки в её свойствах, а в момент касания только посмотреть нужное свойство?

4. У шарика в момент отскока от препятствия вычисляется и задаётся какая-то конечная точка куда он полетит? Или он просто летит по вектору с нужным углом и каждый раз проверяется не достиг ли он какого-то объекта?

Answer 1

[Денис Инешин]

1. Кубики как раз не инлайн блоки. В этой ситуации при уничтожении одного из них, сдвинется вся конструкция. Делайте на position: absolute.
В крайнем случае просто ставьте opacity: 0 или visibility: hidden и условие для шарика что блоки с таким то классом игнорировать.
2. Position: absolute решает
3. Да, чем меньше вы вычисляете на лету, тем быстрее работает. Один раз меняем переменную при смене нажатии на кнопки вправо/влево
4. Тут на ваше усмотрение. С вектором будет проще (имхо).

Answer 2

[Ivanq]

1. Кубикам ставьте position: absolute, а при удалении ставьте display: none либо читайте про removeChild
2. Можно прописать элементам html-свойство (например, data-x и data-y) и его читать при столкновении
3. Да
4. По вектору проще и быстрее, лучше так