html5在线俄罗斯方块,HTML5最新经典俄罗斯方块游戏插件

这是一款最新的经典 HTML5 俄罗斯方块游戏插件。该插件使用html5和Blockrain.js来制作，它具有使用简单、响应式、可定制、速度快、有积分记录和自动游戏的特点。

基本使用方法

可以使用任何一个元素来作为游戏窗口(一个div、article 或 figure 等等都可以)，并确保通过CSS设置了该元素的宽度和高度。可以为元素设置任何的class，demo中设置为.game。

然后在页面中引入 jQuery和blockrain.jquery.js文件。接下可以通过$('.game').blockrain()方法调用俄罗斯方块插件。建议添加blockrain.css到页面中，它提供了一些俄罗斯方块界面的样式，当然你也可以自定义界面样式。

$('.game').blockrain();

你还可以使俄罗斯方块游戏连续自动游戏。

$('.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 score

var score = $game.blockrain('score');