Arkanoid 2.0 на Canvas

[psywalker]

Добрый день, камрады!

Хочу представить вашему вниманию новую версию Arkanoid, которую на мой взгляд смело можно назвать 2.0, т.к. она кардинально отличается от предыдущей, первой части. После ваших замечаний, критики и пожеланий я постарался учесть каждую мелочь и исправить те ошибки, которые были в 1.0 версии. Огромное спасибо хочу сказать Great Rash-у, за кучу идей, разжёвывания материала и большую помощь в процессе работы. Благодаря ему я узнал много нового.

А вот что собственно изменилось.

- Физика. Т.е. правильные отскоки шарика от биты, стен, кирпичей и прочего.

- Симметрия. Т.е. кирпичи симметрично выводятся на кэнвас.

- Масштабирование. Т.е. кэнвас и все его элементы подстраиваются под его ширину. В зависимости от ваших настроек.

- Управлять можно клавишами, влево, вправо, а пробел например - это запуск шарика.

- Появились кнопки пауза (специально для Светы ), новая игра, уровни, очки, жизни. Разного рода кирпичи, а так же приятные цвета, в общем всё для того, чтобы придать игре жизнь.

Но не смотря на эти изменения, наверняка вы найдёте ошибки, косяки и прочие вещи. Поэтому очень хочется услышать критику, замечания, пожелания и т.д.

http://psywalker.ru/Forum/JS/Primitive/Dom...Arcanoid/4.html

И, да, кстати, забыл сказать. Можно скачать скрипт. Подключить его на страницу и вызвать игру, передав ей в качестве параметра объект в таком формате. {w: 700, h: 700, id: 'id нужного блока'} - где w - это ширана кэнваса, h - высота, а id - это id блока, в который вы хотите поместить игру. Можно ничего не передавать, тогда возьмутся параметры по умолчанию.

- Масштабирование. Т.е. кэнвас и все его элементы подстраиваются под его ширину. В зависимости от ваших настроек.

window.onload = function() {

Game.init({w: 700, h: 600});

}

В общем, как сделано тут. Там же можно скачать скрипт.

http://psywalker.ru/Forum/JS/Primitive/Dom...Arcanoid/5.html

[klierik]

в случае если я быстро поведу ту штуку внизу, и во время движения об неё ударится шарик, то он должен учесть смену траектории в сторону в которую двигалась основа.

а пока что он просто арифметически отталкивается не учитывая энерции.

[ZI DAN]

Да, стал намного лучше, только притормаживает теперь . Кстати, управление клавишами неиграбельное.

Edited February 7, 2011 by ZI DAN

[htmlonline]

Мне понравилось!

[Veseloff]

Не знаю уж с чем связано — с алгоритмом или особеностями технологии в связке с браузером, но во время игры процессор начинает потеть, как при массовом ресайзе видео или картинок. Причём сразу все четыре ядра. Представляю что на одноядерных компах творится

Я в HTML5 вообще не секу, так что посоветовать ничего не могу особо, но вот какой момент, мне кажется, может быть критичным — когда шарик отскакивает откуда-то то он как себя ведёт? Раз в сколько-то меняются координаты или обсчитывается вектор и он направляется туда?

[psywalker]

в случае если я быстро поведу ту штуку внизу, и во время движения об неё ударится шарик, то он должен учесть смену траектории в сторону в которую двигалась основа.

а пока что он просто арифметически отталкивается не учитывая энерции.

Понял, спасибо. Отличное замечание.

Да, стал намного лучше, только притормаживает теперь . Кстати, управление клавишами неиграбельное.

1. В чём выражается притормаживание, в каких моментах, какой браузер и т. д?

2. Что именно не нравиться в управлении клавишами?

[ВовчиГ]

У меня опера и все притормаживает, либо интернет медленный, но в любом случае молодец!

А на чем писал игру?

[psywalker]

Не знаю уж с чем связано — с алгоритмом или особеностями технологии в связке с браузером, но во время игры процессор начинает потеть, как при массовом ресайзе видео или картинок. Причём сразу все четыре ядра. Представляю что на одноядерных компах творится

