|
1 | 1 | # React Game Concept with HTML Canvas
|
2 | 2 |
|
3 |
| -This is a simple game example made with React |
| 3 | +🔹 This is a simple game concept made in [React](https://github.com/facebook/react) with [Typescript](https://github.com/Microsoft/TypeScript). I also installed [styled-components](https://github.com/styled-components/styled-components) library to help with css. 🔹 |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +🔸 Map and Entities rendering were made in [HTML Canvas elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) with [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D). 🔸 |
| 8 | + |
| 9 | +❗ This game was made **to learn React basics** so I dind't use redux to state management but I made my own state control (maybe it's not a good one - but, well, if it works it's good!! 😏). I tried to implement some kind of a *finite state machine* logic without any libraries. |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +##How to play |
| 14 | +- **Browers** |
| 15 | +Just hit **Enter** to start, pause, unpause, end level and restart, **wasd** or **arrows** to move. |
| 16 | + |
| 17 | +- **Mobile** * |
| 18 | +Touch **buttons** at the bottom to do everything. |
| 19 | + |
| 20 | +Oh, you are the little girl in the middle, and must collect every coin to get to next level! Monsters will chase you, but from time to time they will take a little rest. Game ends when monsters get you 3 times. |
| 21 | + |
| 22 | +> ### Try it: |
| 23 | +> |
| 24 | +> https://react-game-concept-with-canvas.vercel.app/ |
| 25 | +> |
| 26 | +> 🛑 May be laggy in some old or not updated smartphones |
| 27 | +
|
| 28 | +## Todo |
| 29 | + |
| 30 | +It's not an original idea, nor a really great game, but I would like to implement some more details: |
| 31 | + |
| 32 | +- A name for the game; |
| 33 | +- More monsters, more items, more heroes; |
| 34 | +- A highscore with data saved in localStorage; |
| 35 | +- A screen before game starts where players could choose an hero, give it a name, set volume, get high scores; |
| 36 | +- Give some kind of power-up to hero, so he/she could fight against monsters or have some defense against them; |
| 37 | +- Improve maps and design more levels; |
| 38 | + |
| 39 | +🤔 That's all I can think of by now... |
| 40 | + |
0 commit comments