HTML5最新经典俄罗斯方块游戏插件

当前位置:主页 > Html5库 > HTML5游戏 > HTML5最新经典俄罗斯方块游戏插件
HTML5最新经典俄罗斯方块游戏插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-20
    阅读:
简要教程

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

基本使用方法

可以使用任何一个元素来作为游戏窗口(一个divarticlefigure 等等都可以),并确保通过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 score
var score = $game.blockrain('score');
                

更多详细内容请参考:https://github.com/Aerolab/blockrain.js

网友评论