Skip to content

Commit ea8a46d

Browse files
committed
update readme
1 parent 1d16045 commit ea8a46d

File tree

2 files changed

+38
-1
lines changed

2 files changed

+38
-1
lines changed

README.md

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
11
# React Game Concept with HTML Canvas
22

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+
![game-screenshot](images/game-screenshot.png?raw=true)
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+
![code-screenshot](images/levelTransitions-in-LevelState-file.png?raw=true)
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+
66.1 KB
Loading

0 commit comments

Comments
 (0)