Los complementos de jQuery mejoran una aplicación con características que generalmente tomarían mucho tiempo para programarse correctamente. Sin embargo, algunos complementos son útiles para proporcionar entretenimiento a los usuarios. Aunque es posible que muchos sitios profesionales no los necesiten, es una función divertida para incluir en blogs y sitios web personales.
El complemento Blockrain.js proporciona un juego de Tetris creado en HTML5 y JavaScript. Tetris es un juego famoso y es uno de los juegos famosos que la gente ha jugado y usado. Agregar este complemento a su sitio web mantendrá a los usuarios más comprometidos con su contenido.
Blockrain.js no solo te ayuda a incrustar el juego, sino que también te permite personalizar ciertos elementos como
- Puede cambiar el tema para que se ajuste a la combinación de colores de su sitio web.
- Puedes ajustar la velocidad de los bloques que van cayendo o como dice el nombre lloviendo.
- Puede optar por agregar un marcador.
- Tiene una función de reproducción automática que puede agregar.
El complemento está disponible en su sitio web con el mismo nombre y también tiene un repositorio de Github dedicado con documentación.
Nota: Antes de usarlo, descargue los archivos o los archivos zip y guárdelos para implementarlos en su proyecto.
Descargar archivos desde el enlace:
https://github.com/Aerolab/blockrain.js
HTML:
El siguiente código demuestra la estructura básica de la página usando etiquetas HTML para mostrar el requisito mínimo.
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>
Nota: Para la parte CSS, la hoja de estilo está vinculada y es proporcionada por el complemento.
Código jQuery:
Javascript
<script>
$game = $('.game').blockrain();
</script>
Esto implica la sintaxis básica de jQuery que implica un selector y la acción.
- $define que se usa jQuery.
- . juego es la clase de HTML.
código final:
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>
Producción:
Temas: Podemos personalizar esto agregando un tema o lo que hayan proporcionado. Veamos el código de muestra para eso.
Las opciones que ya se proporcionan son:
- moderno
- retro
- dulce
- empuje
- game boy
También se proporcionan muchos más.
Cambiemos el tema a uno de estos. Todo lo que necesita hacer es agregar una declaración al código ya existente:
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>
Producción:
tema de game boy
tema retro
Es altamente personalizable y para los sitios web a los que les encantaría agregar algunos elementos divertidos, este sería el complemento perfecto para ello.
Publicación traducida automáticamente
Artículo escrito por caaakansha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA