07.08.2015 17:40
Skaner 29 15114 Источник
Много стали просить начать рыть в сторону HTML5 онлайн игр (не иначе, влияние Agar.айоу). Записал немного видео о том, как можно фантазировать в направлении создания браузерных игр.

Пока уроков немного, процесс идет.

DEMO игра: J2ds Demo Game
Запускается на ПК и моб. устройствах.

Установка LAMP в Linux для организации локального сервера. [для виды сойдет и денвер или OpenServer]:



Работа с сервером. Очень нубское решение…



Организация 2D движка для отрисовки объектов.



Расширение 2D движка, внедрение AJAX и PHP.



Все это — лишь начало, и, наверняка, 100% этого будет в дальнейшем изменено, это начало разработки ПРОТОТИПОВ, а не направление пути развития, так что не стоит принимать все близко к сердцу, но, может мои потуги кому-то окажутся полезными.

Комментарии (29)


  1. gwer
    07.08.2015 22:14
    #8529267
    +4

    Крайне специфичный подход, и настолько же опасный для изучения новичками материал. Например, в качестве ассоциативного массива в JS используются обычные объекты (в общем случае). Создавать экземпляр Array (objs = []) вовсе ни к чему. Это только внесет путаницу в понимание разницы между ассоциативными массивами и массивами обычными (с числовыми индексами).


    1. Temirkhan
      08.08.2015 12:12
      #8529565

      Я всегда думал, что ассоциативных массивов в яваскрипте нет — только объекты.


      1. gwer
        08.08.2015 12:33
        #8529571
        +3

        А что в словах «в качестве ассоциативного массива в JS используются обычные объекты» противоречит вашему утверждению? Их там и нет. Возможно, я не совсем однозначно сформулировал последнее предложение, но если не вырывать его из контекста, разночтений быть не должно.


    1. Keyten
      08.08.2015 22:54
      #8529773

      var object = new Boolean(true);
object['prop'] = 'val';


      1. gwer
        08.08.2015 23:01
        #8529777
        +1

        1. Я был слеп. Вы открыли мне глаза.
        2. Надеюсь, мне не придется работать с вашим кодом.
        3. Разве я говорил, что это не работает? Такие пируэты просто «вовсе ни к чему», так как вводят в заблуждение новичков, пытающихся научиться по подобным материалам, и запутывают людей, читающих код. Такой код будет работать, но он неочевидный и непредсказуемый. Да, резиновые костыли всегда можно назвать гибким решением, но зачем?


        1. Keyten
          09.08.2015 02:30
          #8529837
          +2

          Это была шутка вообще-то. Надо было добавить «Нужно было так», а то в самом деле не совсем понятно.


        1. vitvad
          13.08.2015 05:40
          #8533957

          резиновые костыли всегда можно назвать гибким решением

          забрал себе в цытаты великих :D
          2 минуты уже ржу…


      1. TheShock
        09.08.2015 01:27
        #8529821
        +2

        Можно ещё так, тоже ничо:

        var object = document.createElement('div');
object.prop = 'val';

