Adapted from HackJam Whack a mole in Reason (https://github.com/IwanKaramazow/ReasonDojoAlicante) by @IwanKaramazow
git clone [repo-link]
npm install
npm start
yarn
yarn start
Take a look : https://sad-liskov-0b5a7f.netlify.com/
Modify the rendered text in App.js
into "Hello React !"
Integrate this custom button in App.js
:
<Button text='Start game!' />
Note that this is not html but JSX: https://reactjs.org/docs/introducing-jsx.html This simplifies a dev's job and it is optional: https://reactjs.org/docs/react-without-jsx.html
Now create the custom button component Button.js
.
- It's a React Component that will render a
<button>
with a custom inner text - To render the custom text in
App.js
use a prop: https://reactjs.org/docs/components-and-props.html
The board will contain 9 grounds. The goal is to render the content of our board multiple times :
<div className='board'>
<div className='board-item'>
<div className='mole'> </div>
<div className='ground'> </div>
</div>
</div>
Create a component Board.js
for this.
Repeating code is not optimal, following this concept you can turn your static board into a dynamic one: https://reactjs.org/docs/lists-and-keys.html
Hint You can only map over an array
States are a way for your App to store values and keep their content after re-renders. Each value is stored in a state object :
state = {
first: "value",
second: 123,
third: fourth: {fifth: 432},
...
}
More info for reading and setting a state value: https://reactjs.org/docs/state-and-lifecycle.html
Now, using states, show the score in App.js
and increment it on every click of the Button component created previously.
Hint Here the click event on <Button>
will be a prop and won't be handled like a <button>
in CSS.
- Create a function that will make a mole appear randomly. (Use the commented changeActiveMole function in
App.js
) Hint Create a state to store the random number (the mole appearing) - Use
setTimeout()
to create an interval during which the mole will appear Hint To make the mole appear from the ground, take a look at/src/static/style.css
Now that you have moles popping up from everywhere every second you should implement the commented hit function !
You should divide your game into different states :
- Waiting (before clicking the start button)
- Start of the game (default state)
- Hitting a mole (incrementing the score)
- Play (moles are appearing randomly)
- Take a look to this new React feature and rewrite the app to use it: https://reactjs.org/docs/hooks-intro.html
- Replace style.css by styled components: https://www.styled-components.com/docs/basics
- You can spam an appearing mole and increment the score quickly: fix this so that each time a mole appear can only hit it once.
- Create a pause button
- Create a stop button and save your score on a score table.
- Have fun !