Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ton9q/final-game-mongo

https://game-js-mongo.herokuapp.com/
https://github.com/ton9q/final-game-mongo

audio browser-game canvas css dom eslint express heroku-deployment html javascript jest jquery landing-page mlab-data-api modal-dialog mongoose requestanimationframe rolling-scopes-school server-rendering webpack

Last synced: 17 days ago
JSON representation

https://game-js-mongo.herokuapp.com/

Awesome Lists containing this project

README 

        
| Deadline  | Folder name |

|-----------|-------------|

| 23:59 08.01.2019 | game |



# Game (JavaScript + HTML or Canvas/WebGl/SVG).

## Функциональные требования

Вам необходимо сделать упрощенный клон игры https://www.prodigygame.com/  

Пример геймплея: https://www.youtube.com/watch?v=XXUIRnQ4EJ4  

Целевая аудитория: дети 6-8 лет.



### Минимальная функциональность:

  1) Экран дуэли

  2) Модальный диалог выбора заклинания

  3) Экран задачи

  4) Экран таблицы рекордов

  

### Пример геймплея по шагам:

1. Битва начинается, у игрока и монстра по 100hp или более.

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

3. Игрок переходит к экрану задачи. В случае успешного решения - заклинание применяется, иначе - переход хода к монстру. 

4. Монстр применяет заклинание, наносит урон игроку.

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



### Варианты экрана "задача":

 1) Решение базовых арифметических примеров. В данном случае генерируется случайная пара чисел и случайная операция с ними.  Например, 25 + 67 или 130 - 7, или 7 x 11 и т.д.

 2) Перевод с анлийского на русский. В данном случае игрок видит случайное английское слово (например, "cat") и должен ввести перевод. Правильных переводов может быть несколько (кот, кошка, котик и т.д.) Словарь должен находится в отдельном файле и легко конфигурироваться. Админку управления словарем делать не надо.  

 3) Буквы слова перемешаны, необходимо, используя drag&drop, восстановить порядок. Например, lleyow -> yellow. Пример интерфейса - https://jqueryui.com/sortable/

 4) Аудирование. https://mdn.github.io/web-speech-api/speak-easy-synthesis/ Произносится слово, необходимо его вписать.

 5) Balloon Burst. Геймплей можно посмотереть https://learnenglishkids.britishcouncil.org/en/tricky-words/strong-angry-king развернул вкладку Game 

 5) Любые другие

 

### Монстры:

1) Автогенеренное имя. Имя получается путем слияния элементов из трех массивов. 

   В первом массиве прилагательное - "ужасный", "злобный", "сопливый" и т.д. 

   Во втором - "Огр", "Гном", "Гоблин" и т.д.

   В третьем - "Том", "Макс", "Дима" и т.д.

   В итоге - "Злобный Огр Том"

 2) Автогенеренное тело - "из частей". Вы определяете несколько "голов", "туловищ", "ног", "оружия", из которых собирается итоговый монстр. 

 Пример - https://drive.google.com/open?id=12TYpEwRPKjwkC3Q61aAqmxL8wsbVw6pP

 

 ### Примеры работ студентов прошлого набора

- https://yanaselin.github.io/cyrodiil-ways/

- https://anton-yatskevich.github.io/stickman-warriors-game/dist/

- http://rini.surge.sh/

- https://olegkoleda.github.io/epicgame/

 

## Технические требования:

1) Поддержка Сhrome последней версии. 

2) Язык - JS/ES2015+ или TypeScript

3) Использование любых игровых движков/фреймворков (например, https://phaser.io/) - запрещено. 

   Библиотеки и фреймворки типа react/angular/vue/jquery/bootstrap использовать можно.

4) Финальная версия игры должна быть доступна по ссылке. Самый просто способ - выложить на GitHub pages. (e.g. https://themarkmarrone.github.io/petrovich/, https://spider-shooter.github.io)

5) Landing page. Должна содержать следующую информацию:

   - Название игры

   - Скриншоты геймплея

   - Ссылку для запуска игры

   - Информацию об авторе 

   - Если игру делали два человека - четкое разделение того, кто и что делал. 

 

### Требования к коммитам, PR, репозиторию

https://github.com/rolling-scopes-school/docs/blob/master/stage2-tasks-requirements.md

  

### Требования к качеству кода

- Не использовать вложенные SetTimeout, синхронизацию кода на тайм-аутах и т.д. Использовать промисы/async/await где это возможно.

- Не использовать magic number на именованные константы.

Например, вместо `if (event.keyCode === 32 || event.keyCode === 13) {….}` использовать `if (event.keyCode === KeyboardEvent.SPACE || key === KeyboardEvent.ENTER ) {….}` и т.д.

- Не использовать функции, которые длиннее 40 строк (без учета объявления переменных).

- Минимальное использование тернарных операторов.

- Использовать чистые функции (pure functions), где это возможно. Если раньше не слышали, можно начать знакомство [тут](https://medium.com/@jamesjefferyuk/javascript-what-are-pure-functions-4d4d5392d49c) или [тут](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976) 

- Использовать осмысленные имена переменных. Избегать однобуквенных имен (i,n,j,d и т.д), абстрактных названий (obj, arr, num, item1 и т.д.)



### Cтуктура проекта. Пример организации файлов и папок:

Использование webpack - обязательно! Директории компонентов хранят все необходимые ресурсы и стили. Например, при удалении папки `modal-dialog` будут удалены стили относящееся к данному диалогу. 

    

    dist

    src

    ├── components                

    │   ├── loading

    │   ├── modal-dialog

    │   ├── tasks

    │   │   ├── engToRu

    │   │   │   ├── index.html   # component template

    │   │   │   ├── index.scss   # component related styles

    │   │   │   ├── index.js     # component logic

    │   │   ├── simpleMath

    │   │   │   ├── index.html

    │   │   │   ├── index.scss

    │   │   │   ├── index.js

    ├── screens

    │   ├── home

    │   │   ├── images

    │   │   ├── index.html       # home screen template

    │   │   ├── index.scss       # home screen styles

    │   │   ├── index.js         # home screen logic

    │   ├── login

    │   ├── battle

    │   ├── score

    ├── app.js                   # main entry point.

    webpack.config.js

    README.md

    

Замечания по использованию webpack:

- нет смысла оборачивать код в Immediately-invoked Function Expression.

- нет смысла использовать 'use strict'.



# Процесс сдачи и критерии оценки

### Процесс сдачи: 

 - Финальную оценку и проверку выполняет НЕ ваш ментор. Списки "студент-проверяющий" будут оглашены после дедлайна.

 - У вас будет до 30 минут на презентацию работы

 - Другие студенты могут присутствовать/ задавать вам вопросы.

 - Формат - оффлайн или онлайн в зависимости от локации/возможностей принимающего

 - Отправить ссылку на на Landing Page c игрой в google форму: https://docs.google.com/forms/d/e/1FAIpQLSc3izOitQg5luYM_WqxLG-_CZ5B7JNETSouCMmLFue4ITkRIw/viewform

 



### Критерии оценки:

- Есть Landing page +15 баллов

- Используется Webpack и требуемая структура проекта +15 баллов

- Есть кастомный компонет "модальный диалог", который используется для выбора заклинаний, игровых настроек и т.д. +5 баллов

- Есть несколько видов заклинаний (два и более) и их анимация с аудио эффектом +15 баллов.

- Есть автогенерация монстров (имя и тело) + 15 баллов

- Есть экран задачи +15 баллов. За второй еще +15. За третий еще + 10. За последующие +5 баллов. Задачи не из списка *Варианты экрана "задача"* оцениваются в 5 баллов максимум. Всего в игре может быть максимум 15 видов задач. Итого: максимальная оценка за этот пункт - 100 баллов. 

- Есть экран "таблица рекордов" +10 баллов 

- Возможность играть используя только клавиатуру (без мышки/тачпада/курсора и т.д.) +25 баллов

- Есть разумное количество юнит тестов: +25 баллов

- Сохранение таблицы рекордов реализовано с использованием node.js/express/mongodb +35 баллов 

- Нарушение общих требований к выполнению тасков в RSSchool stage#2, качеству кода: -50 баллов и более по усмотрению принимающего ментора



#### Useful links:

1) https://habrahabr.ru/post/184666/  

2) http://opengameart.org/

3) http://robinbobin.livejournal.com/4066704.html

4) https://cdn.scratch.mit.edu/scratchr2/static/__787158ad1362201586979068ba002765__/help/ru/howto/fly-intro.html

5) https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript



### Видео разбор от одного из студентов RSSchool 2018Q1

- https://www.youtube.com/watch?v=R_iSXbgNWc8&feature=youtu.be

- https://www.youtube.com/watch?v=1_phuaJ5ZNM&feature=youtu.be



### Материалы лекции от @davojta c разбором часто встречающихся ошибок при выполнении данного задания

- https://github.com/rolling-scopes-school/lectures/blob/master/lectures/refactoring.md