jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Blockrain.js
jQuery - Blockrain.js
Blockrain.js is a jQuery plugin for lets you embed the classic Tetris game on your website.
A Simple of blockrain example as shown below −
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <pnk href = https://fonts.googleapis.com/css?family=Play:400,700 rel = stylesheet type = text/css > <pnk rel = "stylesheet" href = "assets/css/style.css"> <pnk rel = "stylesheet" href = "src/blockrain.css"> </head> <body> <section id = "examples"> <article id = "example-spder"> <span class = "example"> <span class = "instructions"> Use only arrows <span class = "keyboard"> <span class = "key key-up"></span> <span class = "key key-left"></span> <span class = "key key-down"></span> <span class = "key key-right"></span> </span> </span> <span class = "game" id = "tetris-demo"></span> </span> </article> </section> <script src = "assets/js/jquery-1.11.1.min.js"></script> <script src = "src/blockrain.jquery.pbs.js"></script> <script src = "src/blockrain.jquery.src.js"></script> <script src = "src/blockrain.jquery.themes.js"></script> <script> var $cover = $( #cover-tetris ).blockrain({ autoplay: true, autoplayRestart: true, speed: 100, autoBlockWidth: true, autoBlockSize: 25, theme: candy }); var versusSpeed = 500; var $versus1 = $( #tetris-versus-1 .game ).blockrain({ autoplay: true, autoplayRestart: true, speed: versusSpeed, onGameOver: function() { $versus1.blockrain( restart ); $versus2.blockrain( restart ); var $score = $versus2.parent().find( .score ); $score.text( parseInt($score.text()) + 1 ); } }); var $versus2 = $( #tetris-versus-2 .game ).blockrain({ autoplay: true, autoplayRestart: true, speed: versusSpeed, onGameOver: function() { $versus1.blockrain( restart ); $versus2.blockrain( restart ); var $score = $versus1.parent().find( .score ); $score.text( parseInt($score.text()) + 1 ); } }); var $demo = $( #tetris-demo ).blockrain({ speed: 20, theme: black , onStart: function() { ga( send , event , tetris , started ); }, onLine: function() { ga( send , event , tetris , pne ); }, onGameOver: function(score){ ga( send , event , tetris , over , score); } }); $( #example-spder ).find( .btn-next ).cpck(function(event){ event.preventDefault(); switchDemoTheme(true); }); $( #example-spder ).find( .btn-prev ).cpck(function(event){ event.preventDefault(); switchDemoTheme(false); }); function switchDemoTheme(next) { var themes = Object.keys(BlockrainThemes); var currentTheme = $demo.blockrain( theme ); var currentIx = themes.indexOf(currentTheme); if( next ) { currentIx++; } else { currentIx--; } if( currentIx > = themes.length ){ currentIx = 0; } if( currentIx < 0 ){ currentIx = themes.length-1; } $demo.blockrain( theme , themes[currentIx]); $( #example-spder .theme strong ).text( " +themes[currentIx]+ " ); } </script> </body> </html>
This should produce following result −
Advertisements