Top Git Project

Freecodecamp's open-source codebase and curriculum....


A declarative, efficient, and flexible JavaScript library...


An Open Source Machine Learning Framework for Everyone


The most popular HTML, CSS, and JavaScript framework for...

System design-primer

Learn how to design large-scale systems. Prep for the...


🙃 A delightful community-driven (with 1900+...


Flutter makes it easy and fast to build beautiful apps...


JavaScript Style Guide


All Algorithms implemented in Python


「Java学习+面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识。准备 Java 面试,首选...


Periotris.js is a TypeScript porting of CSharperMantle's Periotris game.


    English | 中文

    Get familiar with the Periodic Table of Elements in a fun way, directly in your browsers.

    Periotris.js v2.0.1 PWA screenshot Periotris.js v2.0.1



    Where to play?

    Instances of Periotris.js are hosted on GitHub Pages and Vercel.

    The game is a Progressive Web App, providing a native-app-like experience. See your browser's manual for more information.

    How to play?

    For desktop platforms, keyboard is the recommended way to control the game.

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

    For touching-enabled platforms, use the finger to play.

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

    What to do next?

    Periotris.js provides several ways to customize the game. You can:

    • Customize the color theme of the game,
    • Play other maps,
    • Control the speed of the game,
    • Change the game's difficulty,
    • Customize the periodic table,

    ... and more!

    Most of these settings can be edited on the "Settings" page of the game. The settings are saved in the browser's local storage and are not uploaded to any server.

    Most settings are saved and validated real-time, so when you make a change to the settings, the game will immediately reflect the change.

    If you encounter any problems with your file format, please check the structure of your file.

    Write your own map

    Game maps defines the game area that you need to fill. It specifies how large the game area is, which element should cells represent, and which cells are left blank.

    A game map is represented in a text file in the format named JavaScript Object Notation (JSON). You will need to write your own map in the structure listed below.

    1. The map file (designated as "map") is a JSON file containing an object as its root (designated as "map object").
    2. The map object should contain following properties:
      • map: A row-major 2D array containing all blocks. Each block is represented by an object with these properties:
        • atomicNumber: An integer indicating the element the cell represents
        • filledBy: An integer. 7 for a free block, 8 for an unavailable block.
      • totalAvailableBlocksCount: An integer representing the total number of blocks that can be filled in the map, that is, the number of blocks where filledBy equals 7.
      • playAreaSize: An object It representing the visible size of the map with two properties:
        • width: An integer.
        • height: An integer.

    For an example file, which is also the default map in the game, see DefaultMap.json.

    For a formal description of the structure of the map in JSON Schema, see Map.json.schema.

    Write your own color theme

    Color themes define a set of rules that cells should be colored according to.

    A color theme file is also represented in JSON. You will need to write your own color theme in the structure listed below.

    1. The color theme file (designated as "color theme") is a JSON file containing an object as its root (designated as "color theme object").
    2. The color theme object should contain the following properties:
      • rules: An array of objects. Each object represents a rule. Each rule is represented by an object with these properties:
        • atomicNumberRange: An object indicating the range of elements the rule applies to from from to to (both inclusive).
        • color: A valid CSS color.

    For an example file, which is also the default color theme in the game, see DefaultColorScheme.json.

    For a formal description of the structure of the map in JSON Schema, see ColorScheme.json.schema.



    git clone --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). Reminder: Do not use 'Download ZIP' button! Make sure that you have your git repository initialized or Periotris.js will fail to determine its revision.

    Install dependencies

    Dependencies that need to be installed manually:

    Once you have installed all above, run the following commands:

    yarn install --immutable

    Host local instances

    Run the following command to build and serve a publish-ready site (the same as you get from GH Pages and Vercel instances):

    yarn run build && yarn run serve

    Or you can run the following command to build and serve a development site:

    yarn run develop

    Follow the instructions printed in the terminal to enjoy your local instance.


    yarn run test

    This command will run all tests and will print the results. Normally all tests should pass.

    Next saas-starter

    ⚡️ Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.

    Ts postgres

    Non-blocking PostgreSQL client for Node.js written in TypeScript.


    Fast and lightweight JavaScript game engine built on WebGL and glTF

    Flamework gateways-mod

    Implement Flamework remotes with classes


    IOS Android Web cross platform app for real time collaborative music listening session and playlist editing. Using...


    A social media platform to create communities and make friends