Plug-in jQuery Blockrain.js

Os plug-ins jQuery aprimoram um aplicativo com recursos que geralmente demoram muito para serem programados corretamente. No entanto, alguns plug-ins são úteis para fornecer entretenimento aos usuários. Embora muitos sites profissionais possam não precisar deles, é um recurso divertido de incluir em blogs e sites pessoais.

O plugin Blockrain.js fornece um jogo Tetris criado em HTML5 e JavaScript. Tetris é um jogo famoso e um dos jogos mais famosos que as pessoas já jogaram e usaram. Adicionar este plug-in ao seu site manterá os usuários mais engajados com seu conteúdo.

Blockrain.js não só ajuda a incorporar o jogo, mas também permite que você personalize certos elementos, como

Você pode alterar o tema para se adequar ao esquema de cores do seu site.
Você pode ajustar a velocidade dos blocos que estão caindo ou conforme o nome vai chovendo.
Você pode optar por adicionar um placar.
Possui um recurso de reprodução automática que você pode adicionar.

O plugin está disponível em seu site com o mesmo nome e também possui um repositório Github dedicado a ele com documentação.

Nota: Antes de utilizá-lo, baixe os arquivos ou os arquivos zip e armazene-os para implementar em seu projeto.

Baixe os arquivos do link:

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

HTML:

O código a seguir demonstra a estrutura básica da página usando tags HTML para mostrar o requisito mínimo.

<!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>

Nota: Para a parte CSS, a folha de estilo está vinculada, o que é fornecido pelo plug-in.

código jQuery:

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

Isso envolve a sintaxe jQuery básica que envolve um seletor e a ação.

$define que jQuery é usado.
. jogo é a classe de HTML.

Código final:

<!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>

Saída:

Temas: podemos personalizar isso adicionando um tema ou o que quer que eles tenham fornecido. Vejamos o código de exemplo para isso.

As opções já fornecidas são:

moderno
retro
doce
vim
game Boy

Muitos mais também são fornecidos.

Vamos mudar o tema para um destes. Tudo que você precisa fazer é adicionar uma instrução ao código já existente:

<!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>

Saída: