A Tetris clone about learning the Chemical Elements
How to Play
Check it out on here on my website.
Use the arrow keys and spacebar or the buttons in the upper right to control the game.
- Spacebar starts a new game, and pauses/resumes a game in progress.
- Arrow keys move the falling Tetris block (tetromino)
- Left and Right translate the tetromino left and right
- Z rotates the tetromino counter-clockwise and X rotates it clockwise.
- Down speeds up the tetromino (for those early levels when you just can't wait)
When the game starts, a tetromino of a random shape and chemical element will appear at the top of the game board and begin to fall. Once it cannot fall any further, either by hitting the bottom or another tetromino, a new random tetromino will appear at the top of the board.
Each new tetromino will be of a chemical element that has not yet appeared until the entire periodic table has filled up. Then, the collection of possible elements is reset, so that further tetrominos don't have repeats, and the table left full.
Your objective is to keep the board clear enough that more tetrominos can drop; if there is no more space for a tetromino to appear, the game is over. In order to keep the game going, you must fill every quadrant in a horizontal line accross the board. Once a line is filled, all its quadrants are emptied and every block above it falls one row down.
Every line you clear adds to your score; the more lines cleared at once, the more points earned. You can clear as many as four lines at once, if you're clever about it. Be wary! As your points increase, so does the Level; each level makes the tetromino drop faster, until it drops as fast as if you held the down arrow all the time!
There are three game modes: Marathon and Fixed Level
- Marathon: The classic Tetris gamemode in which tetrominos are generated forever, and the level increases with your score. Every ten points increases the level by one.
- Fixed Level: Like Marathon, but you choose at which level you want to start, and the level does not increase.
The game has been tested and operates correctly in the following browsers:
- Tested: version 51.0
- Oldest: version 3.6
- Tested: version 56.0
- Oldest: version 4.0
- Tested: version 43.0
- Oldest: version 10.1
- Tested: version 11.0
- Oldest: version 9.0
The game should operate normally in IE 9 and 10.
Older versions of IE do not support the <canvas> tag.
IE 11 and older do not support the webAudio API; if you want music or sound, appeal to Microsoft.
Edge is just as finiky as older versions of IE, but should work just as well.
Testing for Safari is pending. It doesn't support the keyEvent.key property; though I have built compatibility for this, it requires extensive testing to ensure keybinding will work correctly.
The Minimum Viable Product must replicate Tetris, and have some educational content about the chemical elements.
- Marathon uses four-block tetrominos, the level starts at zero and increases based on score up to level 20.
- Fixed Level uses four-block tetrominos but the level starts and stays at the selected number.
Version 1.0 cleaned up the interface and used the <canvas> element instead of manipulating the classes on many divs. This approach also allowed me to fit the three-letter chemical symbols on tetromino blocks without too much trouble.
Version 0.764 (pictured below) was the earliest version to be reasonably playable.
Previous versions did not clear the board on a "Game Over." The player would have to refresh the page to play a new game.
Old Version Screenshots
Here's the old game board, using a grid made of div elements.
The upcoming tetromino preview also used div elements, and included a brief description of the chemical element the tetromino used.
More of the old version, here we can see the periodic table filling in with every new tetromino.