console.log(object.prop)


        Оно даже итерироваться корректно будет:
        for (var i in object) if (object.hasOwnProperty(i)) {
  console.log(i)
}


        1. Keyten
          09.08.2015 02:30
          #8529839

          А такое вне DOM работать не будет).


          1. TheShock
            09.08.2015 14:40
            #8529951

            Ну почему? Специально для такого мегаопупенного интерфейса можна создать document, у которого может быть метод createElement


  1. SerafimArts
    09.08.2015 21:32
    #8530151

    Одно «НО» (оно хоть и не одно, но по крайней мере самое критичное). Никогда и не при каких случаях не переносите открывающую скобку "{" в JS на новую строку. Это не только противоречит каким-либо правилам (скорее гайдлайнам) JS но и несёт чисто практичный характер.

    Строка:

    return {a: 42}
    и 
    return 
{
    a: 42
}

    будут возвращать совершенно разный результат. Объяснять почему «так», а не «иначе» надо?


    1. SerafimArts
      09.08.2015 21:37
      #8530153

      Хотя ещё критично было показывать «смешивание» php и js. Ничего не стоило показать php оператор (именно оператор, т.к. это не функция) require. Как говорится — сразу хорошему учить.

      Ну и промолчу про то, что устанавливать для уроков ничего, кроме php не нужно было, благо и сервер в пыхе «из коробки» уже 100 лет как, так и sqlite от mysql на простеньких запросах вообще ничем не отличается. А времени разъяснений это сэкономило бы кучу.


    1. PretorDH
      10.08.2015 23:43
      #8531521

      Вы совершенно не правы:

      (function(){a=
{
a:42
};
return a
})()

      Вернет {a:42}.

      Нельзя переносить после return. Строчка с return с/без ";" считается завершенной. А простое выражение можно разорвать практически в любом месте.

      (function(){return a
=
2
})()

      Вернет 2, ибо разрыв внутри выражения.


      1. SerafimArts
        11.08.2015 08:46
        #8531695

        Вы совершенно не правы:

        Предлагаю проверить и увидеть, что в моём примере во втором случае возвращается undefined


        1. PretorDH
          11.08.2015 10:33
          #8531785

          В примере?

          Return вне функции вызывает ошибку (SyntaxError: Illegal return statement). Ваш пример никуда никого не зовет.
          Мой пример показывает, что в переменную спокойно заносится выражение заданое в фигурной дужке с новой строчки.

          Вот этот пример вернет undefined. 

          (function(){
return
{
a:42
};
})()

          Но это происходит потому, что строчка с return автоматически завершается.
          А не потому, что
          "… не переносите открывающую скобку "{" в JS на новую строку. "

          И замена понимания сути правилами, ни к чему хорошему не ведет.
          Разрыв предиката приводит к созданию двух предикатов — вот это суть.


          1. SerafimArts
            11.08.2015 22:43
            #8532523

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

            В любом случае кодстайл от гугла или яндекса, да и вообще общепринятой практикой JS считается, что стоит оставлять фигурные скобки на той же строке. Это же не PHP с PSR, или сишки\шарпы с кодстайлом VS, а другой язык.


    1. stepanp
      11.08.2015 00:04
      #8531545

      А потом еще говорят что JS нормальный язык


      1. gwer
        11.08.2015 02:11
        #8531607

        Они просто не умеют его готовить.


      1. stalkerg
        17.08.2015 17:30
        #8539657

        ИМХО мало кто так говорит, но это совершенно не значит, что на нём нельзя хорошо писать. :)


  1. pomor
    10.08.2015 14:33
    #8530889

    1. в JS объекты используются в качестве ассоциативных массивов.
    2. объявляя переменную массивом, а затем используя ее как объект вы «взрываете мозг» начинающим изучать этот язык. «var obj = {};» вам в помощь.

    Ну а если не вдаваться в подробности, то некоторые вещи были интересны.


  1. Lexx918
    10.08.2015 16:43
    #8531071

    Анимация на интервалах? Не круто. И велосипед уже есть готовый:
    javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript#timeout-interval


    1. Skaner Автор
      10.08.2015 16:53
      #8531091

      Это ведь начало, т.к. это цикл уроков, то и развитие будет соответствующее, с низов/азов до нормальной реализации.
      По поводу obj= {} и obj= [], я разницу понимаю, про объекты и про хеши. Похже это тоже будет объяснено. Но позже, когда дойдем до реализации работы с объектами.


    1. SerafimArts
      10.08.2015 20:06
      #8531347
      +1

      Анимация на таймаутах не лучше. Для кого придумал request keyframe метод? ;)

      Пример шива (отката) для этого метода из моего старого игрового движка: github.com/SerafimArts/Raid.old/blob/master/Raid/Support/stdlib/AnimationFrame.coffee


  1. Skaner Автор
    10.08.2015 19:54
    #8531333

    Интересно, кому я так не угодил, что мне за несколько часов карму в минус слили?


    1. SerafimArts
      10.08.2015 20:09
      #8531351

      Дело доброе делаете, согласен, но перед тем, как что-то передавать начинающим стоит вначале научиться пользоваться этим инструментом. Многие вещи сделаны так, как не стоит делать, некоторые можно было значительно упростить и сделать удобнее ну и т.д. Скорее всего отсюда и минусы.


      1. Skaner Автор
        10.08.2015 20:27
        #8531365

        Это цикл видео) Я начал с этого, ибо это очевидные вещи, с которых многие и начинают. В последующих уроках, кои уже вышли в некотором количестве, объясняется, почему те или иные вещи использовать не следует, и и отчего их нужно переделать. И так во всем, на это и спрос. Дак и не было кармы такой, не может же быть, что случайно вот так разом опустили. Ладно, ясно. До свидания =)


        1. SerafimArts
          10.08.2015 21:09
          #8531393

          Тут, думаю нужно учесть следующее:
          «Ученикам» не следует говорить, что так делать нельзя, просто потому, что у них нет альтернатив и знаний о том как делать можно.

          И второе — т.к. рассчитано на совсем юное поколение — надо давать всю нужную информацию в самом начале, и уже потом по возможности разжёвывать (моей любимой книгой давным давно был справочник Герберта Шилдта, именно по этой причине). Можно вспомнить про большое шило в юном возрасте и понять почему так, а не иначе. Т.е. можно смело опускать лишние детали, оставляя самую суть и уже потом детализировать, при этом сразу же показывать хороший (по мере возможности) пример.


  1. Skaner Автор
    10.08.2015 20:33
    #8531371

    Я же не зря, наверное, в видео говорю, что позже мы отойдем от тех или иных решений, и предупреждаю, что так делать нельзя…


    1. Smile42RU
      11.08.2015 00:27
      #8531565

      Простая аналогия — в детстве всем нам говорят что так делать нельзя, беря за руку и перебегая дорогу посреди улицы. И как оно? Воспиталось что так нельзя делать?