Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
imgs
old_version
stylesheets
.DS_Store
LICENSE
README.md
audio.js
chemical-elements.js
constants.js
favicon.ico
game.js
index.html
input.js
periodic-table.js
preview-board.js
render.js
tetris-board.js
tetromino.js

README.md

Tetrelementis

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.

Development

While first learning JavaScript, but before learning Git workflow, I spent some extra time building a Tetris clone in the browser. Early on, I decided to distinguish my version by assigning a chemical element to each Tetris block (or 'tetromino'). After several weeks, I had a functional, if clunky, game with a twist of Chemistry.

The more I learned about JavaScript, the more I realized my resulting game needed a total rehaul. Rather than start a new Git repository with no history of my work (or worse, continuing to work without version control) I resolved to start over!

I decided to come back to this project one more time, after learning more about web development and how to optimize JavaScript performance. This version contains all of the features of the previous with some improvements, and I intend to complete many features I had not implemented before.

Browser Support

The game has been tested and operates correctly in the following browsers:

FireFox:

  • Tested: version 51.0
  • Oldest: version 3.6

Chrome:

  • Tested: version 56.0
  • Oldest: version 4.0

Opera:

  • Tested: version 43.0
  • Oldest: version 10.1

Internet Explorer (IE):

  • Tested: version 11.0
  • Oldest: version 9.0

Notes

  • 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.

Version History

🔷 2.0 : 18 Feb 2017 - Rewrote almost all the JS to get better performance, and use just one <canvas> element.

🔻 1.150 : 30 Mar 2016 - High score is now saved in local storage, and returning users will find their high score is loaded into the page. Players can also reset their high score, if desired.

🔻 1.100 : 28 Mar 2016 - Add controls to rotate the tetromino both clockwise and counter-clockwise. Button controls now more closely resemble keyboard keys.

🔻 1.000 : 06 Mar 2016 - Add three game modes: Marathon, Fixed Level, and Pentathlon.

🔻 0.941 : 05 Mar 2016 - All 118 elements have a brief description and link to a more detailed article on the element. A player can click on any element showing in the table to display its description. As the player's score increases, the game level increases, increasing the tetrominos' drop speed.

🔻 0.764 : 04 Mar 2016 - Game doesn't start until player presses the spacebar. On gameover, the board clears, allowing another game to begin. Starting screen includes directions. Four buttons in the upper right simulate the arrow keys.

🔻 0.705 : 24 Feb 2016 - Game now displays a preview for the next tetromino. When one or more lines are filled, they are instantly cleared and all blocks above them move down. The Periodic Table of Elements fills in with each new tetromino.

🔻 0.588 : 16 Feb 2016 - Player now can rotate tetromino, unless doing so would collide with the bounds of the grid or another tetromino.

🔻 0.529 : 15 Feb 2016 - Player can make the tetromino fall more quickly by holding the down cursor key and can slide tetromino left or right with the corresponding cursor key. Tetromino will stop when colliding with the edges of the grid and with other tetrominos. Default drop speed has been slowed.

🔻 0.353 : 13 Feb 2016 - Line block drops until it reaches the bottom of the grid. Tetromino model includes function to move laterally.

🔻 0.235 : 09 Feb 2016 - Line block drops five spaces and stops.

🔻 0.118 : 18 Jan 2016 - Draw a tetromino on the grid.

🔻 0.059 : 12 Jan 2016 - Draw the Tetris grid.

MVP Checklist

The Minimum Viable Product must replicate Tetris, and have some educational content about the chemical elements.

Draw a grid 10 blocks wide, 20 blocks high.

Draw a tetromino on the grid.

Draw the appropriate chemical symbol on each block of the tetromino.

Drop a tetromino at a constant rate.

Floor collision: A tetromino stops falling once it reaches the bottom of the grid.

Wall collision: A tetromino stops moving laterally once it reaches a side of the grid.

Tetromino collision: A tetromino stops moving when it collides with a landed tetromino.

Lateral Control: Player can move the active tetromino left or right.

Vertical Control: Player can increase the falling speed of the active tetromino.

Rotation: Player can rotate the active tetromino clockwise or counter-clockwise.

Block preview: Display upcoming block.

Periodic Table: Fill in elements on the table as they are cleared from the grid.

Score: As player clears lines, score increases: more lines at once provide exponentially greater points.

Element Details: Small display with a few facts about each element.

External Links: Provide a link to an external page about each element (NOT Wikipedia!)

Levels: As score increases, blocks drop faster.

Game Modes: Player can choose between three game modes:

  • 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.

Opera compatibility

IE 11 compatibility

Planned Features

◽️ Game responds with sound effects.

◽️ Compatibility on mobile platforms?

◽️ Provide alternate control scheme for mobile users (biggest barrier to mobile).

◽️ Ensure compatibility on more browsers: Safari.

Production Screenshots

Version 2.0 introduces a mouse cursor, options menu, pause overlay, and keyboard icons that respond to key presses. Additionally, the JavaScript has been optimized for better performance.

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.

You can’t perform that action at this time.