mirror of https://github.com/01-edu/public.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.7 KiB
38 lines
1.7 KiB
4 years ago
|
## history
|
||
|
|
|
||
|
|
### 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 creation of a **story mode**, a version of a computer game in which the player controls a character in a story.
|
||
|
|
|
||
|
|
Take for instance **Super Mario** where the main character is the player and you must save the princess and during the game play there is a story being told.
|
||
|
|
Even [Brick Breaker/ Arkanoid](https://en.wikipedia.org/wiki/Arkanoid) can be done with a story mode.
|
||
|
|
|
||
|
|
### Instructions
|
||
|
|
|
||
|
|
A story must have some kind of logic, you must not simply write something on a board and its done, no!
|
||
|
|
|
||
|
|
It must have:
|
||
|
|
|
||
|
|
- an introduction, the context and beginning of the story (should be shown before starting playing)
|
||
|
|
- a development, the story reaches a middle (should be shown when you hit a specific score while playing)
|
||
|
|
- a conclusion, the end of the story (should be shown when the game ends, either you lose or win)
|
||
|
|
|
||
|
|
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)
|