[ИГРЫ] Сказки Лиса и остальной - GameDev

[Пелюлькин]

[Я Соня]

Пелюлькин,
Спасибо Рома!

[Соня (Bruja)]

Шаблон портфолио веб-разработчика. version 1.0
Проект для портфолио на  Codecademy

HTML CSS SASS JS

Страница содержит 4 раздела:

Стартовая страница (домашняя страница)

Обо мне (динамический индикатор выполнения)

Портфолио (изображения со ссылками на фиктивные действующие проекты)

Контакты (веб-форма и ссылки на социальные сети)

Индикатор выполнения (статус бар прогресса на странице About Me) - обновляется каждый раз при перезагрузке веб-страницы. Он имитирует случайный процент прогресса от 70 до 100. Эта симуляция отображается зелеными полосами на индикаторе выполнения.
Для этого использовала Javascript. А так же для "липкой" панели навигации по сайту.


Поиграться и покрутить кнопочки - можно тут, на "живой версии" веб проекта
https://mtapirina.github.io/portfolio_template_1/

Репозиторий с файлами и кодами проекта посмотреть или скачать можно тут
https://github.com/mtapirina/portfolio_template_1

[Соня (Bruja)]

И еще один мини-проект, за компанию

#Mixed_Messages – Синтаксис JS.

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

Это мини-проект на Node.js, работает только в терминале( в консоли).
А веб вариант - или то, как это можно применять практически в создании веб страниц - я показывала выше в этой теме.


репозиторий проекта
https://github.com/mtapirina/my_quote_generator

А это похожий проект, на веб странице,  я показывала его выше в этой теме
веб страница - https://mtapirina.github.io/Quote-Generator/

[Соня (Bruja)]

Ну и заодно я парикончила курс по SASS.
Проскакали по нему галопом, не сильно вдаваясь в детали, на мой взгляд. Хотя вещь довольно удобная.
Это сопроцессор для более гибкой и удобной работы со стилями, вы пишите в нем, а он автоматом компилирует в CSS style стиль для вашей веб страницы. Удобное использование переменных, и целых отдельных классов, которых нет физически на вашей странице HTML , но которые существуют виртуально, и позже автоматом компилируются с файл стиля, вам даже заморачиваться об этом не надо.
Переменные и классы (миксины и заполнители)- спасают от множественных повторений и дублирования кода, которое неизбежно в CSS.
И хотя не сказать чтоб нас натаскали на все 100%, каждый может использовать именно те опции которые удобны лично ему.
Например какие то булевы операции или даже циклы! - я считаю исполнять в стилях - вычурностями. Ну максимум транзиты или анимацию .
А для более сложных вычислений по имху - удобнее Javascript.
Но думаю кому то лень учить ее, вот они и вымудряют нечто похожее.
Мне показалось - слишком громоздко делать вычисления в описании  стиля - по сути в раскраске.
Она не предназначена для этого.

В конечный вариант проекта - насколько я поняла - папка и файлы SCSS (SASS)- не вкладываются, если конечно вы не намерены позже редактировать проект.
А вот редактировать без этих файлов проект довольно сложно.
Но проект Портфолио например - который является только шаблоном - я редактировать не собираюсь. Так что файлов лишних не загружала.
Оставила чистый CSS стиль, который после компиляции даже читать трудно, не то что там что то править ...

Так что еще один сертификат в кармане.
Сама не знаю на кой они мне.. Ну для коллекции разве что.

Вообще меня нельзя к кодакадемии подпускать.. У меня на нее одержимость развивается быстро..
Даже не знаю, увлечение КК и прочей эзотерикой на это время отходит на какой то очень задний план..
Писать код, это как писать музыку.. Или рисовать.. Тоже своего рода медитация..
Отключаюсь от всего..

[Соня (Bruja)]

Сейчас у меня передышка.
 Собираю коллекцию анимированных на CSS кнопок для веб сайтов.
И учусь делать те виды анимации, что мне пока не знакомы.
Запомнить все варианты извращения с кодом невозможно, поэтому соберу их себе в одну веб страницу, типа шпаргалки. Чтоб не вымудрять каждый раз с самого начала (легче чуть изменить под новые задачи, чем каждый раз изнова писать всю анимацию).

Пока только фотки для примера.

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

на скринах - кнопки в обычном состоянии и при наведении мышки (после анимации)


