• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Aerolab/blockrain.js: HTML5 Tetris Game for jQuery

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

Aerolab/blockrain.js

开源软件地址:

https://github.com/Aerolab/blockrain.js

开源编程语言:

JavaScript 61.3%

开源软件介绍:

Blockrain.js

A tetris game in HTML5 + Javascript (with autoplay!)

Check out the demo

Blockrain Screenshot

Setup

Create any element (a div, article, figure, whatever you want) and make sure it has a width and a height set via CSS . You can use any class, but we are using .game for this example.

<div class="game" style="width:250px; height:500px;"></div>

Then you just include jquery and blockrain and setup the game with $('.game').blockrain(). Adding the CSS file is strongly recommended, as it provides some important styles for the UI (but you can customize them as needed).

<!-- The stylesheet should go in the <head>, or be included in your CSS -->
<link rel="stylesheet" href="blockrain.css">

<!-- jQuery and Blockrain.js -->
<script src="jquery.js"></script>
<script src="blockrain.js"></script>
<script>
    $('.game').blockrain();
</script>

For extra fun, you can enable continuous autoplay, so the game plays itself continuously:

$('.game').blockrain({ autoplay: true, autoplayRestart: true });

Themes

Blockrain comes with many themes out-of-the-box, but you can create custom ones by adding them to BlockrainThemes. You have multiple settings and can even use custom textures (base64-encoded).

{
  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'
  }
}

Here's an example of a retro theme (vim) with a custom texture:

{
  background: '#000000',
  backgroundGrid: 'data:image/png;base64,iVBORw0KGgoAAA{AND SO ON}',
  primary: '#C2FFAE',
  secondary: '#C2FFAE',
  stroke: '#000000',
  strokeWidth: 3,
  innerStroke: null
}

Creating custom designs

You can now use completely custom designs for each block! You just link to one image for each block when creating your theme and the plugin takes care of the rest. You can even use lists of images if you want BlockRain to pick a random design for each block.

Keep in mind that the images need to follow the exact same format (rotation and width/height ratio) as the blocks that are bundled with the custom theme.

Fun fact: Now you can rotate the square!

'custom': {
  background: '#040304',
  backgroundGrid: '#000',
  complexBlocks: {
    line:     ['assets/blocks/custom/line.png', 'assets/blocks/custom/line.png'],
    square:   'assets/blocks/custom/square.png',
    arrow:    'assets/blocks/custom/arrow.png',
    rightHook:'assets/blocks/custom/rightHook.png',
    leftHook: 'assets/blocks/custom/leftHook.png',
    rightZag: 'assets/blocks/custom/rightZag.png',
    leftZag:  'assets/blocks/custom/leftZag.png'
  }
}

Available themes:

  • custom NEW!
  • candy
  • modern
  • retro
  • vim
  • monochrome
  • gameboy
  • aerolab

Remember you can create custom themes or modify these to better suit your design needs.

Options

Blockrain comes with many options to help customize the game:

{
  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){}
}

Methods

There are a few utility methods available to control the game. $game represents your game selector (like $('.game'), for example).

// 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');

Building Blockrain.js

This will generate the full minified source under /build . It's basically License + libs + themes + src, concatenated and minified.

gulp build

Credits

Blockrain.js is based on the work by @mrcoles, which is one of the best HTML5 tetris versions out there. The code was then modified and refactored to build a jQuery Plugin and added quite a few methods to easily add themes to it and make it simpler to implement.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap