这是一款最新的经典 HTML5 俄罗斯方块游戏插件。该插件使用html5和Blockrain.js来制作，它具有使用简单、响应式、可定制、速度快、有积分记录和自动游戏的特点。
基本使用方法
可以使用任何一个元素来作为游戏窗口（一个div、article 或 figure 等等都可以），并确保通过CSS设置了该元素的宽度和高度。可以为元素设置任何的class，demo中设置为.game。
<div class="game" style="width:250px; height:500px;"></div> |
然后在页面中引入 jQuery和blockrain.jquery.js文件。接下可以通过$(‘.game’).blockrain()方法调用俄罗斯方块插件。建议添加blockrain.css到页面中，它提供了一些俄罗斯方块界面的样式，当然你也可以自定义界面样式。
<!-- The stylesheet should go in the <head>, or be included in your CSS --><link rel="stylesheet" src="blockrain.css"><!-- jQuery and Blockrain.js --><script src="jquery.js"></script><script src="blockrain.js"></script> |
<script> $('.game').blockrain();</script> |
你还可以使俄罗斯方块游戏连续自动游戏。
$('.game').blockrain({ autoplay: true, autoplayRestart: true }); |
游戏主题
Blockrain 有许多“即插即用”的主题。你也可以在BlockrainThemes中添加自定义的主题。你可以对主题进行多项设置，甚至可以定制纹理（基于Base64编码）。
{ background: '#000000', // The main background color. backgroundGrid: '#101010', // You can draw a small background grid as well. primary: null, // Color of the falling blocks. This overrides the standard block color. secondary: null, // Color of the placed blocks. This overrides the standard block color. stroke: null, // Border color for the blocks. innerStroke: null, // A small border inside the blocks to give some texture. // The following are the colors of each piece blocks: { line: '#fa1e1e', square: '#f1fa1e', arrow: '#d838cb', rightHook:'#f5821f', leftHook: '#42c6f0', rightZag: '#4bd838', leftZag: '#fa1e1e' }} |
下面是一个自定义纹理的retro主题(vim)的例子：
{ background: '#000000', backgroundGrid: 'data:image/png;base64,iVBORw0KGgoAAA{AND SO ON}', primary: '#C2FFAE', secondary: '#C2FFAE', stroke: '#000000', strokeWidth: 3, innerStroke: null} |
可用的主题有：
- candy
- modern
- retro
- vim
- monochrome
- gameboy
- aerolab
你可以通过修改这些主题来制作更好的效果。
可用参数
Blockrain有很多参数可以帮助定制俄罗斯方块游戏：
{ autoplay: false, // Let a bot play the game autoplayRestart: true, // Restart the game automatically once a bot loses showFieldOnStart: true, // Show a bunch of random blocks on the start screen (it looks nice) theme: null, // The theme name or a theme object blockWidth: 10, // How many blocks wide the field is (The standard is 10 blocks) autoBlockWidth: false, // The blockWidth is dinamically calculated based on the autoBlockSize. Disabled blockWidth. Useful for responsive backgrounds autoBlockSize: 24, // The max size of a block for autowidth mode difficulty: 'normal', // Difficulty (normal|nice|evil). speed: 20, // The speed of the game. The higher, the faster the pieces go. // Copy playText: 'Let\'s play some Tetris', playButtonText: 'Play', gameOverText: 'Game Over', restartButtonText: 'Play Again', scoreText: 'Score', // Basic Callbacks onStart: function(){}, onRestart: function(){}, onGameOver: function(score){}, // When a line is made. Returns the number of lines, score assigned and total score onLine: function(lines, scoreIncrement, score){}} |
方法
Blockrain有很多实用的控制游戏的方法。$game 代表你的游戏对象选择器（例如：$(‘.game’)）。
// Start the game$game.blockrain('start');// Restart the game$game.blockrain('restart');// Trigger a game over$game.blockrain('gameover');// Pause$game.blockrain('pause');// Resume$game.blockrain('resume');// Enable or Disable Autoplay (true|false)$game.blockrain('autoplay', true);// Enable or Disable Controls (true|false)$game.blockrain('controls', true);// Change the theme. // You can provide a theme name...$game.blockrain('theme', 'vim');// Or a theme object. **Check out src/blockrain.jquery.themes.js** for examples.$game.blockrain('theme', { background: '#ffffff', primary: '#ff7b00', secondary: '#000000'});// Return the current scorevar score = $game.blockrain('score'); |
更多详细内容请参考：https://github.com/Aerolab/blockrain.js