1- 2д плоский градиент



2- 3д градиент - кнопка поворачивается и по ней пробегает блеск, словно она стеклянная
(похожа на пуговицу на пальто моей бабушки!)




3- 3д эффект - плоский цветной квадрат-иконка - открывается как книжка, при наведении мышки




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





ЗЫ--цвета можно изменять на ЛЮБЫЕ.
Тут - главное сами эффекты.
Каждому варианту кнопок можно менять и цвет, и скорость анимации и направление, в какую сторону и на сколько градусов поворачивается или кружится..

[Соня (Bruja)]

Клон очень известной игры - Flappy Bird, выполнена игра с помощью Javascript и движка Phaser 3 .
Картинки (спрайты) - самые простенькие.
файлы в репозитории:  https://github.com/mtapirina/flappy_bird_clone

Живая страница, где можно поиграть в игру: https://mtapirina.github.io/flappy_bird_clone/

Моя задача состояла в:

Повторении механики игры.
Управление полетом Птицы: клик мышкой на окне игры или нажатие клавиши Пробел на клавиатуре.
Создании меню с несколькими выборами и с возможностью полностью убрать окно игры со страницы. Кнопка "Exit" в Меню игры.
Сохранение наилучшего результата игры.
Показ лучшего счета на странице игры, рядом со счетом нынешним, и на отдельной странице.
Пауза в игре: создание кнопки, которая временно останавливает игру и изменяет свой внешний вид (картинку), с "пауза" на "рестарт".

Повышение сложности по мере прохождения игры:
Игра начинается на режиме сложности "легко".
При счете равном 10 игра переходит в режим "нормально".
После счета равного 20 игра переходит в режим "тяжело".
Сложность выражается в более близком расстоянии между трубами и более узким проходом между верхней и нижней трубой.

Стартовая страница и МЕНЮ:



Игра:



Страница с Лучшим результатом:

[Соня (Bruja)]

Тема идет на ДЛ.
Тут только буду обновлять ссылки, когда будут изменения.


...Сейчас, пока у меня передышка от академии кода ( Codecademy.com ), решила закрепить и вообще повторить то, чему училась на курсе по Phaser3.
Сейчас уже вышла 4я версия игрового движка, внесены какие то изменения, но я пока не собираюсь лезть в эти дебри, мне и 3.55 вполне хватает под мои задачи.

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

кадр из разработки на Юнити:



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

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



...
Там еще полно багов и лагают текстуры (посмотрю как их потом натянуть получше, чтоб не было прорех между кубиками),
но потестить можно тут
https://tapirina.com/%5BLIS-Game%5D-5-detectPlatforms/index.html

управление - стрелки и пробел.
стрелка вверх и пробел прыжок.

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


Линия "Здоровья"-- остается позади "Врага", когда пробегаю мимо него.
Нужно вывести ее (HealthBar)- на передний план.

[Соня (Bruja)]

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

Поправила тайлы, карта больше не рассыпается на кубики и не глитчит.

https://tapirina.com/%5BLIS-Game%5D-5-detectPlatforms/index.html

Для этого использовала малюсенькую программку,Frame Extruder,  которую нашла на  Гит Хабе,
спасибо автору

[Соня (Bruja)]

Теперь это  не Лис, а   Фаерфокс!

Обновила папку. Подробности тут


https://tapirina.com/%5BLIS-Game%5D-5-detectPlatforms/index.html

управление = стрелки  влево и вправо.
стрелка вверх и пробел = прыжок.
Q - Фаербол, не Лис, а Фаерфокс!
E - близкая атака. Думаю Лис так (злостно) кусается .

PS

Смертей пока нет, так что дала и врагам кучу жизней, для равновесия.
Они больше - мешаются на пути, отталкивая.
Если врага все таки убить, то он покраснеет и упадет со сцены.
.

[Соня (Bruja)]

http://postnagualism.com/Bruja/index.php?topic=77580.msg327761#msg327761

а фаерболами скока нада папасть?))..

В том ( старом )варианте они там все практически бессмертные. Мне нужно было отработать их взаимодействия. И если б Лис помирал, ну или враги, то мне не удобно было бы тестить как летят фаерболы, передается ли урон при попадании...

Это обновление
https://tapirina.com/%5BLIS-Game%5D-6-more_Scenes/index.html
(старая ссылка тоже работает, оставила для сравнениния)

