Educational

Blockrain.js

Written by

Saim Khalid

in

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"/><link href ='https://fonts.googleapis.com/css?family=Play:400,700' 

     rel ='stylesheet' type ='text/css'&gt;&lt;link rel ="stylesheet" href ="assets/css/style.css"&gt;&lt;link rel ="stylesheet" href ="src/blockrain.css"&gt;&lt;/head&gt;&lt;body&gt;&lt;section id ="examples"&gt;&lt;article id ="example-slider"&gt;&lt;div class="example"&gt;&lt;div class="instructions"&gt;
              Use only arrows
              &lt;div class="keyboard"&gt;&lt;div class="key key-up"&gt;&lt;/div&gt;&lt;div class="key key-left"&gt;&lt;/div&gt;&lt;div class="key key-down"&gt;&lt;/div&gt;&lt;div class="key key-right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="game" id ="tetris-demo"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/article&gt;&lt;/section&gt;&lt;script src ="assets/js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;&lt;script src ="src/blockrain.jquery.libs.js"&gt;&lt;/script&gt;&lt;script src ="src/blockrain.jquery.src.js"&gt;&lt;/script&gt;&lt;script src ="src/blockrain.jquery.themes.js"&gt;&lt;/script&gt;&lt;script&gt;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','line');},onGameOver:function(score){ga('send','event','tetris','over', score);}});$('#example-slider').find('.btn-next').click(function(event){
        event.preventDefault();switchDemoTheme(true);});$('#example-slider').find('.btn-prev').click(function(event){
        event.preventDefault();switchDemoTheme(false);});functionswitchDemoTheme(next){var themes = Object.keys(BlockrainThemes);var currentTheme = $demo.blockrain('theme');var currentIx = themes.indexOf(currentTheme);if( next ){ currentIx++;}else{ currentIx--;}if( currentIx &gt;= themes.length ){ currentIx =0;}if( currentIx &lt;0){ currentIx = themes.length-1;}


        $demo.blockrain('theme', themes[currentIx]);$('#example-slider .theme strong').text('"'+themes[currentIx]+'"');}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts