mirror of https://github.com/01-edu/public.git
LEEDASILVA
4 years ago
committed by
GitHub
10 changed files with 156 additions and 8 deletions
@ -0,0 +1,79 @@ |
|||||||
|
## bomberman-dom |
||||||
|
|
||||||
|
You certainly know [bomberman](https://en.wikipedia.org/wiki/Bomberman) right? Good good. You will make it. Relax, is not that hard, it is only a multiplayer version of it. Ah and forgot to mention that you will need to do it using the framework you created a while ago. Let me explain. |
||||||
|
|
||||||
|
### Objectives |
||||||
|
|
||||||
|
For this project you have to create a bomberman alike game, where multiple players can join in and battle until one of them is the last man standing. |
||||||
|
|
||||||
|
### Instructions |
||||||
|
|
||||||
|
In the beginning there was 4 players, and only one came out alive. Each player will have to start in the different corners of the map and only one will be victorious. |
||||||
|
|
||||||
|
You will have to follow more a less the same principles has the [make-your-game](https://public.01-edu.org/subjects/make-your-game/) project. But we will refresh one of the concepts you will have to respect and deal with: |
||||||
|
|
||||||
|
- [**Performance**](https://public.01-edu.org/subjects/good-practices/), is one of the most important aspects while developing a game, so lets respect it.\ |
||||||
|
Just like make-your-game you will have to respect the policy of: |
||||||
|
|
||||||
|
- Running the game at least at **60fps** at all time |
||||||
|
- No frame drops |
||||||
|
- Proper use of [**`requestAnimationFrame`**](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) |
||||||
|
- Measuring performance to know if your code is fast |
||||||
|
|
||||||
|
You must not use canvas neither [Web-GL](https://get.webgl.org/) or other framework. For this project you will use the framework you did on the [mini-framework](https://public.01-edu.org/subjects/mini-framework/) project. |
||||||
|
|
||||||
|
You will have to make also a chat that enables the different players to talk to each other. As you will have to use [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API), this **chat can be considered as a "Hello World" of the multiplayer feature** for the **bomberman-dom**. |
||||||
|
|
||||||
|
#### Game Mechanics |
||||||
|
|
||||||
|
1. Players |
||||||
|
|
||||||
|
1. Nº of players: 2 - 4 |
||||||
|
2. Each player must have 3 lives. Then you are out!! |
||||||
|
|
||||||
|
2. Map |
||||||
|
|
||||||
|
1. The map should be fixed so that every player sees the whole map. |
||||||
|
2. There will be two types of blocks, the ones that can be destroyed (blocks) and the ones that can not (walls). |
||||||
|
1. The walls will be placed always in the same place, while the blocks are meant to be generated randomly on the map. Tip: the optional project [different maps](https://public.01-edu.org/subjects/make-your-game/different-maps) can be useful for this part. |
||||||
|
2. In the starting positions the players need to be able to survive. For example: if the players place a bomb, they will need to have space to avoid the bomb explosion. |
||||||
|
3. The players should be placed in the corners as their starting positions. |
||||||
|
|
||||||
|
3. Power ups (each time a player destroys a block, a random power up may or may not appear): |
||||||
|
|
||||||
|
1. Bombs: Increases the amount of bombs dropped at a time by 1; |
||||||
|
2. Flames: Increases explosion range from the bomb in four directions by 1 block; |
||||||
|
3. Speed: Increases movement speed; |
||||||
|
|
||||||
|
When the user opens the game, he/she should be presented to a page where he/she should enter a **nickname** to differentiate users. After selecting a nickname the user should be presented to a waiting page with a **player counter** that ends at 4. Once a user joins, the player counter will increment by 1. |
||||||
|
|
||||||
|
If there are more than 2 players in the counter and it does not reach 4 players before 20 seconds, a 10 second timer starts, to players get ready to start the game.\ |
||||||
|
If there are 4 players in the counter before 20 seconds, the 10 seconds timer starts and the game starts. |
||||||
|
|
||||||
|
#### Bonus |
||||||
|
|
||||||
|
Although this bomberman already is super cool, it can be always better. Here are some ideas you can implement into the game to make it super awesomely cool: |
||||||
|
|
||||||
|
- **Solo + Co-Op mode**: You are supposed to develop an AI to play against the players. So once the AI is defeated all players involved win. |
||||||
|
- **More power ups**: |
||||||
|
- _Bomb Push_: Ability to throw a bomb after it has been placed; |
||||||
|
- _Bomb Pass_: Ability to pass through bombs; |
||||||
|
- _Block Pass_: Ability to pass through blocks (not walls); |
||||||
|
- _Detonator_: Ability to choose when a bomb will explode on a key press; |
||||||
|
- _1 Up_: Gives the player an extra life; |
||||||
|
- **Release power ups after death**: When a player dies it drops one of it's power ups. If the player had no power ups, it drops a random power up. |
||||||
|
- **More than 4 players**: Be able to start a game with more than 4 players |
||||||
|
- **Team mode**: Make games with 2v2 or 3v3 (two/three players versus two/three players). |
||||||
|
- **After death interaction**: When a player dies, they can reappear as a ghost. If a ghost touches another player they come back to life. If a ghost is caught in a bomb explosion, the player controlling the ghost dies permanently. |
||||||
|
|
||||||
|
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/en-US/docs/Web/JavaScript/EventLoop) |
||||||
|
- FPS |
||||||
|
- [Jank/stutter animation](https://murtada.nl/blog/going-jank-free-achieving-60-fps-smooth-websites) |
||||||
|
- webSockets |
||||||
|
- Synchronization |
||||||
|
- 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) |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
#### Functional |
||||||
|
|
||||||
|
##### Try to open the game. |
||||||
|
|
||||||
|
###### Were you able to enter your nickname? |
||||||
|
|
||||||
|
###### After entering your nickname, were you redirected to a waiting page presenting a player counter? |
||||||
|
|
||||||
|
###### After entering your nickname, did you have access to a chat? |
||||||
|
|
||||||
|
##### Try to enter with another user (in another browser or in private browser). |
||||||
|
|
||||||
|
###### Did the player counter incremented by 1? |
||||||
|
|
||||||
|
###### After entering with another user, can all users chat with each other in realtime (using websockets)? |
||||||
|
|
||||||
|
##### Wait 20 seconds with two users in the waiting page. |
||||||
|
|
||||||
|
###### After 20 seconds did a 10 seconds timer started to begin the game? |
||||||
|
|
||||||
|
###### After the 10 seconds did the game start? |
||||||
|
|
||||||
|
##### Try to enter with 4 different users in the waiting page. |
||||||
|
|
||||||
|
###### As soon as the fourth player entered, did the 10 seconds timer started? |
||||||
|
|
||||||
|
###### While playing the game, are you able to move and place a bomb? |
||||||
|
|
||||||
|
###### Can the player see the whole map at once? |
||||||
|
|
||||||
|
##### Try placing a bomb and standing by it when it explodes. |
||||||
|
|
||||||
|
###### Did you lose 1 of your 3 lives? |
||||||
|
|
||||||
|
##### Try to lose all your 3 lives. |
||||||
|
|
||||||
|
###### Did you lose the game and are not able to play anymore? |
||||||
|
|
||||||
|
##### Try placing a bomb next to another player. |
||||||
|
|
||||||
|
###### Did the other player lost a life when the bomb exploded? |
||||||
|
|
||||||
|
##### Place a bomb next to a destroyable block. |
||||||
|
|
||||||
|
###### Did the block disappear when the bomb exploded? |
||||||
|
|
||||||
|
##### Try to destroy every block on the map. |
||||||
|
|
||||||
|
###### Did the power ups appeared in the places of the blocks? |
||||||
|
|
||||||
|
###### Can you confirm that there is 4 different types of power ups? |
||||||
|
|
||||||
|
##### Open the Dev Tool in the Performance tab. |
||||||
|
|
||||||
|
###### Does it not present frame drop? |
||||||
|
|
||||||
|
##### Open the Dev Tool in the Performance tab. |
||||||
|
|
||||||
|
###### Does the game run at or around 60fps? |
||||||
|
|
||||||
|
##### Open the Dev Tool in the performance tab and select the option rendering with the paint ON. |
||||||
|
|
||||||
|
###### Is the paint being used as less as possible? |
||||||
|
|
||||||
|
##### Open the Dev Tool in the performance tab and select the option rendering with the layer ON. |
||||||
|
|
||||||
|
###### 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 |
||||||
|
|
||||||
|
###### +Can the player see how many lives he/she has? |
||||||
|
|
||||||
|
###### +Is there any display of who won the game? |
||||||
|
|
||||||
|
###### +Can you play again after the game ends? |
||||||
Loading…
Reference in new issue