Здесь - тренировалась, создала  другой уровень, и загрузила Лиса в него.



Жизнь Лиса = 100%
У стреляющей сосульками змеи - 90% (такой микро-босс)= 9 раз ударить.
Клювастый чувак имеет 50% = 5 фаерболов
Фаербол Лиса, укус (близкая атака Лиса) отнимают у врага - 10%.
Все атаки врагов (телом толкают или сосулькой кидают)-тоже отнимают у Лиса 10%.

Стрелка вниз - и Лис садится (прячется, область попадания при этом становится ниже, фаербол летит мимо).

Теперь он так же умеет собирать брилианты, наверху есть счет.
Просто для теста - 10 брюликов дают 1 вишенку. Вишни задумывались как лечилки. Ну чтоб 1 вишня восполнила треть жизни например.. или 10%..
Но лечить Лиса у меня никак пока  не получается.  

Теперь в игре при гибели персонажа  - уровень перезагружается, камера белеет, немного трясется, сам Лис краснеет.

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

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


ЗЫ
Уровень уж оччень яркий, по личному мнению - просто "вырви глаз".
Но, бесплатным картинкам в зубы не смотрят. Это рисовал все тот же создатель Лиса.

[Соня (Bruja)]

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

Сделала выход с уровня рабочим.
Создала меню.
На игровой экран добавлена кнопка - выхода в меню
Пока открыт только один уровень
Онлайн игру пока не обновляла.



Подробнее:
http://postnagualism.com/Bruja/index.php?topic=77580.msg327782#msg327782

[Соня (Bruja)]

Заканчиваю делать систему Меню.
Страничка с благодарностями!

Благодарность форуму ПН конечно и отдельно Пипе и Лису. За вдохновение.
Пипе, за то что именно она привлекла мое внимание к джаваскрипт и программированию.
Лису- просто за то что он такой, как есть.. Ну и герой игры - это Лис и есть
(пока чего то своего не нарисую)
Ну и всеми остальным.. Автору сета картинок, создателям библиотеки - движка игры на джаваскрипт,
курсам, которые я проходила...
Муж не поместился, но и ему спасибо, за терпение


.. высказала лично, посмеялись ...


Теперь остались детали..
Сначала - звуки, музыка на фоне и эффекты.

Потом:
Создать несколько уровней, которые будут открываться постепенно, по мере прохождения (система под автоматизацию процесса уже создана).
Доработать и разнообразить врагов.

[Соня (Bruja)]

Добавила звук - фоновую музыку, разную для разных сцен. В сценах ее можно отключить нажав на соответствующую нопку.
Добавила звуки эффектов - прыхок, фаерболы, урон игроку и тому подобное.
Эти звуки к сожалению отключить не получится. Играющему придется просто заткнуть голос у страницы веб ( на вкладке открытого окна, наверху).

Обновила папку.

https://tapirina.com/%5BLIS-Game%5D-7/index.html

Все, не буду ничего менять. Музон есть, эффекты есть, переходы между сценами есть...

КОНЕЦ.
https://mtapirina.itch.io/foxy-game

Лучше новое что то попробую собрать.. У меня там белка есть еще прыгучая..

[Соня (Bruja)]

Pepa Coneja

Зайка Пепа

дневник тут и  тех подробности.

(решаю траблы с лестницами.. это пока не игра,
это только  тест.  )

А если мне удастся научить Зайку цепляться за лестницу в полете (прыжке) - то было бы идеально..

Но пока в прыжке  - она только поворачивается к ней, и даже пытается уцепиться, но пролетает мимо, снова отвернувшись в ту сторону в которую летит.

УРРА!
Научила ее цепляться за лестницы в прыжке и зависать на них.
И научила спускаться по лестнице вниз, а не съезжать вниз по умолчанию. Только при нажатой клавише "вниз".
Уже прогресс! Стоило только пожаловаться публично на форуме, как идея пришла!

Но Зайка не прекращает анимацию движения (пока она касается лестницы, или стоит наверху (касаясь лестницы ногами)
И когда она на вершине лестница стоит, то продолжает делать вид, что карабкается вверх.
С анимацией надо придумать что то.

ссылку на тест  обновила,

https://tapirina.com/GAMES/PEPA_CONEJA/%5BGame-2%5D-escalera-3-tileCollider/index.html