Game Development - Tetris in React
First game development. Starter files can be found here.
Troubleshooting:
1. Solution to the absence of src folder in react app:
npm rm -g create-react-app
npm install -g create-react-app
npx create-react-app my-app
2. forEach is not a function in hooks>useStage.js
So I changed line 28 and 29 from
player.tetromino.forEach((row, y) => {
row.forEach((value, x) => {
to:
[...player.tetromino].forEach(function(row, y) {
Array.from(row).forEach((value, x) => {
3. It turns out the Start button isn't working.It shows a blank gaming screen with no tetrominoes. The console shows:
[HMR] Waiting for update signal from WDS
The suggested solution is to create projects with:
npx create-react-app project-name --scripts-version 3.2.0
Soon I found out it has to do with StartButton.js. I leftout a chunk of code in styled components. What was I thinking?
const StyledStartButton = styled.button`
box-sizing: border-box;
margin: 0 0 20px 0;
padding: 20px;
min-height: 30px;
width: 100%;
border-radius: 20px;
border: none;
color: white;
background: #333;
font-family: Pixel, Arial, Helvetica, sans-serif;
font-size: 1rem;
outline: none;
cursor: pointer;
`;
And the game worked after inserting the code :)
Coding my first game was fun, especially Tetraminos.js and usePlayer.js:
