Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 04.09.2015, 18:24   #1
Skaner
ПроЭктировщик
 
Аватар для Skaner
 
Регистрация: 30.01.2012
Сообщений: 162
Написано 40 полезных сообщений
(для 86 пользователей)
Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.


В уроке разрабатывается прототип игры - 2D платформера. Может кому пригодится в работе.
__________________
Blitz3D - СИЛА!
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
moka (04.09.2015)
Старый 04.09.2015, 22:14   #2
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Молодец парень.

Но у него ужасный стиль программирования, очень плохой пример показывает.
По сути "как не нужно писать на JS".
(Offline)
 
Ответить с цитированием
Старый 04.09.2015, 23:24   #3
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Сообщение от moka Посмотреть сообщение
Молодец парень.
ТС и есть автор.
Сообщение от moka Посмотреть сообщение
Но у него ужасный стиль программирования, очень плохой пример показывает.
По сути "как не нужно писать на JS"
Вот, кстати, этим js и пугает. Очень терпим к разным подходам. Раскрыл бы тему, кстати.
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
moka (04.09.2015)
Старый 05.09.2015, 00:33   #4
Nikich
Бывалый
 
Регистрация: 22.12.2011
Сообщений: 844
Написано 150 полезных сообщений
(для 275 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Автор, пожалуйста, не используй свой "движок".
Тебе еще очень и очень рано писать что-то подобное и толку в этом никакого нету. Возьми любой годный JS фреймворк и пили уроки по нему: это куда полезнее для сообщества и ты начнешь прокачивать скилл в архитектуре, пока будешь разбираться с фреймворком
(Offline)
 
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо Nikich за это полезное сообщение:
moka (05.09.2015), Nerd (05.09.2015)
Старый 05.09.2015, 00:51   #5
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Сообщение от Nikich Посмотреть сообщение
Автор, пожалуйста, не используй свой "движок"
Объективнее пожалуйста.
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
(Offline)
 
Ответить с цитированием
Старый 05.09.2015, 00:55   #6
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

А еще можно вообще без движка, с использованием canvas2d - так даже лучше.
Серия туториалов, по рендеру уровня, создание камеры, управление персонажем, коллизия.

При этом на ванильном JS с Canvas2D это будет очень полезно и обучающе. Код выкладывай на github'е, и прилагай ссылкой и аннотациями на линии кода в видео, чтобы можно было когда ты говоришь о куске кода, нажав на аннотацию посмотреть исходники этих строк.

Отличное место старта: http://www.html5canvastutorials.com/

По стилю кода, нужно серьезно все пересмотреть.
Начинай от сюда: https://google.github.io/styleguide/javascriptguide.xml
И вот распространенный стиль тоже: https://github.com/playcanvas/engine...ter/CONTRIB.md
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Randomize (05.09.2015)
Старый 05.09.2015, 11:32   #7
Skaner
ПроЭктировщик
 
Аватар для Skaner
 
Регистрация: 30.01.2012
Сообщений: 162
Написано 40 полезных сообщений
(для 86 пользователей)
Сообщение от Nikich Посмотреть сообщение
Автор, пожалуйста, не используй свой "движок"
Этот фреймворк - лишь набор команд для работы с Canvas, разрабатываелся так же в режиме онлайн, так что все подписчики в курсе что это и могут спокойно каждую функцию движка заменить обычным кодом на JS =)

По поводу стиля, разве не каждый пишет так, как ему удобно? Я понимаю про общие стандарты, читабельность и т.д., но по сути это влияет только на внешний вид. Я больше 5 лет работал с С++ в разных его вариациях... JS на него и похож и не похож одновременно, но все же больше не похож.
Стараюсь избавиться от этого стиля)

Тем более J2ds по функционалу сравним с SMFL для C++

Меня вообще за 'use strict' упрекнули, мол, его использование "плохой тон".
__________________
Blitz3D - СИЛА!

Последний раз редактировалось moka, 06.09.2015 в 01:45.
(Offline)
 
Ответить с цитированием
Старый 05.09.2015, 16:47   #8
Nikich
Бывалый
 
Регистрация: 22.12.2011
Сообщений: 844
Написано 150 полезных сообщений
(для 275 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Стиль кода это наименьшая проблема. Полное отсутствие абстракций, паттернов, какое-то сборище глобальных переменных и функций. Уровень архитектуры просто нулевой.
(Offline)
 
Ответить с цитированием
Старый 05.09.2015, 18:05   #9
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Сообщение от moka Посмотреть сообщение
И вот распространенный стиль тоже: https://github.com/playcanvas/engine...ter/CONTRIB.md
Сообщение от Namespace with a class
var namespace = function () {
    var Class = function () {
            var 
_private "private";
            
this.accessor = function () {
                return 
_private;
            };
        }
    };
    Class = 
pc.inherits(Class, Base);

    
pc.extends(Class.prototype, {
        
derivedFn: function () {
        }
    });

    return {
        Class: Class
    };
}(); 
Это что это такое? Чтож такие сложности то?
Чем отличается напрмер extends от inherits?
Нет, такого ООП нам не надо.

Хотя может ты сможешь объяснить почему такая конструкция необходима?
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
(Offline)
 
Ответить с цитированием
Старый 05.09.2015, 20:19   #10
Nikich
Бывалый
 
Регистрация: 22.12.2011
Сообщений: 844
Написано 150 полезных сообщений
(для 275 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Почему такого ООП вам не надо? Лично мне такой код абсолютно понятен и кажется красивым, как, думаю, и другим JS программистам.
Касательно объяснений:
Функция namespace используется для сокрытия класса от глобального скоупа. Функция Class должна быть очевидна. inherits напрямую наследует один класс от другого. extends добавляет в класс новые методы и поля. Это все можно делать руками оперирую прототипами объектов, но через такие хелперы это быстрее и красивее.
В ES6, кстати, добавили синтаксический сахар для классов.
(Offline)
 
Ответить с цитированием
Старый 06.09.2015, 01:54   #11
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Видеоурок создания 2D платформера на HTML5. Вдруг пригодится.

Сообщение от Randomize Посмотреть сообщение
Это что это такое? Чтож такие сложности то?
Чем отличается напрмер extends от inherits?
Нет, такого ООП нам не надо.
Честно сказать, я абсолютно не фанат такого ООП тоже.
inherits - наследует прототип.
extends - расширяет прототип.

Сообщение от Randomize Посмотреть сообщение
Хотя может ты сможешь объяснить почему такая конструкция необходима?
Нужно было пометить выше чтоб на этот как раз кусочек не смотрели.
Я сторонник ванильного prototype. А это "продукт" когда-то выдуманный playcanvas изначальными кодерами. После работы с двигом привык и стало удобно. Но я не рекомендую такой подход, особенно учитывая того что inherits делает на самом деле внутри (создается дополнительный мелкий класс по середине, что очень-очень не хорошо).

Nikich, тоже прав с одной стороны.

Я раньше делал тоже себе хэлперы для наследований и т.п.
Но потом обратно вернулся к ванильному prototype, ибо он мне роднее.
Вот отличное видео и ниже визуализатор, очень-очень помогает понять суть prototype. http://www.objectplayground.com/

Те кто недооценивает важность стиля кода, либо одиночки, либо не работали в командах где разработчики уважают друг-друга.
Также как UX и консистенция в дизайне UI важны. Также и стиль и структура кода важна для воспринятия его другими разработчиками.
Если вы пишите все одним файлом да и в С стиле, то это как минимум выглядит не серьёзно.
В гите такие проекты вообще никем не уважаются, т.к. это читать не удобно, напрягается мозг больше.

Это как на вашем привычном рабочем столе все перемешать, а в любимом IDE поставить не mono-space шрифт Comic Sans.
(Offline)
 
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
Nikich (06.09.2015), Randomize (07.09.2015)
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 12:22.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com