{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":14,"style":"BOLD"}],"text":"Почему именно Java Script(JS)? ","type":"unstyled","key":"eicv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написать программу можно в блокноте и запустить тут же в браузере - не надо устанавливать никаких пакетов для разработки и язык программирования достаточно простой, и позволяет сделать как простые так и сложные программы, сайты. Можно запустить на любом браузере, у кого угодно как на компьютере, так и на телефоне. Можно сделать интерактивную открытку, игру, программу для себя за час. Можно делать и более серьёзные вещи.","type":"unstyled","key":"d4un3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Напишем игру, но пока без игрока - в игре некий NPC будет просто сам по себе двигаться по игровому полю.","type":"unstyled","key":"18uqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для демонстрации возможностей, пользуясь самыми простыми средствами - блокнот, paint, любой браузер(IE, google chrome). ","type":"unstyled","key":"35kor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Из чего будет состоять программа т.е. план:","type":"unstyled","key":"f82gn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1) Несколько строк html кода, которые просто показывают браузеру, что это JS - просто скопировать строки - они стандартные;","type":"unstyled","key":"cr3le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2) Вывод картинки игрового поля;","type":"unstyled","key":"6h12s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3) Команда указывающая браузеру создать таймер - запускать много раз в секунду одну процедуру;","type":"unstyled","key":"bto8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4) Вывод, отображение NPC на игровом поле.","type":"unstyled","key":"1pluh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5) Процедура, в которой NPC и решает куда ему двигаться;","type":"unstyled","key":"6kcr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f8ihb"},{"data":{"image":{"id":"642fd4dbffc02602f464490e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5djjg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"drie4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начинаем...","type":"header-three","key":"8t3u2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаём файл с расширением htm. Например \"Наша игра.htm\". Можно разными способами. Например создать текстовый файл на рабочем столе, открыть его в блокноте и сохранить под именем \"Наша игра.htm\".","type":"unstyled","key":"e64ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копирует в блокнот строки для пункта (1) плана - это простая структура пустой html странички. Можно сохранить и двойным щелчком мыши на файле открыть файл в браузере - будет просто пустая страница. ","type":"unstyled","key":"f1pu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n\t\n\t\t\n\t\t\n\t\n\t\n\t\n","type":"unstyled","key":"3fps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пункт 2 плана. ","type":"header-three","key":"4pm3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надо добавить изображение игрового поля на эту страницу. ","type":"unstyled","key":"du0ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас будет очень простая игра и очень простое поле - рисуем его в графическом редакторе - можно просто в paint.","type":"unstyled","key":"bghpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Надо сразу определиться с размерами изображения чтобы потом учитывать это в игре. Открываем paint и создаём рисунок с размерами 600 на 600 - в paint размеры можно задать по пункту меню \"свойства\".","type":"unstyled","key":"c96lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я нарисовал так - картинку с кирпичами нашёл в интернет и вырезал квадрат внутри так чтобы. ","type":"unstyled","key":"ff0dm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Толщина кирпичей должна быть везде по 30 пикселей. Потом этот размер я буду использовать в программе чтобы не заходить за границы.","type":"unstyled","key":"cuhi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как выглядит моя картинка:","type":"unstyled","key":"c7utc"},{"data":{"image":{"id":"642e7158d14c85506d37ad63"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dprjs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Картинку сохранил как \"map1.jpg\" в ту же папку где сохранён файл с игрой","type":"unstyled","key":"9ug36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь в секцию body добавляю тег для отображения картинки \"

\". ","type":"unstyled","key":"fmqgc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Программа в блокноте выглядит так:","type":"unstyled","key":"fh32r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":68,"offset":94,"style":"BOLD"}],"text":"\n\t\n\t\t\n\t\t\n\t\n\t\n\t

\n\t\n","type":"unstyled","key":"5c5n4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если запустить программу в браузере, то отобразится картинка","type":"unstyled","key":"slv8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пункт (3) плана","type":"header-three","key":"40un5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В секции SCRIPT добавляем пока пустую процедуру","type":"unstyled","key":"e00nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":46,"style":"BOLD"}],"text":"В тег BODY добавляем команду создания таймера setInterval('GoNPC()',10). Запускать процедуру GoNPC() постоянно каждые 10 мс. ","type":"unstyled","key":"a0l7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"94jvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":66,"style":"BOLD"},{"length":35,"offset":116,"style":"BOLD"}],"text":"\n\t\n\t\t\n\t\t\n\t\n\t\n\t