А в чём это выражается, какой браузер и в каких моментах?

Я в HTML5 вообще не секу, так что посоветовать ничего не могу особо, но вот какой момент, мне кажется, может быть критичным — когда шарик отскакивает откуда-то то он как себя ведёт? Раз в сколько-то меняются координаты или обсчитывается вектор и он направляется туда?

Если отскок просходит от стен, то это 45градусов, а вот если от кирпичей и биты, там уже всё намного сложнее. При ударе о кирпич идёт проверка на 8 сторон. Т.е. откуда пришёл шарик, где был до этого и отсюда уже выставляется нужный отскок. При ударе о биту, там идёт проверка точки соприкосновения шарика, т.е. в какой точке именно был удар, отсюда высчитывается новая траектория полёта и скорость шарика.

Это так, в краце, а так всё намного сложнее))) Да, там кстати сетИнтервал идёт, и каждый раз рисуется кэнвас заново.

У меня опера и все притормаживает, либо интернет медленный, но в любом случае молодец!

А на чем писал игру?

Спасибо. Писал на HTML5/Canvas/JS

[ВовчиГ]

А я пробовал писать на AS, но когда дело дошло до физики все бросил...

Я тебе даже завидую немного, у тя сила воли хоть есть,

а я дело начинаю и не заканчиваю...

[psywalker]

А я пробовал писать на AS, но когда дело дошло до физики все бросил...

Я тебе даже завидую немного, у тя сила воли хоть есть,

а я дело начинаю и не заканчиваю...

Да я сам лентяй ещё тот. Просто заставляю себя.

[ВовчиГ]

Ты бы flash и ActionScript выучил, такие вещи писать можно! Офигеть как красиво...

[psywalker]

Ты бы flash и ActionScript выучил, такие вещи писать можно! Офигеть как красиво...

Я вообще думал об этом, но к сожалению времени вообще ни на что не хватает.

[ВовчиГ]

flash очень крутая вещь.

Там куча возможностей, вот только на страницах медленно грузится...

[psywalker]

flash очень крутая вещь.

Там куча возможностей, вот только на страницах медленно грузится...

Понял, спасибо. Будет время, обязательно засяду.

[ВовчиГ]

А где можно посмотреть "Аrcanoid 1.0"?

Сравнить просто хочется.

[swetlana]

Ты бы flash и ActionScript выучил, такие вещи писать можно! Офигеть как красиво...

позабавило

Хотя такого рода шутки по уму и не очень уместны в подобных темах.

Макс, а ведь это уже претензия на полноценный арканоид.

Неиграбельность при управлении с клавиатуры выражается в том, что перемещение биты не плавное, а скачками на фиксированное расстояние. Это явный минус.

Торможения, о котором тут говорили, не замечено. Нагрузки на процессор — тоже. Браузер — сафари. Сколько ядер — не знаю.

Пауза — это щасье Можно теперь отвлечься и доиграть потом.

А вообще здорово. Прямо аж раздразнил.

Охота теперь тоже заняться чем-то подобным.

[psywalker]

А где можно посмотреть "Аrcanoid 1.0"?

Сравнить просто хочется.

http://forum.htmlbook.ru/index.php?s=&...st&p=178153

[ВовчиГ]

Спасибо!

Уже посмотрел,

мячик отлетает от стенки наполовину в нее погрузившись

прикольно, улыбнуло...

[ZI DAN]

1. В чём выражается притормаживание, в каких моментах, какой браузер и т. д?

2. Что именно не нравиться в управлении клавишами?

1. В момент отскока от блоков сильнее всего тормозит. Смотрел в Mozilla 3.6.

2. Клавиши переставляют полку на очень большое расстояние. Т.е. игрок не может точно позиционировать ими полку, а это необходимо для отбивания шара под желаемым углом.

[swetlana]

И теперь чуть о багах.

Если изменить размер окна, то:

И так до тех пор, пока не проведёшь мышом над сдвинутой панелькой.

В какой-то момент шарик стал оставлять следы сверху:

Длина следа со временем увеличивается.

[psywalker]

Макс, а ведь это уже претензия на полноценный арканоид.

Неиграбельность при управлении с клавиатуры выражается в том, что перемещение биты не плавное, а скачками на фиксированное расстояние. Это явный минус.

Торможения, о котором тут говорили, не замечено. Нагрузки на процессор — тоже. Браузер — сафари. Сколько ядер — не знаю.

Пауза — это щасье Можно теперь отвлечься и доиграть потом.

Насчёт управления с клавы, согласен, внесено в блокнот. Торможения всё же где-то есть, и причём у всех по разному. Думаю это связано уже с неготовностью мира встретить кэнвас, во всей своей красе. А вообще нужно продумать план действий для будущей версии, чтобы тормоза были меньше.

Пауза - это огромное счастье

А вообще здорово. Прямо аж раздразнил.

Охота теперь тоже заняться чем-то подобным.

Спасибо. Рад был подразнить

1. В момент отскока от блоков сильнее всего тормозит. Смотрел в Mozilla 3.6.

2. Клавиши переставляют полку на очень большое расстояние. Т.е. игрок не может точно позиционировать ими полку, а это необходимо для отбивания шара под желаемым углом.

Понял. Спасибо за разъяснения. Записано.

И теперь чуть о багах.

Если изменить размер окна, то:

И так до тех пор, пока не проведёшь мышом над сдвинутой панелькой.

В какой-то момент шарик стал оставлять следы сверху:

Длина следа со временем увеличивается.

Насчёт рисунка 1. Дело в том, что это происходит во-время паузы, я прав? Из-за того что интервал останавливается и кэнвас перестаёт отрисовыватся. Во-время игры такое Не происходит. Пральна?

Насчёт других скринов, странно, не замечал такое поведение. Интересно, что скажут на это другие.

[ВовчиГ]

А у меня след в опере на все поле растянулся

[Veseloff]

А в чём это выражается, какой браузер и в каких моментах?

Выражается это в том, что htop показывает, что все 4 ядра «под завязку». Firefox 3.6.13 для linux. В хроме, кстати, относительно нормально.

Если отскок просходит от стен, то это 45градусов, а вот если от кирпичей и биты, там уже всё намного сложнее. При ударе о кирпич идёт проверка на 8 сторон. Т.е. откуда пришёл шарик, где был до этого и отсюда уже выставляется нужный отскок. При ударе о биту, там идёт проверка точки соприкосновения шарика, т.е. в какой точке именно был удар, отсюда высчитывается новая траектория полёта и скорость шарика.

Это так, в краце, а так всё намного сложнее))) Да, там кстати сетИнтервал идёт, и каждый раз рисуется кэнвас заново.

Вот тут, видимо, и кроется вся соль. В HTML5 есть какая-нибудь типа встроенная анимация, то есть, например, задаём такому-то объекту такой-то вектор движения с такой-то скоростью? Я просто писал когда-то арканоид то ли на паскале, то ли на си и вот была похожая проблема — если каждый раз заново отрисовывать шарик, то всё дико тормозило, а если задавать вектор, то вычислений убавлялось просто в разы, даже в сотни раз. Особенно это выражалось, когда графики было много — например, рисовал комнату в 3D, то есть по ней можно было передвигаться и смотреть вверх-вниз, прямо как в дюк нюкеме. Правда, там пришлось применять вообще ассеблерные вставки для отрисовки, ибо си не справлялся (а, может, я просто не освоил до конца).

[psywalker]

А у меня след в опере на все поле растянулся

Странно, ни разу не было, правда.

[swetlana]

Насчёт рисунка 1. Дело в том, что это происходит во-время паузы, я прав? Из-за того что интервал останавливается и кэнвас перестаёт отрисовыватся. Во-время игры такое Не происходит. Пральна?

Почти. Если во время игры менять размеры окна(интересно, кому такое в реале придёт в голову?), то панелька ползает за стаканом следом.

А неужели есть необходимость и эту панельку также кавасом делать?

На мой взгляд там это излишне.

Или смысл в том, чтобы сделать через канвас всё?