這是一款最新的經典 HTML5 俄羅斯方塊游戲插件。該插件使用html5和Blockrain.js來制作，它具有使用簡單、響應式、可定制、速度快、有積分記錄和自動游戲的特點。

基本使用方法

可以使用任何一個元素來作為游戲窗口(一個div、article 或 figure 等等都可以)，并確保通過CSS設置了該元素的寬度和高度?？梢詾樵卦O置任何的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');

總結

以上是生活随笔為你收集整理的html5在线俄罗斯方块,HTML5最新经典俄罗斯方块游戏插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。