Periotris.js is a Progressive Web App-compliant Periotris game built with React in TypeScript, Gatsby and Material UI. Aimed to be played directly on modern browsers, Periotris.js is a great tool for teaching periodic table in a fun way.

Periotris.js v1.3.2 PWA screenshot FIGURE 1: Periotris.js v1.3.2 screenshot, captured in a standalone PWA window in Microsoft Edge

Getting started

Way One: Play in browsers directly

An instance of Periotris.js is hosted on GitHub Pages as a Progressive Web Application (PWA). Try it here.

Tips: The app runs best on screens larger than 1024768. If you are using mobile browsers please switch to *landscape mode for better experience.

Way Two: Build the project

Clone

Run (if you have not done it previously):

git clone https://github.com/CSharperMantle/periotrisjs.git --depth=1
cd periotrisjs

You may omit the --depth=1 flag if you want a complete commit history rather than a grafted shallow history (which saves disk space).

Install dependencies

Though the project is intended to run in browsers, it needs Node.js v14.x+ environment to build. Please refer to their documents for installation guide on Node.js.

Once you have installed a supported Node.js runtime, run the following commands:

npm install # for runtime deps
npm install -g gatsby-cli # for running Gatsby CLI commands

Build and serve

Run the following commands to build and serve a static, release-ready Gatsby site:

gatsby build && gatsby serve
# ... or ...
npm run build
gatsby serve

If you prefer hot-reload, friendly exception notice and other development-friendly features of Gatsby, run the following commands to start a dev server:

gatsby develop

After these commands are executed, you should see in the terminal an address to visit. The address is usually http://localhost:8000/ or http://localhost:9000/ depending on whether your build is for dev or production.

OPTIONAL: Test

Run the following to start jest unit testing framework:

npm run test

You should see green outputs like ‘success’ in the terminal after a while.

In-game controls

Keyboard

  • W: Rotate
  • A: Move left
  • D: Move right
  • S: Move down
  • Space: Instant drop

Pointer gesture

  • Tap: Rotate
  • Swipe left: Move left
  • Swipe right: Move right
  • Swipe down: Move down
  • Long press: Instant drop