- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - Blockrain.js
Blockrain.js 是一个 jQuery 插件,可让您在网站上嵌入经典的俄罗斯方块游戏。
一个简单的 blockrain 示例如下所示 -
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <link href = 'https://fonts.googleapis.com/css?family=Play:400,700' rel = 'stylesheet' type = 'text/css'> <link rel = "stylesheet" href = "assets/css/style.css"> <link rel = "stylesheet" href = "src/blockrain.css"> </head> <body> <section id = "examples"> <article id = "example-slider"> <div class = "example"> <div class = "instructions"> Use only arrows <div class = "keyboard"> <div class = "key key-up"></div> <div class = "key key-left"></div> <div class = "key key-down"></div> <div class = "key key-right"></div> </div> </div> <div class = "game" id = "tetris-demo"></div> </div> </article> </section> <script src = "assets/js/jquery-1.11.1.min.js"></script> <script src = "src/blockrain.jquery.libs.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', '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); }); 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-slider .theme strong').text( '"'+themes[currentIx]+'"' ); } </script> </body> </html>
这应该产生以下结果 -
点击这里