Use the Right and Left arrow keys to move the tetrominos across the screen. The up arrow rotates your tetromino clockwise. If you press the down arrow, your tetromino will drop instantly.
To practice React with Hooks, I built this all with JSX instead of Canvas. I followed a tutorial, then added some of my own ideas and usability.
`Tetris (Russian: Тетрис [ˈtɛtrʲɪs]; portmanteau of "tetromino" and "tennis") is a tile-matching puzzle video game originally designed and programmed by Soviet Russian software engineer Alexey Pajitnov.[1] The first playable version was completed on June 6, 1984,[2] while he was working for the Dorodnitsyn Computing Centre of the Academy of Science of the Soviet Union in Moscow.[3] He derived its name from combining the Greek numerical prefix tetra- (the falling pieces contain 4 segments) and tennis, Pajitnov's favorite sport.[4][5] The name is also used in-game to refer to the play where four lines are cleared at once.
Tetris was the first game to be exported from the Soviet Union to the United States, where it was published by Spectrum HoloByte for the Commodore 64 and IBM PC. The game is a popular use of tetrominoes, the four-element case of polyominoes, which have been used in popular puzzles since at least 1907. (The name for these figures was given by the mathematician Solomon W. Golomb in 1953.)
The game, or one of its many variants, is available for nearly every video game console and computer operating system, as well as on devices such as graphing calculators, mobile phones, portable media players, PDAs, Network music players, and as an Easter egg on non-media products like oscilloscopes.[6] It has inspired Tetris serving dishes,[7] and it has even been played on the sides of various buildings.[8]
While versions of Tetris were sold for a range of 1980s home computer platforms as well as arcades, it was the successful handheld version for the Game Boy, launched in 1989, that established the game to critics and fans as one of the greatest video games of all time. In January 2010, it was announced that the games in the franchise had sold over 170 million copies—approximately 70 million physical and 100 million paid mobile downloads—making it the second best selling paid-downloaded game of all time behind Minecraft.` -Wikipedia
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify