bob_lyashenko Jan 25 2013 at 01:16

Physics Snake. С нуля. Часть первая

12 min

20K

JavaScript*Game development*Canvas*

Tutorial

+28

Comments 18

scipe Jan 25 2013 at 02:50

Только спать пошел, а Вы тут со своими змейками. Блин(

TheShock Jan 25 2013 at 03:22

Игра смотрится очень приятно и симпатично)

Код очень даже неплох, хотя кое-где есть косяки.

 Hero.prototype.moveTale = function() {
    if (this.moveCount == 3) {
        for (var j = 0, maxJ = this.tales.length; j<maxJ; j++) {
            if (j == 0) {
                this.tales[j].moveTo(this.body.position.x, this.body.position.y, 5);
            }
            else {
                this.tales[j].moveTo(this.tales[j - 1].position.x, this.tales[j - 1].position.y, 5);
            }
        }
        this.moveCount = 0;        
    }
    
    this.moveCount += 1;
 }

Почему this.moveCount == 3? Что значит тройка?
А внутренности стоило так делать:

var target = j ? this.tales[j - 1] : this.body;
this.tales[j].moveTo(target.position, 5);

И да, зачем вы делаете хаки для IE8-, если пишете на Canvas? Это какое-то старпёрство)

bob_lyashenko Jan 25 2013 at 12:20

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

о условных операторах
да, это будет как минимум компактней, улучшение: используем тернарную условную операцию, спасибо, человеку выше…

хаки IE8- это вы о загрузке изображения?
не проверял, будет ли такое в той же 9-ой версии, но если и нет, то это просто подход — сначала слушатель, потом событие. А был какой то другой продж(без канваса), там также была загрузка изображений, и в 8-м IE долго искал ошибку в логике, пока не увидел это место со слушателем события, попытался уберечь многих от поисков.

TheShock Jan 25 2013 at 14:30

Ну, например, это cмысла не имеет:

        if (document.documentElement.addEventListener) {
            document.body.addEventListener('keydown', handlers.keyDown); 
            document.body.addEventListener('keyup', handlers.keyUp);    
        }
        else {
            document.body.attachEvent('keydown', handlers.keyDown); 
            document.body.attachEvent('keyup', handlers.keyUp);
        }

bob_lyashenko Jan 26 2013 at 11:53

да, в нашем случае это так. это было написано уже на рефлексах (выработанных нашим любимым браузером, или как минимум его брендом), плюс, хотелось все таки показать, как правильно делать эту проверку.

webkumo Jan 25 2013 at 15:15

А разве canvas со сторонними либами не работает на ie7-8?

TheShock Jan 25 2013 at 15:22

Эмуляция через VML — миф. Позволяет делать только базовые вещи, очень тормозящие, что в игрострое использовать смысла нету.

krovatti Jan 25 2013 at 03:29

Неплохой такой Need for Speed. :)

-1

zerkms Jan 25 2013 at 04:13

У нас много файлов. В идеале все нужно обфусцировать и закинуть в один файл.

Вы точно не имели ввиду обфускацию? Процесс обфускации не обязательно приводит к уменьшению объёма кода. Наоборот, обфускация почти всегда исходники раздувает.

А уменьшается код минификацией.

bob_lyashenko Jan 25 2013 at 12:28

да, возможно здесь будет более уместно слово «минификация», так как здесь говорилось об уменьшении размера файла. Одним из свойств обфускации является Оптимизация программы с целью уменьшения размера работающего кода и (если используется некомпилируемый язык) ускорения работы. Написал по-привычке, так как при релизе всегда обфусцирую код (и для уменьшения размера и для других целей).

-1

recompileme Jan 25 2013 at 10:56

красота то какая

shpaker Jan 25 2013 at 15:44

Красиво. Но на моём слабеньком ноутбуке 100% выжрало (

bob_lyashenko Jan 26 2013 at 11:57

хм. на моем «среднем» ноутбуке (intel core 2, 2.2 ГГц) — 1% (это при стартовом количестве объектов).

webkumo Jan 26 2013 at 12:14

я думаю ещё непплохо бы браузер указывать и количество открытых вкладок…
i5 + Опера (~10 вкладок) = 5-6% во время игры

bob_lyashenko Jan 26 2013 at 13:14

chrome 26.0.1386.0 dev-m, и его диспетчер задач показывает сколько тянет какая вкладка.

shpaker Jan 27 2013 at 19:29

Ну что бы не быть голословным приложу ка я скрин ))
Собственно в хроме ещё только одна вкладка с этой страницей и ваш змей. Собственно там где график «снизу» это до открытия игрушки и после закрытия.

Собственно скриншот

PS: Судя по комментариям не повезло только мне ))

Mezomish Jan 25 2013 at 22:56

А можно исходники куда-нибудь в другое место (гитхаб, например)? А то меня на ваш сайт не пускает политика безопасности компании…

Notification codes: (1, MALWARE, phishing, Hosted on IP controlled by a group or individual known to be malicious. Identified as a phishing or spam-related site., BLOCK-MALWARE, Fri, 25 Jan 2013 13:55:15 EST, lyashenko-inc.in.ua/projects/snake_dev_mode/upload.rar)

iCoderXXI Jan 28 2013 at 21:34

Приятная статья. Ждем продолжения.

В качестве хобби, в свободное время, работаю над проектом игровых обучающих онлайн тренажеров для детей, например по таблице умножения или английским словам.

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

Пока вот собираю информацию на предмет игростроя в браузере, а тут весьма кстати Ваша статья. Благодарю. Взял на заметку.

Show the best of all time