jQuery - Blockrain.js-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

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 −

jQuery - Blockrain.js

友情链接