\n\t\n","type":"unstyled","key":"d308q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Пункт (4) плана","type":"unstyled","key":"9jf8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В paint рисуем картинку NPC с размерами 30 на 30","type":"unstyled","key":"7kcub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фон у картинки надо сделать, или прозрачным, или таким же как на игровом поле. Прозрачный фон можно сделать в paint.net. Я нарисовал шар на таком же песочном фоне как и у игрового поля.","type":"unstyled","key":"j59n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем теперь тег для изображения нашего NPC","type":"unstyled","key":"eco5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":80,"offset":163,"style":"BOLD"}],"text":"\n\t\n\t\t\n\t\t\n\t\n\t\n\t

\n\t

\n\t\n","type":"unstyled","key":"6sh2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как выглядит страница после запуска","type":"unstyled","key":"9mij4"},{"data":{"image":{"id":"642e7c828b3087467e5712f3"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1cqrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"\"id=npc1\" - для того чтобы позже обращаться к этой картинке из программы","type":"unstyled","key":"ar8q7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пункт (5) плана","type":"header-three","key":"7srem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":10,"style":"BOLD"}],"text":"В функции GoNPC() описывается поведение нашего NPC - как ему реагировать и что делать. ","type":"unstyled","key":"9btsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смысл данной процедуры чтобы NPC двигался сам по себе и не заходил за границы поля","type":"unstyled","key":"7nunh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":26,"style":"BOLD"},{"length":9,"offset":106,"style":"BOLD"},{"length":15,"offset":201,"style":"BOLD"}],"text":"1. Определяем переменные \"var x = 30, y = 30, decision = 0, decisionTime = 0;\". x и y это координаты NPC. decision - это номер принятого решения от 0 до 8. Если решение 0, то NPC идёт в лево и в верх. decisionTime - это время(во сколько) когда можно принять следующее решение в секундах","type":"unstyled","key":"achid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. В процедуре GoNPC() определяем выбор решения куда идти NPC и решение хранится 3 секунды. ","type":"unstyled","key":"3qtgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":78,"style":"BOLD"}],"text":"3. В процедуре GoNPC() определяем выбор направления движения в зависимости от decision. Меняем координаты x и y","type":"unstyled","key":"b3g9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Надо предотвратить заход NPC за границы поля. Если координаты больше, или меньше границ поля, то меняем их на границы","type":"unstyled","key":"4pbqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":93,"style":"BOLD"}],"text":"5. Устанавливаем координаты x и y объекту html - нашей картинке - чтобы менялось изображение style.left = x и style.top = y","type":"unstyled","key":"f7qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В результате должно получится так - шарик плавно перемещается, то в одну сторону, то в другую по игровому полю, и не заходя за границы.","type":"unstyled","key":"8i4jk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поведение NPC можно определять как угодно по своему - хоть по кругу пусть летает. ","type":"unstyled","key":"9dg3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":66,"style":"BOLD"},{"length":1063,"offset":145,"style":"BOLD"}],"text":"\n\t\n\t\t\n\t\t\n\t\n\t\n\t

\n\t

\n\t\n","type":"unstyled","key":"cd9qh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9rg06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если будут заинтересованные в материале, подписавшиеся и лайки, то сделаю следующую часть - продолжение.","type":"unstyled","key":"csii5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"12dcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aod6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"5M26F4lHrwNy1qjcEReZ"}],"entityMap":{}},"mentions":[]}