From c3a672ce2e09aec28f6a819ae8a29a74ca2d4c10 Mon Sep 17 00:00:00 2001 From: lee Date: Sat, 27 Jun 2020 14:46:51 +0100 Subject: [PATCH] optional project: score-board subjec and audit --- subjects/make-your-game/score/README.md | 37 ++++++++++++++++++ subjects/make-your-game/score/audit.md | 51 +++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 subjects/make-your-game/score/README.md create mode 100644 subjects/make-your-game/score/audit.md diff --git a/subjects/make-your-game/score/README.md b/subjects/make-your-game/score/README.md new file mode 100644 index 000000000..82c1527a9 --- /dev/null +++ b/subjects/make-your-game/score/README.md @@ -0,0 +1,37 @@ +## score-board + +### Objectives + +You must follow the same [principles](https://public.01-edu.org/subjects/make-your-game/README.md) as the first subject. + +For this project you must take into account the usage of score boards. + +The score board must present the following tasks: + +- **Countdown clock**: That will indicate the amount of time the player has until the game ends +- **score**: This will keep a score count of the amount of XP/points that the player got while playing +- **life**: That indicates the amount of life that is rest + +### Instructions + +Just like the first subject you must respect performance. + +All of this tasks can cause some issues with performance if not done properly, causing repaiting. The better way to avoid it is by using opacity. + +This project will help you learn about: + +- [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) +- [Event loop](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/EventLoop) +- FPS +- DOM +- [Jank/stutter animation](https://murtada.nl/blog/going-jank-free-achieving-60-fps-smooth-websites) +- [Transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)/ [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) +- Tasks + - JavaScript + - Styles + - Layout + - Painting + - Compositing +- Developer Tools + - [Firefox](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) + - [Chrome](https://developers.google.com/web/tools/chrome-devtools) diff --git a/subjects/make-your-game/score/audit.md b/subjects/make-your-game/score/audit.md new file mode 100644 index 000000000..a3820ec1c --- /dev/null +++ b/subjects/make-your-game/score/audit.md @@ -0,0 +1,51 @@ +#### Functional + +###### Does animation run using `RequestAnimationFrame`? + +###### Does the game avoid the use of frameworks? + +##### Try playing the game + +###### Does the game runs without crashing? + +##### Try playing the game + +###### Does the countDown seems to work? + +##### Try playing the game + +###### Does the countDown reaches the end? And if so, does the game end? + +##### Try playing the game + +###### Does the score seems to work like it should, by increasing at a certain action done by the player? + +##### Try playing the game + +###### Does the player life seems to work like it should, by decreasing the life of the player? + +##### Try using the Dev Tool/Performance + +###### Does it not present frame trop? + +##### Try using the Dev Tool/Performance + +###### Does the game run at 60fps + +##### Try using the Dev Tool/performance and the option rendering with the paint ON, if possible + +###### Is the paint being used as less as possible? + +##### Try using the Dev Tool/performance and the option rendering with the layer ON, if possible + +###### Is the layers being used as less as possible? + +###### Are the creation of the [layers being promoted](https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count) properly? + +#### Bonus + +###### +Does the project runs quickly and effectively? (Favoring recursive, no unnecessary data requests, etc) + +###### +Does the code obey the [good practices](https://public.01-edu.org/subjects/good-practices/README.md)? + +###### +Is the code using asynchronicity to increase performance?