jQuery Blockrain.js Plugin

Last Updated : 25 Jul, 2024

jQuery plugins enhance an application with features that would generally take a long time to program correctly. However, some plugins are useful in providing entertainment to users. Although many professional sites may not need these, it is a fun feature to include in personal blogs and websites.

Blockrain.js plugin provides a Tetris game created in HTML5 and JavaScript. Tetris is a famous game and it is one of the famous games people have played and used. Adding this plugin to your website will keep users engaged with your content more.

Blockrain.js not only helps you embed the game but also allows you to customize certain elements such as

You can change the theme to fit the color scheme of your website.
You can adjust the speed of the blocks that are falling or as the name goes raining.
You can choose to add a scoreboard.
It has an autoplay feature which you can add.

The plugin is available on its website with the same name and it also has a Github repository dedicated to it with documentation.

Note: Before using it, download the files or the zip files and store them to implement in your project.

Download files from link:

https://github.com/Aerolab/blockrain.js

HTML:

The following code demonstrates the basic page structure using HTML tags to show the minimum requirement.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>This is how it appears</h1>

    <!-- The div tag below is given 
        by the plugin developer -->
    <div class="game" style=
        "width:250px; height:500px;">
    </div>
    
    <p><em>
        Plugin credits to 
        https://github.com/Aerolab/blockrain.js
    </em></p>  
</body>

</html>

Note: For the CSS part, the stylesheet is linked which is provided by the plugin.

jQuery code:

JavaScript

  <script>
    $game = $('.game').blockrain();
</script>

This involves basic jQuery syntax that involves a selector and the action.

$ defines that jQuery is used.
.game is the class of HTML.

Final code:

HTML

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="blockrain.css">
    <script src=
"https://code.jquery.com/jquery-2.1.4.min.js">
    </script>
    <script src="blockrain.jquery.min.js"></script>
</head>

<body>
    <h1>This is how it appears</h1>

    <div class="game" style=
        "width:250px; height:500px;">
    </div>

    <p><em>
        Plugin credits to 
        https://github.com/Aerolab/blockrain.js
    </em></p>

    <script>
        $game = $('.game').blockrain();
    </script>
</body>

</html>

Output:

Themes:

We can customize this by adding a theme or whatever they have provided. Let us look at the sample code for that.

The options that are already provided are:

modern
retro
candy
vim
gameboy

Many more are also provided.

Let us change the theme to one of these. All you need to do is add one statement to the already existing code:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="blockrain.css">
    <script src=
"https://code.jquery.com/jquery-2.1.4.min.js">
    </script>
    <script src="blockrain.jquery.min.js">
    </script>
</head>

<body>
    <h1>This is how it appears</h1>

    <div class="game" style=
        "width:250px; height:500px;">
    </div>

    <p><em>
        Plugin credits to 
        https://github.com/Aerolab/blockrain.js
    </em></p>

    <script>
        $game = $('.game').blockrain();
           
        /* This is where you add the line 
        to change the theme */

        $game.blockrain('theme', 'retro');
    </script>
</body>

</html>